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 Socket.io
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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"express"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> port <span class="token operator">=</span> <span class="token number">4000</span><span class="token punctuation">;</span> <span class="token keyword">const</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"http"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> server <span class="token operator">=</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> io <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"socket.io"</span><span class="token punctuation">)</span><span class="token punctuation">(</span>server<span class="token punctuation">)</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span>__dirname <span class="token operator">+</span> <span class="token string">"/public"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> io<span class="token punctuation">.</span>sockets<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span>port<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Server is running on port </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>port<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">let</span> broadcaster io<span class="token punctuation">.</span>sockets<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"connection"</span><span class="token punctuation">,</span> <span class="token parameter">socket</span> <span class="token operator">=></span> <span class="token punctuation">{</span> socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"broadcaster"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> broadcaster <span class="token operator">=</span> socket<span class="token punctuation">.</span>id<span class="token punctuation">;</span> socket<span class="token punctuation">.</span>broadcast<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">"broadcaster"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"watcher"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> socket<span class="token punctuation">.</span><span class="token function">to</span><span class="token punctuation">(</span>broadcaster<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">"watcher"</span><span class="token punctuation">,</span> socket<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"disconnect"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> socket<span class="token punctuation">.</span><span class="token function">to</span><span class="token punctuation">(</span>broadcaster<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">"disconnectPeer"</span><span class="token punctuation">,</span> socket<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
We’ll then deploy socket.io 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")
1 2 3 4 5 6 7 8 9 10 | socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"offer"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> message</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> socket<span class="token punctuation">.</span><span class="token function">to</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">"offer"</span><span class="token punctuation">,</span> socket<span class="token punctuation">.</span>id<span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"answer"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> message</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> socket<span class="token punctuation">.</span><span class="token function">to</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">"answer"</span><span class="token punctuation">,</span> socket<span class="token punctuation">.</span>id<span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> socket<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"candidate"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> message</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> socket<span class="token punctuation">.</span><span class="token function">to</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">"candidate"</span><span class="token punctuation">,</span> socket<span class="token punctuation">.</span>id<span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
That’s all for implementing Socket.io on the server now we can continue with the deployment of connections under the client. . I hope you will continue in part 2 "Goodbye"