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.

Web RTC audio only Call

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 });

For audio call you just need to put false to video constraint.

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

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": false }, 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 Peerconnection  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.

HTML5: Recording Audio,Video Streams

MediaStreamRecorder API is webRTC API that supports recording streams with getUserMedia or remote streams passed over peerconnection session.

 
    <script language="javascript" type="text/javascript">
    function onVideoFail(e) {
        console.log('webcam fail!', e);
      };
 
    function hasGetUserMedia() {
      // Note: Opera is unprefixed.
      return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }
 
    if (hasGetUserMedia()) {
      // Good to go!
    } else {
      alert('getUserMedia() is not supported in your browser');
    }
 
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia  = navigator.getUserMedia ||
                             navigator.webkitGetUserMedia ||
                              navigator.mozGetUserMedia ||
                               navigator.msGetUserMedia;
 
    var video = document.querySelector('video');
    var streamRecorder;
    var webcamstream;
 
    if (navigator.getUserMedia) {
      navigator.getUserMedia({audio: true, video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        webcamstream = stream;
    //  streamrecorder = webcamstream.record();
      }, onVideoFail);
    } else {
        alert ('failed');
    }
 
    function startRecording() {
        streamRecorder = webcamstream.record();
        setTimeout(stopRecording, 10000);
    }
    function stopRecording() {
        streamRecorder.getRecordedData(postVideoToServer);
    }
    function postVideoToServer(videoblob) {
 
        var data = {};
        data.video = videoblob;
        data.metadata = 'test metadata';
        data.action = "upload_video";
        jQuery.post("uploadvideo.php", data, onUploadSuccess);
    }
    function onUploadSuccess() {
        alert ('video uploaded');
    }
 
    </script>
 

    <video autoplay></video>
    <div id="webcamcontrols">
        <button class="recordbutton" onclick="startRecording();">RECORD</button>
    </div>

"getRecorderdedData" return  blob that was recorded.

HTML5 Video Streaming: Media Source API

Streaming Video using HTML5 is now very simple, Media Source API gives streaming video as chunks. playing video with chunks of data is now possible.

This API allows to generate media streams, using  javascript streaming is enabled by extending HMTLElement.

<video id="video" src="" height="300" width="300">

      Video element is not supported in your browser

</video>

window.MediaSource = window.MediaSource || window.WebKitMediaSource;

var mediasource = new MediaSource();

var video = document.getElementById('video');
video.src = window.URL.createObjectURL(ms);

mediasource.addEventListener('webkitsourceopen', function(e) {
  ...
  var sourceBuffer = mediasource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
  sourceBuffer.append(oneVideoWebMChunk);
  ...

//start playing after video header recieved(i.e; first chunk)

//call media.endOfStream(); before appending last chunk

}, false);

playing large volume media files is a bit hard, just make them as chunks and stream with video element. Remember that Video file header contains vital information to play video, this should be necessary to seek and play stream video. if you want to play video from a segment you should first load video fie header then load the segment data to stream your data.

you start playing the stream after receiving header only.

Media Source API now works only chrome( set --enable-media-source flag ).
Media Source Extensions specification changed, changes expected to be made in next release.