javascriptvideo-streamingwebrtcfreeswitchmod-verto

Getting black screen for remote video: WebRTC


I'm developing video calling functionality with WebRTC and facing a very strange problem.

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

But when I refresh the page I get the video object.

This is my video container in 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();
}
})();

What's wrong with this code?

Thanks in advance!


Solution

  • 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. So I manually set the property,

    useVideo: true
    

    after 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.