Saturday, December 14, 2013

WebRTC Introduction with chart flow

WbRtc stands for web real time communication which means you can share the audio and video stream, aribitrary data peer to peer. The WebRTC api is open source project introduced by GOOGLE.

In a web without any plugin, audio and video chat was very complex but WebRtc makes it simpler.
Now you don't need to any kind of plugin or extra technology. WebRtc with javascript makes you comfortable for sharing video, audio and other data.

So here we know, how it works.
You need the following points for use WebRTC in your web application
1) getUserMedia()
2) RTCPeerConnection object
3) Data Sharing

By the getUserMedia() method we can get the audio and video stream in codec format through the microphone and webcam respectively.

By using RTCPeerConnection object and signaling method, there could be share the network information like IP addresses, information about height, width and  resolution of local video(as this information is created by getUserMedia), The signaling method can be any which, like socket.io with node.js, ajax, xmpp etc. It's on you  which one is suitable for you.

Data Channel
After shared the above information there would be started audio and video streaming between peers.

So here we go in Detail,
We are supposing the user Sam is caller at one browser in one place, he gets the codec information about local video and audio.

The Rocky(callee) at other browser in other place, he also gets the codec information about local video and audio.

After that, browsers of Sam and Rocky are create the RTCPeerConnection Object(RTCPC) respectively in each browser.

As we already knew, Sam got the local information(codec information) about audio and video,  now he sets this information as local description to RTCPeerConnection Object(RTCPC), now he sends 'Creates Offer' with this local description to Rocky.

After get the local decription from Sam, Rocky sets that information as remote description to RTCPC object on his side, at the same time he sets his local description about video and audio to RTCPC object on his side and send it to Sam with 'Creating Answer'.

After get the 'creating answer' from Rocky , Sam sets that information/description as remote description to RTCPC object on his side.

The handler of onIceCandidate event is triggered when the candidate is available at network, which means When Rocky would availble at network, handler of onIceCandidate of Sam is triggered and sends the information about candidate  to Rocky, after that addIceCandidate of Rocky's side would be triggered.

After exchange these information, there would start audio and video streaming between peers Sam and Rocky.


Here is the process in chart which is devided into number.

chart webrtc



This article is inspired from below tutorial you can get more information about WebRTC from here.http://www.html5rocks.com/en/tutorials/webrtc/basics/