Peerjs multiple viewers

Question

I am trying to setup a conference module up in my application. So i found and created a stream between two users.

The problem is that others are not able to join in.

Ive been trying to read up on their documentation however i cannot seem to find out how to implement it.

Here is my code:

    // Compatibility shim
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.getUserMedia({audio: true, video: true}, function (stream) {
    // Set your video displays
    $('#my-video').prop('src', URL.createObjectURL(stream));
    window.localStream = stream;
}, function () {
    $('#step1-error').show();
});

peerFactory.on('error', function (err) {
    alert(err.message);
});

peerFactory.on('connection', function (id) {
    alert('new logon' + id);
});



// Receiving a call
peerFactory.on('call', function (call) {
    // Answer the call automatically (instead of prompting user) for demo purposes
    var r = confirm('Ny kald fra ');
    if (r) {
        call.answer(window.localStream);
        $scope.currentCall = true;
        $scope.$apply();
        streamCall(call);
    }
    else
    {
        call.close();
        window.existingCall.close();
    }
});

$scope.makeCall = function (callId) {
    var call = peerFactory.call(callId, window.localStream);
    $scope.currentCall = true;
    streamCall(call);
};

$scope.hangUp = function()
{
    $scope.currentCall = false;
    window.existingCall.close();
};

function streamCall(call) {
    // Hang up on an existing call if present
    if (window.existingCall) {
        window.existingCall.close();
    }

    // Wait for stream on the call, then set peerFactory video display
    call.on('stream', function (stream) {
        $('#their-video').prop('src', URL.createObjectURL(stream));
    });
    // UI stuff
    window.existingCall = call;
    $('#their-id').text(call.peerFactory);
    call.on('error', function () {
        var i = 0;
    });
}

Can anyone give me a push in the right direction?

Answer 1

According with your description and your code, I would say you are trying to connect more than two users in the same call.

This is not possible with WebRTC, it only allows you to connect two ends for each peer connection. They way you can replicate the multiconference behaviour is creating a different call per each pair of participants.

In order to do this, you will need different video elements per each participant and a user list so you know each participant's id you need to call in the room you are joining.

PeerJS won't give you a mechanism to know the other ID's in the room/call so you will need to find out a mechanism to let the new participant know.

I have an example in my github of an AngularJS/Socket.io WebRTC communication tool, feel free to inspect it and see how multiconference calls are reproduced using WebRTC p2p connections.

Edit: Assuming your users have some kind of ID and the way your program behave is like makeCall('Alice'), assuming Alice is in a call with Bob when Carol calls Alice and you want Carol to join the call with both, you can implement this without a new signaling layer:

1. Alice is in a call with Bob
2. Carol calls Alice
3. Alice accepts call
4. Alice sends Bob's id to Carol using DataChannel
5. Carol calls Bob
6. Alice, Bob and Carol are talking to each other in a logical threeway call