Building a WebRTC video broadcast using JavaScript (P1)

Tram Ho

WebRTC (Web Real-Time Communication) is a web API developed by World Wide Web Consortium (W3C), capable of supporting browsers and mobile applications, communicating with each other via VideoCall, VoiceCall or streaming. download “Peer-to-Peer” (P2P) data

In this article we will learn together the basics and features of WebRTC. To visualize how it works, we will build a small application using Node.js

WebRTC basics

WebRTC allows us to communicate with each other directly through the internet. Used to transmit video and audio data. Before coding, let’s learn its important concepts

1 ) Signaling :

WebRTC is used for Stream in the browser but also needs a mechanism to coordinate communication and send control messages, a process known as Signaling. Signaling is used for the following tasks:

  • To initiate and close communication
  • Share Network Configuration (IP Address, Port)
  • Report errors in connection

2 ) STUN and TURN servers:

STUN and TURN server are used as backup method in case WebRTC peer-to-peer connection fails. STUN server is used to get the IP address of the computer, the TURN server acts as a relay in case the connection fails.

Now that we know the basics of WebRTC, let’s move on to the application part

3 ) Peer-to-peer:

Peer connections is the part of the WebRTC specifications that deals with connecting two applications on different computers to communicate using a peer-to-peer protocol

It can be understood simply as a peer connection. It has no connection between the client and the server, it simply connects between two computers

Signaling using

Before we can send video playback over the connection peer-to-peer Using WebRTC, we first need to initiate the connection using the Signaling method (Socket.IO in this case).

After that, we need to deploy client and server connections. The socket id is stored in a variable so we know where the client needs to connect.

We’ll then deploy events to initiate the WebRTC connection. These events will be "watcher" monitoring and "broadcaster" used to create peer-to-peer.

Here we can see that there are 2 channels "watcher" and "broadcaster" . For the clients is considered "watcher" will listen to this event and get the hotspot id ("broadcaster")

That’s all for implementing on the server now we can continue with the deployment of connections under the client. . I hope you will continue in part 2 "Goodbye"

Tài Liệu Tham Khảo

Share the news now