Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Web RTC : Strongest Api of HTML5 Part -ii

    • 0
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.31k
    Comment on it

    holla amigos In my last blog i shared the power of web rtc and the first api getUserMedia of the web Rtc . This article will be focus on the Peer to Peer connection of the Web Rtc. Let me explain you first what is Peer-to-Peer connection exactly is ? The P2P connection is communication between two browser (AKA peer) through stream. The stream can be video or audio.But for sending and receiving data it need a mechanism which we calls signaling in general.Peer to Peer connection does not provide the signaling or any signaling rule so here as a developer you have free hand to use any signaling method like SIP, XAMPP or any other.In my case i used from the npm library on the node server. webRTC uses signaling for three purpose.
    1. To get over the control on initialization or termination of communication.This signaling will send message to other node the request for the communication and a message about termination.
    2. Network Config : Network configuration means my IP address. IP address is kind of unique thing which we all dev understand.
    3. Media config : As we all know different browser have different support for codec.The resolution of machine also vary.So it is very important to be aware of the Browser capability of other end.

    var signalingChannel = createSignalingChannel();
     var pc; 
    var configuration = ...;
    // run start(true) to initiate a call function start(isCaller) {
        pc = new RTCPeerConnection(configuration);
    // send any ice candidates to the other peer
    pc.onicecandidate = function (evt) {
        signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
    // once remote stream arrives, show it in the remote video element
    pc.onaddstream = function (evt) {
        remoteView.src = URL.createObjectURL(;
    // get the local stream, show it in the local video element and send it
    navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
        selfView.src = URL.createObjectURL(stream);
        if (isCaller)
            pc.createAnswer(pc.remoteDescription, gotDescription);
        function gotDescription(desc) {
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
    }); }
    signalingChannel.onmessage = function
      (evt) {
          if (!pc)
    var signal = JSON.parse(;
    if (signal.sdp)
        pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
        pc.addIceCandidate(new RTCIceCandidate(signal.candidate)); };

    The above code is from w3c werking draft.So what is exactly happening here.

    When A want to communicate with B.A create an onicecandidate and send it to the B through signaling protocall. When B receive the signal it calls addIceCandidate and add remote server description.Now the peer connection has been created. The browser capability of the media handling also needed to be share among the peer.So A createOffer() and add the call setLocalDescription .One thing is important here the P2P connection does not start collecting data before setLocalDescription(). The reason behind this is the number of rules are there on each SDP line.Finally the setRemoteDescription() add the description of the remote node on the SDP.

    This is it for this blog. Adios for now

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: