stephenlb / webrtc-sdk

WebRTC Simple Calling API + Mobile SDK - A simplified approach to RTCPeerConnection for mobile and web video calling apps.
https://stephenlb.github.io/webrtc-sdk/
MIT License
853 stars 278 forks source link

autocam seems to block .ready() call #34

Closed SodY2 closed 6 years ago

SodY2 commented 7 years ago

hey,

got a maybe uncommon issue. i want to create some kind of broadcasting app, where the client dont need or better not has to start the cam. just connect and watch.

a regular broadcast works fine for me. at the point where i add "autocam: false" to the phone-config it seems like the .ready()-call is not triggered and i dont receive any videos

maybe i missed something in the doc? i couldnt figure out whats wrong.

would be great if you could solve me this riddle.

Server:

        var broadcaster = PHONE({
            number: "BROADCASTER", // If you want more than one broadcaster, use unique ids
            publish_key: 'xxx-mypubkey',
            subscribe_key: 'xxx-mysubkey'
        });

        broadcaster.receive(function(new_viewer) {
            new_viewer.connected(function(viewer) {

            }); // new viewer joined
            new_viewer.ended(function(viewer) {

            }); // viewer left
            //new_viewer.hangup();  // if you want to block the viewer
        });

Client:

        var viewer = PHONE({
            number: "VIEWER-" + new Date,
            autocam: false,
            publish_key: 'xxx-mypubkey',
            subscribe_key: 'xxx-mysubkey'
        });

        viewer.ready(function() {
            var broadcaster = viewer.dial("BROADCASTER");
        });

        viewer.receive(function(broadcaster) {
            broadcaster.connected(function(broadcaster) {
                $('#media-stream').prop('src', broadcaster.video.src);
            });
            broadcaster.ended(function(broadcaster) {});
        });
stephenlb commented 7 years ago

hi!

On Wed, Feb 22, 2017 at 8:43 AM, AdrianR notifications@github.com wrote:

hey,

got a maybe uncommon issue. i want to create some kind of broadcasting app, where the client dont need or better not has to start the cam. just connect and watch.

a regular broadcast works fine for me. at the point where i add "autocam: false" to the phone-config it seems like the .ready()-call is not triggered and i dont receive any videos

maybe i missed something in the doc? i couldnt figure out whats wrong.

would be great if you could solve me this riddle.

Server:

    var broadcaster = PHONE({
        number: "BROADCASTER", // If you want more than one broadcaster, use unique ids
        publish_key: 'xxx-mypubkey',
        subscribe_key: 'xxx-mysubkey'
    });

    broadcaster.receive(function(new_viewer) {
        new_viewer.connected(function(viewer) {

        }); // new viewer joined
        new_viewer.ended(function(viewer) {

        }); // viewer left
        //new_viewer.hangup();  // if you want to block the viewer
    });

Client:

    var viewer = PHONE({
        number: "VIEWER-" + new Date,
        autocam: false,
        publish_key: 'xxx-mypubkey',
        subscribe_key: 'xxx-mysubkey'
    });

    viewer.ready(function() {
        var broadcaster = viewer.dial("BROADCASTER");
    });

    viewer.receive(function(broadcaster) {
        broadcaster.connected(function(broadcaster) {
            $('#media-stream').prop('src', broadcaster.video.src);
        });
        broadcaster.ended(function(broadcaster) {});
    });

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/stephenlb/webrtc-sdk/issues/34, or mute the thread https://github.com/notifications/unsubscribe-auth/AACwnsUCmz0xZQ48hEYRVIDrTBc_kbjeks5rfGWwgaJpZM4MI494 .

-- Stephen Blum - CTO https://www.linkedin.com/in/stephenlb/

stephenlb commented 7 years ago

Is your client code correct? broadcaster var is out of scope.

stephenlb commented 7 years ago

broadcaster locked in scope

viewer.ready(function() {
    var broadcaster = viewer.dial("BROADCASTER");
});
alejo-moreno commented 6 years ago

@stephenlb I've got the same issue, I even got to fire de ready event by adding a "oneway" parameter and trigger readycb(), but this doesn't seem to work, inside the viewer.receive event, the broadcaster.connected event never got fired and so I dont get the session video. PS. the broadcaster var is not out of scope, since its referencing the broadcaster var passed on the callback.

stephenlb commented 6 years ago

Hi! Reviewing details.

stephenlb commented 6 years ago

Yes this makes sense now. Looking into a quick solution.

stephenlb commented 6 years ago

Fixed! And a working example may be found here: https://github.com/stephenlb/webrtc-sdk/blob/master/tutorials/autocam-off.html

Fix commit: https://github.com/stephenlb/webrtc-sdk/commit/4773f0a0a22f2555499eb2afac1ff5e814f9cc04

Published new NPM package: npm i webrtc-sdk

alejo-moreno commented 6 years ago

Thanks for the update @stephenlb, but this doesn't seem to work. The thing is that if the userMedia is not allowed, the stream is null and therefore the ready event is not triggered. The reason the autocam-off.html is a working example is because after 3 seconds the camera is activated, but this is not the use case for a viewer, since he is only there to listen or view the broadcast. This is my code, would I be missing something?

Viewer.js

            const number = ('' + Math.random() * 100000).split('.')[0];
            const viewerPhone = PHONE({
                number: number,
                publish_key: 'pubkey',
                subscribe_key: 'subkey',
                autocam: false
            });

            // Since camera is never started, the ready event is never triggered
            viewerPhone.ready(() => {
                console.log('phone ready');
                let session = viewerPhone.dial("BROADCASTERX");
            });

            viewerPhone.receive(function (broadcaster) {
                broadcaster.connected(function (broadcaster) {
                    console.log('connected');
                    document.body.appendChild(broadcaster.video);
                });
                broadcaster.ended(function (broadcaster) { /* broadcast ended */ });
            });

Broadcaster.js


    const broadcasterPhone = PHONE({
        number        : 'BROADCASTERX'
    ,   autocam       : false
    ,   publish_key   : 'pubkey'
    ,   subscribe_key : 'subkey' 
    });

    broadcasterPhone.ready(()=>{         
        let session = broadcasterPhone.dial('BROADCASTERX');
    });

    // Start camera in 3 seconds after page is loaded.
    setTimeout( ()=>{ broadcasterPhone.startcamera() }, 3000 );

    broadcasterPhone.receive(function(session){
        session.connected( session => {
            console.log('Session: connected');
        });
        session.ended( session => console.log('Session: ENDED') );
    });`