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

WebRTC (Web RealTime 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.

Trang 1

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

Trang 2

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

Trang 4

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]).

Trang 5

MediaStream (aka getUserMedia) …

 Mỗi MediaStream có một nhãn kiểu như: “vcRV163GDxf2EmX52YzN4WmdWFVOTtaQiDPb” Được lấy từ

stream.getAudioTracks() hay stream.getVideoTracks()

Trang 6

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

Trang 7

Signaling: session control, network and media information

…

Trang 9

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

Trang 10

RTCPeerConnection (ví dụ)

Trang 11

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

Trang 12

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).

Trang 13

RTCPeerConnection … (Sơ đồ NAT)

Trang 14

 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.

Trang 15

 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.

Trang 16

 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.

Trang 17

 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

Trang 18

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

Trang 19

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

Trang 20

Lấy video từ webcam …

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

Trang 21

 File script có nội dung sau:

Trang 22

 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.

Trang 23

Trang 24

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 (https://github.com/webrtc/adapter) 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

Trang 25

Stream video với RTCPeerConnection …

 Tạo RTCPeerConnection

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

Trang 26

 Khi mà 1 peer nhận thông tin ứng viên từ một peer khác, nó sẽ gọi hàm addIceCandidate() để thêm ứng viên vào

mô tả remote peer

Trang 27

 Pc1 chạy RTCPeerConnection createOffer() Nó sẽ trả lại RTCSessionDescription (local session description của

Trang 28

 Pc2 chạy RTCPeerConnection hàm createAnswer(), để tương thích remote description với local description Nó

được bỏ vào RTCSessionDescription để pc2 gởi local description cho pc1

 Khi mà pc1 lấy được session description từ pc2 pc1 sẽ tạo remote description từ setRemoteDescription()

Trang 29

Trang 30

Stream data với RTCDataChannel

 Đầu tiên tạo file html

 Nó sử dụng RTCPeerConnection và RTCDataChannel để cho phép trao đổi text message

 Các phương thức gần giống với RTCPeerConnection, chỉ có hàm sendData() và createConnection() là có code mới

Trang 31

Stream data với RTCDataChannel …

Trang 32

Kết hợp RTCPeerConnection và Signaling

 Ở phần này thì sử dụng NodeJS để chạy webapp

 NodeJS có 2 nhiệm vụ:

 Chuyển tiếp message

 Quản lý WebRTC video chat room

Trang 33

Kết hợp RTCPeerConnection và Signaling …

 HTML

Trang 34

 JS

Trang 35

 Khởi tạo package.json để chạy NoteJS

 Dùng lệnh npm install ở thư mục chứa để chạy cài đặt thư viện.

Trang 36

 Index.js đặt ở ngoài cùng của thư mục chứa

 Chạy lệnh node index.js để bật web rồi vào trình duyệt với url “localhost:8080” để chạy webrtc, rồi vào tab

khác chạy url tương tự rồi vào console xem kết quả

Trang 38

 Sau khi thử cài đặt signaling service và exchange message Ta bắt đầu kết hợp peer connection và signaling

 Thêm tags video mục vào file html

Trang 39

Chụp ảnh màn hình và chia sẽ qua data channel

 Đầu tiên là tạo một data channel

 Tiếp theo là webcam video với getUserMedia()

Trang 40

Chụp ảnh màn hình và chia sẽ qua data channel …

 Tạo một event khi mà nhấn nút Snap, thì sẽ chụp lại hình ảnh hiện tại của webcam video, rồi hiển thị nó ở

canvas

Trang 41

 Tạo event khi click nút Send, để chuyển bức ảnh thông qua data channel

Trang 42

 Thêm event khi mà nhận được message thì xử lý hình ảnh, rồi hiện ra ở canvas.

Trang 44

 Cần chạy nodejs trên window để bỏ qua lỗi Allow Origin.

Định dạng
Số trang	44
Dung lượng	1,94 MB
File đính kèm	WebRTC.zip (834 KB)