Lý thuyết và thực hành Webrtc Nguyen Ba Phuoc

Lý thuyết và thực hành Webrtc
-=[Crane – Nguyễn Bá Phước]=-


Giới thiệu

WebRTC (Web Real-Time Communications) là một tập hợp các hàm lập trình dùng cho việc liên lạc thời gian thực bằng video, âm
thanh cũng như các loại dữ liệu khác. WebRTC có thể giúp chúng ta gọi điện video ngay trong trình duyệt mà không cần đăng kí tài
khoản, cũng không cần cài thêm plugin gì phức tạp, ngoài ra chúng còn được xài để phát triển game chơi trực tiếp trong trình duyệt
và rất nhiều loại ứng dụng khác.


WebRTC APIs:



WebRTC gồm 3 API là:



MediaStream (aka getUserMedia)



RTCPeerConnection



RTCDataChannel

MediaStream (aka getUserMedia)



Đồng bộ stream media (video, audio).



Gồm 3 tham số là:





Constraints: cấu hình stream (width, height, framerate …)



Success callback: hàm trả về nếu stream thành công.



Failure callback: hàm trả về nếu stream thất bại.

Cần user permission để khởi động (audio [mic], video [webcam]).


MediaStream (aka getUserMedia) …



Mỗi MediaStream có một nhãn kiểu như: “vcRV163GDxf2EmX52YzN4WmdWFVOTtaQiDPb”. Được lấy từ
stream.getAudioTracks() hay stream.getVideoTracks().


Signaling: session control, network and media information



Không thuộc WebRTC.



Dùng để kết nối các máy với nhau bằng các giao thức mạng như SIP, XMPP, Socket,…



Có 3 thông tin trao đổi chính là:



Session control messages: khởi tạo / đóng kết nối, và báo lỗi.



Network configuration: hiển thị địa chỉ IP và Port.



Media capabilities: thông tin về codec, độ phân giải

Signaling: session control, network and media information
…


RTCPeerConnection



Sử dụng để giao tiếp (video/audio) giữa các peers.



Làm nhiều thứ



Xử lý tín hiệu



Xử lý codec



Xử lý giao tiếp peer to peer



Bảo mật



Quản lý băng thông


RTCPeerConnection (biểu đồ minh họa)


RTCPeerConnection (ví dụ)


RTCPeerConnection + Server



WebRTC cần một server có các chức năng sau:



Tìm kiếm và giao tiếp với các user



Signaling



Thông qua NAT và Firewall



Server chuyển tiếp trong trường hợp peer to peer giao tiếp với nhau bị lỗi


RTCPeerConnection …



NAT



NAT sử dụng IP của chính nó làm IP công cộng cho mỗi máy con (client) với IP riêng. Khi một máy con thực hiện kết nối
hoặc gửi dữ liệu tới một máy tính nào đó trên internet, dữ liệu sẽ được gởi tới NAT, sau đó NAT sẽ thay thế địa chỉ IP gốc
của máy con đó rồi gửi gói dữ liệu đi với địa chỉ IP của NAT. Máy tính từ xa hoặc máy tính nào đó trên internet khi nhận
được tín hiệu sẽ gởi gói tin trở về cho NAT computer bởi vì chúng nghĩ rằng NAT computer là máy đã gởi những gói dữ
liệu đi. NAT ghi lại bảng thông tin của những máy tính đã gởi những gói tin đi ra ngoài trên mỗi cổng dịch vụ và gởi
những gói tin nhận được về đúng máy tính đó (client).


RTCPeerConnection … (Sơ đồ NAT)


RTCPeerConnection …



STUN



STUN cho phép máy khách NAT (các máy nằm sau NAT/Firewall) giao tiếp, trao đổi thông tin với nhau một cách trực
tiếp.


RTCPeerConnection …



TURN



Giống STUN tuy nhiên có hỗ trợ TCP và Symmetric NAT. Dữ liệu thay vì gởi trực tiếp tới các peer thì sẽ gởi đến các TURN
server, và TURN server sẽ là trung gian vận chuyển gói tin.



Giúp đảm bảo an toàn thông tin truyền dẫn.



Có bất lợi là chi phí sử dụng băng thông lớn vì thông tin được truyền qua server.


RTCPeerConnection …



ICE



Là giao thức được dùng để thiết lập phiên thông tin đi qua NAT một cách nhanh nhất.



ICE sẽ tìm đường tốt nhất để kết nối giữa các peer.



ICE sẽ sử dụng STUN để kết nối trực tiếp các peer. Nếu thất bại nó sẽ sử dụng TURN.


RCTDataChannel



Cho phép trình duyệt chia sẽ dữ liệu peer to peer.



Lợi ích:





Gaming



Remote desktop app



Real-time text chat



File transfer



Phân cấp mạng

API có một số tính năng để tận dụng tối đa RTCPeerConnection và cho phép chia sẽ thông tin giữa các peer một
cách mạnh mẽ và linh hoạt.


BUILD SAMPLE



Các bước thực hiện



Lấy video từ webcam



Stream video với RTCPeerConnection



Stream data với RTCDataChannel



Kết hợp RTCPeerConnection và Signaling



Chụp ảnh màn hình và chia sẽ qua kênh dữ liệu


Lấy video từ webcam



Đầu tiên cần phải chạy server ảo (thay cho server signaling) dùng extension chrome này để chạy https://
chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en



Các bước



Lấy video stream từ webcam



Phát stream


Lấy video từ webcam …



Tạo một file index.html gồm tag video và script để chạy (như hình).


Lấy video từ webcam …



File script có nội dung sau:


Lấy video từ webcam …



Nó hoạt động như thế nào?



getUserMedia() được gọi như thế này



Biến constraints cho phép xác định lấy loại media gì





Trong trường hợp này thì chỉ video mà không audio

Trong trường hợp stream OK sẽ trả về hàm successCallback mà trong đó param stream của hàm successCallback là
source của video.


Lấy video từ webcam …


Stream video với RTCPeerConnection



Tạo file html với video tags và các nút chức năng



Thêm adapter.js ( vào script tag



Adapter.js có tác dụng rút gọn tên thôi. Kiểu như bỏ prefix như webkit (chrome) hay moz (Firefox). Cái này chỉ có
tác dụng test thôi.


Stream video với RTCPeerConnection …



Tạo RTCPeerConnection



Tạo stream từ webcam và thêm nó vào peer