Friday, August 29, 2014

WebRTC a high level look


- WebRTC brings real time communication to the Web
- It builds a state of the art media stack into chrome
- Develops a new communication platform .

This is supported in 
Chrome, Chrome for Android, Firefox, Opera, Native Java and Objective C bindings 

There are three main category of APIs that exists in WebRTC
- Acquiring audio and video 
- Communicating Audio and Video 
- Communicating Arbitrary Data 

Because of these three above, there are three primary objects 
- MediaStream (aka getUserMedia) 
- RTCPeerConnection
- RTCDataChannel 

MediaStream
Representa a single stream of synchronised audio and video. Each media stream contains tracks. and can contain multiple tracks.
To get access to this media, navigator.getMediaData function is used. 

getUserMediaData takes three arguments like the below. 

var constraints = {video:true};

function successCallback(stream)
{
var video = document.querySelector("video");
            video.src = window.URL.createObjectURL(stream);
}

function errorCallback(error)
{
console.log("navigator.getUserMediaError :",error);
}

the video Constraint can actually specify more properties such as width, height like in example below 

var qvgaConstraints = {
video : 
{
mandatory : {
maxWidth : 320,
maxHeight : 180
}
}
}

The stream once captured can be processed and then can be give as a stream. There are few examples that appears in the apprtc Google IO demo page. For e.g. the stream can be processed and made as in ASCII form and given as the input. Now, the stream can also be a screenshare. Inorder to do that the constraint has to be something like below 

var constraints = {
video: {
mandatory : 
{
chromeMediaSource : 'screen'
}
}

navigator.getUserMedia (constraints, gotStream);

RTCPeerConnection
This is all about making a connection to a peer. What happens is, the media data that is obtained is plugged into the RTCPeerconnection and sends to the peer. Then on the other end, this pops up as the peer connection and then ti can be plugged to the video to display on the screen and then decoded and displayed. 

Behind the scenes, the RTCPeerConection does a lot 

- Signal Processing - Process the captured data to remove the noises, echo etc. 
- Code handling - Deals with the actual compression and decompression of actual audio and video 
- Peer to Peer communication - Finding the actual peer to peer connection, through firewalls, through NAT, through relays,
- Security - Encryption of the data so that the user data is fully secure
- Bandwidth management - If user is having 2mbps connection, the whole is used, if only 200kbps, thats all it uses 

The RTCPeerConnection sample could be something like below 

pc = new RTCPeerConnection(null)
pc.onaddstream = gotRemoteStream 
pc.addStream(localStream);
pc.createOffer(gotOffer);

function gotOffer(desc)
{
pc.setLocalMediaDescription(desc);
sendOffer(desc);
}

function gotAnsewer(desc)
{
pc.setRemoteDescription(desc);
}

function gotRemoteStream(e)
{
attachMediaStream(remoteVideo, e.strean);
}

References: 

No comments:

Post a Comment