[英]Getting black screen for remote video: WebRTC
I'm developing video calling functionality with WebRTC and facing a very strange problem.我正在使用 WebRTC 开发视频通话功能并面临一个非常奇怪的问题。
When I make a call everything is fine and I'm getting a remote video stream, but when I receive a call, I get a black screen with no remote video.当我打电话时一切都很好,我收到了远程视频流,但是当我接到电话时,我得到了一个没有远程视频的黑屏。 The strange part is that when I refresh the page I get the remote video!
奇怪的是,当我刷新页面时,我得到了远程视频!
In the console, I'm getting the following thing:在控制台中,我得到以下信息:
Video constraints false视频限制 false
But when I refresh the page I get the video object.但是当我刷新页面时,我得到了视频对象。
This is my video container in index.html ,这是我在index.html 中的视频容器,
<video id="video-container" autoplay="autoplay" class="video-style"></video>
Main.js:主要.js:
(function() {
var vertoHandle, vertoCallbacks, currentCall;
document.getElementById("make-call").addEventListener("click", makeCall);
document.getElementById("hang-up-call").addEventListener("click", hangupCall);
document.getElementById("answer-call").addEventListener("click", answerCall);
$.verto.init({}, bootstrap);
function bootstrap(status) {
vertoHandle = new jQuery.verto({
// ID of HTML video tag where the video feed is placed.
tag: "video-container",
deviceParams: {
// Asking for camera permissions and devices.
useCamera: 'any',
useMic: 'any',
useSpeak: 'any',
},
login: '1008@127.0.0.1',
passwd: '1234',
socketUrl: 'wss://127.0.0.1:8082',
ringFile: '',
iceServers: true,
}, vertoCallbacks);
};
vertoCallbacks = {
onWSLogin : onWSLogin,
onWSClose : onWSClose,
onDialogState: onDialogState,
}
function onWSLogin(verto, success) {
console.log('onWSLogin', success);
}
function onWSClose(verto, success) {
console.log('onWSClose', success);
}
function onDialogState(d) {
console.debug('onDialogState', d);
if(!currentCall) {
currentCall = d;
}
switch (d.state.name) {
case 'trying':
//
break;
case 'ringing':
alert('Someone is calling you, answer!');
break;
case 'answering':
//
break;
case 'active':
//
break;
case 'hangup':
//
break;
case 'destroy':
//
break;
}
}
function makeCall() {
vertoHandle.videoParams({
minWidth: 320,
minHeight: 240,
maxWidth: 640,
maxHeight: 480,
// The minimum frame rate of the client camera, Verto will fail if it's
// less than this.
minFrameRate: 15,
// The maximum frame rate to send from the camera.
vertoBestFrameRate: 30,
});
currentCall = vertoHandle.newCall({
useVideo: true,
mirrorInput: true,
destination_number : '3520',
caller_id_name : 'Test Caller',
caller_id_number: '1008',
outGoingBandwidth: 'default',
inComingBandwidth: 'default',
useStereo: true,
useMic: true,
useSpeak: true,
userVariables: {
email: 'test@test.com'
},
dedEnc: false,
});
}
function hangupCall() {
currentCall.hangup();
};
function answerCall() {
currentCall.answer();
}
})();
What's wrong with this code?这段代码有什么问题?
Thanks in advance!提前致谢!
So after some research, I've found the solution.所以经过一番研究,我找到了解决方案。
I was getting the error Video constraints false
because they were set at the time of making a call, not at the time of receiving.我收到错误
Video constraints false
因为它们是在拨打电话时设置的,而不是在接收时设置的。 So I manually set the property,所以我手动设置了属性,
useVideo: true
after deviceParams .在deviceParams之后。
Just like,就像,
tag: "video-container",
deviceParams: {
// Asking for camera permissions and devices.
useCamera: 'any',
useMic: 'any',
useSpeak: 'any',
},
useVideo: true,
//other properties
Now I'm getting the video at the time of making a call too.现在我在打电话时也收到了视频。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.