I can't get local video

nuxero commented 6 years ago

Hello, I am writing a small videocall application based on the helloworld example. My problem is I that I'm unable to show the local video. The code goes as follows:

<!-- dial.html -->

<!-- Video Output Zone -->
<input id="number" /><button onclick="call()">call</button>
<div id="video-out"></div>

<!-- Libs and Scripts -->
<script src="https://stephenlb.github.io/webrtc-sdk/js/webrtc-v2.js"></script>
<script>
    var session = null;
    const number = (''+Math.random()*100000).split('.')[0];
    console.log(number);

    var phone = PHONE({
        number        : number,
        publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',
        subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',
        media         : { audio : true, video : true },
        ssl           : true
    });

    phone.ready(function(){
        console.log('Phone is ready');
    });

    phone.camera.ready(function(video){
        console.log('Camera is ready');
        phone.$('video-out').append(video); //first attempt, all I get is an empty video tag
    })

    // When Call Comes In or is to be Connected
    phone.receive(function(session){
        // Display Your Friend's Live Video
        session.connected(function(session){
            phone.$('video-out').appendChild(session.video);
            phone.$('video-out').append(phone.video); //second attemp, I get undefined
        });
    });

    function call() {
        var callee = document.getElementById('number').value;
        console.log('calling ' + callee)
        session = phone.dial(callee);
    }
</script>

I am able to get the other participant video but not my own one.

Acording to the readme I can access my local video on phone.video, the exact example is $('#display-div').append(phone.video);. I've added that to the session.connected event and what I get is undefined, maybe am I adding it on the wrong place?

Also I saw under tutorials/ a helloworld.html file on which a phone.camera.ready listener is used. When I try to do that I get an empty video tag.

While looking through the live demo I noticed that in order to show the local camera on the thumbnail, phone.snap is used, I think I can do something like that for my app but there's got to be a better way, right?

Not sure what info should I provide but I'm on Fedora 25 and I've tried on Firefox 56.0 64 bits, Chrome 61.0.3163.100 64-bit and on a Samsung Galaxy S7 with no success.