HTML5 - SPLessons

HTML5 Web RTC

Chapter 27

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Web RTC

HTML5 Web RTC

shape Introduction

HTML5 Web RTC is introduced by World Web Consortium (W3C) and is used to make a video calling, video chat, P2P file sharing between the browsers. Following are the concepts covered.

  • About Web RTC
  • Implementation of Web RTC
  • Browser Support

About Web RTC

shape Description

Web RTC is known as the Web Real-Time Communication which provides browsers and mobile applications with a real time communications by using simple APIs. Web RTC project was maintained by Google Chrome team and is a simple application to start the video chat.  Following are the APIs of Web RTC.

Implementation of Web RTC

shape Description

In order to implement and make use of web RTC, use the APIs of the Web RTC those are described below.

Media Stream

Media Stream is used to represent the different types of media. For example, select one of video player. Then browser will send one popup alert message about sharing camera and microphone.If user clicks on OK then only browser will accept the user peripherals.

The media stream contains stream.getAudioTracks() and stream.VideoTracks(). Initially browser will check for the audio tracks.If present, then only it will display, otherwise returns empty array.Next browser goes to video stream. If web webcam gets connected then it will respond as array of one MediaStreamTrack which represents the web cam.The code below demonstrates the media stream.

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

Capturing the screen also possible by using the media stream source in a chrome browser.

Network and Media Information

In order to make the communication between the browsers, peer to peer communication have to be established for which network information, signaling, session control, and media information are required. There are several mechanisms to generate the communication between the browsers such as SIP or XMPP or any two way communication. the code below demonstrates the createSignalingChannel() as shown.

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

Browser Support

shape Description

HTML5 Web RTC is supported by all the latest browsers.Following are the browser versions supported by HTML5.

Summary

shape Points

  • Web RTC project is supported by Google.
  • In Web RTC screen capture also possible.
  • All browsers do not support By Web RTC.