What is WebRTC?

WebRTC stands for Web Real Time Communication. From webrtc.org:

“With WebRTC, you can add real-time communication capabilities to your application that works on top of an open standard. It supports video, voice, and generic data to be sent between peers, allowing developers to build powerful voice and video communication solutions”

The API is actually not so big and complicated as it sounds. The MDN website is, as always, very complete https://developer.mozilla.org/en-US/docs/Glossary/WebRTC.

We have 3 main parts:

1. getUserMedia(): sends a signal to the browser to ask the user for permission and returns the “stream” of audio/video/data
2. RTCPeerConnection: two participants are called peers, local and remote. Not necessarily physically remote, can be two browsers in the same computer.
3. RTCDataChannel: two peers connect via a channel in a bidirectional way to transfer data. A peer can have up to 65,534 data channels (depends on the browser)

In webrtc.org we can find many useful samples https://webrtc.github.io/samples/

Let’s dissect a basic peer-to-peer connection.

• demo: https://webrtc.github.io/samples/src/content/peerconnection/pc1/
• code: https://github.com/webrtc/samples/tree/gh-pages/src/content/peerconnection/pc1

First, we will need two video elements, one to see the other person and another one to see ourselves:

<video id="localVideo" playsinline autoplay muted></video>

<video id="remoteVideo" playsinline autoplay></video>

#webrtc #html5 #javascript #communication #video-streaming #streaming #realtime #api