HTML5 - Web RTC

What is Web RTC

Web RTC introduced by World Wide Web Consortium (W3C). It provides support for browser-to-browser applications for voice calling, video chat, and P2P file sharing.

If you want to try out? web RTC available for Chrome, Opera, and Firefox.  Web RTC implements three API's as shown below −

• MediaStream − get access to the user's camera and microphone.

• RTCPeerConnection − get access to audio or video calling facility.

• RTCDataChannel − get access to peer-to-peer communication.

MediaStream

The MediaStream represents synchronized streams of media. A simple example is chat applications, a chat application gets stream from web camera, rear camera, microphone.

Sample code of MediaStream

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

Screen capture

It's also possible in the Chrome browser with media stream source and it requires HTTPS. This feature is not yet available in opera.

Session Control, Network & Media Information

Web RTC required peer-to-peer communication between browsers. This mechanism required signaling, network information, session control, and media information. Web developers can choose different mechanisms to communicate between browsers such as SIP or XMPP or any two-way communications.

Sample code of createSignalingChannel()

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(evt.stream);
   };
   
   // 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);
      pc.addStream(stream);
      
      if (isCaller)
         pc.createOffer(gotDescription);
      
      else
         pc.createAnswer(pc.remoteDescription, gotDescription);
         
         function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
         }
      });
   }
   
   signalingChannel.onmessage = function (evt) {
      if (!pc)
         start(false);
         var signal = JSON.parse(evt.data);
      
      if (signal.sdp)
         pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
      
      else
         pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};