The content of this article will be discussed under the 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 the 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 an amazing technology that allows developers to build real-time web applications.

Let's see how this technology differs 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 these 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

APIs are listed bellow

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 prompted to give permission so that the application can use these media devices for inputs. The 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 a 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 the 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 the transcript.

Further details on this topic will be discussed 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 discussed 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 support this today.