Plugin less video call using webRTC

Introduction to WebRTC

WebRTC enables peer to peer communication using simple Javascript APIs. It supports to build rich, high quality, RTC applications using Javascript and HTML5. There Three APIs yet to develop RTC applications.

1. Media Stream
2. RTC Peer Connection
3. RTC Data Channel

Getting started using getUserMedia

getUserMedia generates  MediaStream which receives Audio and Video from device. navigator.getUserMedia() gives mediastream having audio and video tracks. To get audio tracks from stream use stream.getAudioTracks() and to get stream.getVideoTracks(). 

getUserMedia takes three parameters constraints object, success callback and failure callback. The out received from the getUserMedia can be passed to RTCPeerConnection.

navigator.getUserMedia({ "audio": true, "video": true });

RTC Peer connection to exchanges streams

RTC peer connection API is to establish a persistent connection between peers. Rest of the process similar to video calling using WebRTC peer connection.

var signalChannel = createSignalingChannel();
var peerConn;
var config = ...;

// execute makeCall make a call
function makeCall(isCaller) {
    peerConn = new RTCPeerConnection(config);

    // sending ice candidates to the other peer
    peerConn.onicecandidate = function (evt) {
        signalChannel.send(JSON.stringify({ "candidate": evt.candidate }));
    };

    // set remote stream to the remote video element
    peerConn.onaddstream = function (evt) {
        remoteView.src = URL.createObjectURL(evt.stream);
    };

    // get the local stream and send
    navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
        selfView.src = URL.createObjectURL(stream);
        peerConn.addStream(stream);

        if (isCaller)
            peerConn.createOffer(gotDescription);
        else
            peerConn.createAnswer(peerConn.remoteDescription, gotDescription);

        function gotDescription(desc) {
            peerConn.setLocalDescription(desc);
            signalChannel.send(JSON.stringify({ "sdp": desc }));
        }
    });
}

signalChannel.onmessage = function (evt) {
    if (!peerConn)
        makeCall(false);

    var signalData = JSON.parse(evt.data);
    if (signalData.sdp)
        peerConn.setRemoteDescription(new RTCSessionDescription(signalData.sdp));
    else
        peerConn.addIceCandidate(new RTCIceCandidate(signalData.candidate));
};

How RTC Peer connection  descriptions exchange works?

1. Peer1 runs the RTCPeerConnection createOffer() method. 
2. The callback argument of this is passed an RTCSessionDescription: Peer1's local session description.
3. In the callback, Peer1 sets the local description using setLocalDescription() and then sends this session description to Peer2 via their signaling channel. Note that RTCPeerConnection won't start gathering candidates until setLocalDescription() is called: this is codified in JSEP IETF draft.
4. Peer2 sets the description Peer1 sent him as the remote description using setRemoteDescription().
5. Peer2 runs the RTCPeerConnection createAnswer() method, passing it the remote description he got from Peer1, so a local session can be generated that is compatible with hers. 
6. The createAnswer() callback is passed an RTCSessionDescription: Peer2 sets that as the local description and sends it to Peer1.
7. When Peer1 gets Peer2's session description,  sets that as the remote description with setRemoteDescription.
8. Both peers now having others streams.

Author : Raju Konga

Share this

Related Posts