javascript - 远程视频黑屏: WebRTC

Question

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

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

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

视频限制错误

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

这是我在 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: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4170717179017073766f716f716f70" rel="noreferrer noopener nofollow">[email protected]</a>',
        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: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="423627313602362731366c212d2f" rel="noreferrer noopener nofollow">[email protected]</a>'
        },

        dedEnc: false,
    });
}

function hangupCall() {
    currentCall.hangup();
};

function answerCall() {
    currentCall.answer();
}
})();

这段代码有什么问题？

提前致谢!

Answer 1

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

我收到错误视频限制为假，因为它们是在调用电话时设置的，而不是在接听电话时设置的。所以我手动设置属性，

useVideo: true

在deviceParams之后。

就像，

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

现在我在调用电话时也会收到视频。