simpleWebRTC with php backend

2k views Asked by At

I am using simpleWebRTC with xhr to implement peculiar multi-users video chat (no audio) my main issue in short: i was unable to attach the username from php to the correct video in JS

in my quetion i will 1. explain what i have done - and what are my current issues 2. if my current route is impossible - then i ask for suggestions for a different course of action on my part :-) - my knowledge is in JS and PHP|

the multi-users video allows to chose a few users and see them in a one way connection. lets say we have users A, B, C, D user A chooses to see users B, C, D while user B for example only chooses to see users C and D .... and so on

in simpleWebRTC i thought of two courses of action a. one room for all of the participants and then to filter them down (was unsuccessful as i was unable to attach the correct username to each video - to filter them out) 2. instead i created a room (with username - email, as id) and let each user connect to the appropriate room.

in the first part of the code i have an XHR that pulls a list of the people the user wishes to subscribe to there videos (i.e: chooses to see)

var remoteRoom = [];


    $.get('scripts/video/ours/musesSimpleList.php', function(msg){

            myRoom = msg.username;

            var remoteRoomArray = $.each( msg.museUsername, function(key, value){
                remoteRoom.push = value;


                return remoteRoom;
            });

            afterRoomDefined(myRoom, remoteRoomArray);
    }, 'json');

function afterRoomDefined(myRoom, remoteRoomArray) is called after the list of people this specific user chose to register to was retrieved from MySQl

in this function, i now try to implement the WebRTC:

function afterRoomDefined(myRoom, remoteRoom){


console.log('remote room name: '+ remoteRoom + ' type: '+ $.type(remoteRoom));


remoteRoom = JSON.stringify(remoteRoom);
console.log('isArray '+$.isArray(remoteRoom));

//Create our WebRTC connection
var webrtc = new SimpleWebRTC({
    url:'https://signaling.simplewebrtc.com:443',
    //the element that will hold the local video
    localVideoEl: 'localVideo',
    //the element that will hold remote videos
    //remoteVideosEl: 'remotes',
    remoteVideosEl: '',
    autoRequestMedia: true,
    media: {
            video: true,
            audio: false
        },

});


webrtc.mute();

// a peer video has been added

var i = 0;

//When it's ready and we have a room from the URL, join the call
webrtc.on('readyToCall', function(peer){

//each user first creates a room for himself - so other users could connect to
if(myRoom) webrtc.joinRoom(myRoom);

    //here a room is created for every person the user subscribed to. each person created a room with his own username (when he opened this page in his browser) - in the line above. so now i open rooms with the same names - so the users will see each other (two ways now)
    for(var b=0; b<remoteRoom.museUsername.length; b++){
        console.log('remoteRoom loop - separate values: '+ remoteRoom.museUsername[b]);
        if(remoteRoom.museUsername[b]) webrtc.joinRoom(remoteRoom.museUsername[b]);
    }
});


// a peer video has been added
webrtc.on('videoAdded', function (video, peer) {

var remotes = document.getElementById('remotes');
if (remotes) {
    var container = document.createElement('div');
    container.className = 'videoContainer'+i;

    $(container).attr('data-username', remoteRoom.museUsername[i]);
    i++;


    container.id = 'container_' + webrtc.getDomId(peer);
    container.appendChild(video);

    // suppress contextmenu
    video.oncontextmenu = function () { return false; };

    remotes.appendChild(container);

    //this is to remove the other party video - if a user only subscribed to another user - the other user is not
    //$('#remotes div:not[data-username]').css('border', 'red 5px solid');
   $('#remotes div:not[data-username]').remove();
}
i=i+1;
});

webrtc.on('videoRemoved', function (video, peer) {

var remotes = document.getElementById('remotes');
var el = document.getElementById(peer ? 'container_' + webrtc.getDomId(peer) : 'localScreenContainer');

$('#remotes div').css('border', '#F4171A 2px solid');
if (remotes && el) {
    remotes.removeChild(el);
}
});

That's it. and that basically works. There are three issues though: a. when one of the users refreshes his page (usually navigate back an forth) his own video is added again (two videos of the same user now - one of them is frozen) to all the other users who watches him. perhaps its an issue with

webrtc.on('videoRemoved'...

b. when user A for example registers to user B... - if user C than subscribes to user A - he will see also user B the main issue perhaps is: c. i was never really able to attach the username to the right video under:

 webrtc.on('videoAdded',....
 $(container).attr('data-username', remoteRoom.museUsername[i]);...

in the main block code. I used

 $('#remotes div:not[data-username]').remove();

to find all videos without username and kick (videos who were duplicated and froze+the other side of the video if user A subscribed to user B and not vice versa so user B will not see user A and so that C will not see in the above explanation) them out - but the username it self is not attached to the correct child in the right order (the moment someone refreshes the page the order scrambles....

  1. am i going the right direction? i had a look at pubNub, xirsys, firebase and some other solutions (google appengine - java knowledge required, html5Rocks, easyRTC, signalMaster (no proper explanation on how to use)- but it seems that they all require node.js )

is my current mode of action (php and XHR) is a valid one? if not - will one of the other solution will be relatively simple and plausible. I started looking through too many api's and am confused by now

thank you :-)

1

There are 1 answers

2
girlie_mac On

It's hard to see exactly what goes wrong, because you seems to face multiple issue here, including webRTC in general and DOM insertion/removal problems.

If you are seeking for webRTC solution using PubNub, you should take a look at:

https://github.com/stephenlb/webrtc-sdk

and the demo that you can try: http://stephenlb.github.io/webrtc-sdk/

also, check out

http://www.pubnub.com/blog/building-a-webrtc-video-and-voice-chat-application/