WebRTC
WebRTC Basics - Chapter 1
July 16, 2020
2 min

The content of this article will be discussed under following topics

  1. What is WebRTC
  2. Why WebRTC is so important

1.0 What is WebRTC

WebRTC is an open framework that gives the ability to web browsers to communicate in real time. In specific this communication is between other browsers. A general webrtc setup consists of following components;

  1. Network,
  2. Audio, and
  3. Video components

These are the fundamental building blocks of a typical WebRTC application.

In simple, WebRTC is a amazing technology that allows developers to build real time web applications.

Lets see how this technology differ from some popular apps such as skype, and face-time.

WebRTC provides those features without needing any additional plugin or software other than the browser.

1.1 How does this work

Essentially every required component is already implemented on the browser. The developers can access thee features through java-script APIs to implement their own apps.

This technology has been standardized on an API level at the w3c and at the protocol level at IETF. And this technology is also supported by Google, Mozilla, and Opera

1.2 What are these JavaScript APIs

1.2.1 API getUserMedia

localVideoStream = await navigator.mediaDevices.getUserMedia({video: true,audio:true});
localVideoRef.current.srcObject = localVideoStream;

This api gives the ability to the web application to access media devices. Here the user will be promoted to give permission so that the application can use these media devices for inputs. Above code block shows a typical usage of getserMedia in React JS.

1.2.2 API RTCPeerConnection

rtcPeerConnection = new RTCPeerConnection(iceServers);
rtcPeerConnection.onicecandidate = onIceCandidate;
rtcPeerConnection.ontrack = onStream;
rtcPeerConnection.addTrack(localVideoStream.getTracks()[0],localVideoStream);
rtcPeerConnection.addTrack(localVideoStream.getTracks()[1],localVideoStream);

Once we have access to the media devices such as camera and microphone, we create an rtcpeerconnection object. In order to be able to send them to the other end where the peer connection is to be established, a connection is made peer to peer using SRTP protocol. Through this we can send the media straight to the other browser without using any middle storage. This is also encrypted to enhance security in transcript.

Further details on this topic will be discused in future chapters.

1.2.3 API Data Channel

In a particular WebRTC connection it is not only the audio and video we can transmit, but also can share any kind of arbitrary data. The possibilities of this include online video games, chat and any kind of application where it needs real time communication.

datachannel = rtcPeerConnection.createDataChannel(room);

Why WebRTC is so important

This can be discusssed under three points;

  1. This is the only technology that enables real time communication between browsers. At least not having to install any additional software or plugin.
  2. This takes into account some of the most common issues in networking such as NAT and firewall traversal.
  3. Most browsers supports this today.

Tags

webrtc

Related Posts

WebRTC
Debug your WebRTC app with webrtc-internals API trace
June 29, 2021
2 min