javascript - 获取远程视频黑屏 : WebRTC

Question

我正在使用 WebRTC 开发视频通话功能，但遇到了一个非常奇怪的问题。

当我调用电话时一切正常，并且我正在接收远程视频流，但是当我接听电话时，我看到没有远程视频的黑屏。奇怪的是，当我刷新页面时，我得到了远程视频!

在控制台中，我得到以下信息:

视频约束 false

但是当我刷新页面时，我得到了视频对象。

这是我在 index.html 中的视频容器，

<video id="video-container" autoplay="autoplay" class="video-style"></video>

Main.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();
}
})();

这段代码有什么问题？

提前致谢!

Answer 1

经过一些研究，我找到了解决方案。

我收到错误 Video constraints false 因为它们是在调用电话时设置的，而不是在接听电话时设置的。所以我手动设置属性，

useVideo: true

在 deviceParams 之后。

就像，

tag: "video-container",
deviceParams: {
      // Asking for camera permissions and devices.
      useCamera: 'any',
      useMic: 'any',
      useSpeak: 'any',
},
useVideo: true,
//other properties

现在我也能在打电话时收到视频。