Building a WebRTC video broadcast using JavaScript (P1)
- Tram Ho
WebRTC (Web Real-Time Communication) là một web API được phát triển bởi World Wide Web Consortium (W3C), khả năng hỗ trợ trình duyệt (browser) và các ứng dụng mobile, giao tiếp với nhau thông qua VideoCall, VoiceCall hay truuyền tải dữ liệu “Peer-to-Peer” (P2P)
Trong bài viết này chúng ta sẻ cùng nhau tìm hiểu những khái niêm cơ bản và cá tính năng của WebRTC . Để mường tượng ra được cách hoạt động của nó , chúng ta sẻ xay dựng một ứng dụng nho nhỏ sử dụng Node.js
WebRTC basics
WebRTC cho phép chúng ta có thể giao tiếp với nhau trực tiếp với nhau thông qua internet . Được sử dụng để truyền tải video và audio dử liệu . Trước khi code chúng ta hãy cùng nhau tìm hiểu những khái niệm quan trọng của nó
1 ) Signaling :
WebRTC được sử dụng cho các luồng giao tiếp (Stream) trong trình duyệt nhưng cũng cần một cơ chế để điều phối giao tiếp và gửi các thông điệp điều khiển, một quá trình được gọi là Signaling. Signaling được sử dụng cho các nhiệm vụ sau:
- Để khởi tạo và đóng giao tiếp
- Chia sẻ cấu hình mạng (Địa chỉ IP, Cổng)
- Báo cáo lỗi trong kết nối
2 ) STUN và TURN servers:
STUN và TURN server được sử dụng như một phương pháp dự phòng trong trường hợp kết nối “ peer-to-peer” WebRTC gặp sự cố. STUN server được sử dụng để lấy địa chỉ IP của máy tính ,TURN server hoạt động như một bộ chuyển tiếp trong trường hợp kết nối không thành công.
Bây giờ chúng ta đã biết các khái niệm cơ bản về WebRTC, hãy tiếp tục về phần ứng dụng
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
Có thể hiểu đơn giản là một kết nối đồng hạng . Sẻ không có kết nối dửa client và server , chỉ đơn giản kết nối giửa 2 máy tính với nhau
Signaling bằng Socket.io
Trước khi chúng ta có thể gửi phát video qua kết nối peer-to-peer bằng cách sử dụng WebRTC, trước tiên chúng tôi cần khởi tạo kết nối bằng phương pháp Signaling (trong trường hợp này là Socket.IO).
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> |
Sau đó, chúng ta cần triển khai kết nối client và server . Id socket được lưu vào một biến để chúng ta biết được nơi mà client cần kết nối.
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> |
Sau đó, chúng ta sẽ triển khai các sự kiện socket.io để khởi tạo kết nối WebRTC. Những sự kiện này sẽ được "watcher"theo dõi và "broadcaster" dùng để tạo peer-to-peer.
Ở đây chúng ta có thể thấy có 2 channel là "watcher" và "broadcaster" . Đối với các với các client được coi là "watcher" sẻ lắng nghe sự kiên này và nhận được id của điểm phát ("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> |
Đó là tất cả cho việc triển khai Socket.io trên server bây giờ chúng tôi có thể tiếp tục với việc triên khai các kết nối dưới client . Hẹn các bạn tiếp tục ở phần 2 "Thân ái chào tạm biệt"