Introduction to WebRTC

February 12, 2018
admin

WebRTC

WebRTC (Web Real-Time Communication) is open source project, which allows plugin-free, peer-to-peer communication between browsers. It enables real-time communication of audio, video, and data in web and native apps. To put it in simple words, WebRTC is just a collection of Javascript APIs.

How does it work?

WebRTC has several APIs – clicking on the links will show some live demos:

  • MediaStream: Allows the client (e.g., the web browser) to access a stream, such as from a WebCam or microphone.
  • RTCPeerConnection: Enables audio or video data transfer between users.
  • RTCDataChannel: Allows peer-to-peer communication for any generic data.
  • MediaRecorder: Records audio and video.

Where can we use WebRTC?

WebRTC can be used in Firefox, Opera and in Chrome on desktop and Android. It is also available for native apps on iOS and Android.

Highlights of WebRTC

In general, a WebRTC-enabled application needs to:

  • Establish media components (local and remote video) on two connecting browsers
  • Get the local stream of a user and initiate the peer connection for that user
  • Create an offer that contains the session description(SDP) of the user
  • Set the offer as the local description for the user
  • Send the offer to another user using Actionable or any other signaling server.
  • When the offer is received, the offer is set as the remote description for the receiving user.
  • The receiving user then creates an answer to the offer and sets the answer as its local description.
  • The answer is sent to the first user through Actionable or any other signaling server.
  • The first user then receives the answer and sets it as its remote description.
  • At this stage, both the users have local and remote descriptions.
  • In a similar way, the ice candidates are exchanged between the users using Actioncable or any other signaling server.
  • Thus the users get connected. Once the connection is established, the audio or video is streamed between the users.
  • Audio or video is streamed through RTCPeerConnection and to stream data, RTCDataChannel is used.

Details of the APIs

1. MediaStream: MediaStream or getUserMedia takes the access of the data streams, for example, user’s camera and microphone. While working locally the local media stream can be obtained by called getUserMedia(). After a WebRTC peer connection is established successfully, then the media stream of the remote browser also becomes available.

Syntax:

navigator.mediaDevices.getUserMedia(constraints, successCallback, errorCallback);

As it can be seen, getUserMedia() takes three parameters:

  • A constraints object: It specifies the types of media to request, along with any requirements for each type.
  • Success callback: This function is invoked when the request for media access is approved and it is passed a MediaStream.
  • Failure callback: This function gets invoked when the call fails and it is passed an error object.

An example of getUserMedia is given below:

<!DOCTYPE html>
<html>
 <body>
 <video autoplay></video>
<script>
 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 var constraints = { audio: false, video: true };
 var video = document.querySelector("video");
 function successCallback(stream) {
 video.src = window.URL.createObjectURL(stream);
 }
 function errorCallback(error){
 console.log("getUserMedia error: ", error);
 }
 navigator.getUserMedia(constraints, successCallback, errorCallback);
 </script>
 </body>
</html>

2. RTCPeerConnection: This is an interface which represents a WebRTC connection between the local computer and a remote peer and handles the communication of streaming data between them. It connects to the remote peer, monitor and maintain the connection, also closes the connection when no longer required. In order for the connection to be established, it is required to complete a handshake between the connecting peers prior to that. This process is known as signaling where browsers exchange the information necessary to establish the connection, for example, the session description (SDP) and ICE candidates (publicly accessible IP and port information). WebRTC does not provide any mechanism to complete this mechanism. This part can be achieved by using Action Cable, Node.js etc.

3. RTCDataChannel: It represents a channel which is used for bi-directional peer-to-peer transfers of arbitrary data over a WebRTC connection. Each RTCDataChannel is associated with an RTCPeerConnection.
An example of RTCDataChannel is as follows:

var peerConnection = new RTCPeerConnection();
var dataChannel = pc.createDataChannel("my channel");

dataChannel.onmessage = function (event) {
console.log("received: " + event.data);
};

dataChannel.onopen = function () {
console.log("datachannel opened");
};

dataChannel.onclose = function () {
console.log("datachannel closed");
};

Closing Thoughts

WebRTC is a continuously evolving technology and it has wonderfully made it possible to share data and telecommunication peer-to-peer, without any additional plugins or any third-party software.

Reference:

  1. https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API

Contributor: Tasnim MehzabinNascenia

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.