ĐỒ ÁN CƠ SỞ 4 ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG WEB CONFERENCING BẰNG WEBRTC. Giảng viên hướng dẫn : TS. Nguyễn Sĩ Thìn

- Vấn đề cần giải quyết: Tìm hiểu cơ chế, nguyên lý hoạt động của côngnghệ WebRTC cũng như cách sử dụng, phát triển thành ứng dụng WebConferencing có khả năng tạo kết nối thời gian thực

ĐẠI HỌC ĐÀ NẴNG ĐẠI HỌC CÔNG NGHỆ THÔNG VÀ TRUYỀN THÔNG

VIỆT - HÀN

ĐỒ ÁN CƠ SỞ 4

WEB CONFERENCING BẰNG WEBRTC

Sinh viên thực hiện : NGUYỄN NGỌC ĐỊNH

Giảng viên hướng dẫn : TS Nguyễn Sĩ Thìn

Đà nẵng, tháng 12 năm 2020

ĐẠI HỌC ĐÀ NẴNG ĐẠI HỌC CÔNG NGHỆ THÔNG VÀ TRUYỀN THÔNG

MỞ ĐẦU

Giao tiếp luôn là một nhu cầu thiết yếu trong cuộc sống Tuy nhiên, việcgặp gỡ giao tiếp đôi lúc gặp gõ khăn như khoảng cách, thời gian và đặc biệt làtrong tình hình dịch bệnh hiện nay nên một giải pháp giúp khắc phục những hạnchế này là rất cần thiết

Với sự phát triển đặc biệt nhanh của công nghệ, các thiết bị có khả năngkết nối internet có mặt ở mọi nơi và có khả năng kết nối mọi lúc Từ đó em có ýtưởng phát triển một ứng dụng hội thoại trực tuyến theo thời gian thực sử dụngcông nghệ WebRTC

Em xin gửi lòng biết ơn sâu sắc đến gia đình đã luôn động viên, ủng hộ, cácanh chị và bạn bè đã gắn bó, chia sẻ rất nhiều kinh nghiệm và kiến thức và nhất làtrong thời gian thực hiện đề tài.

Mặc dù em đã cố gắng hoàn thành báo cáo trong phạm vi và khả năng chophép, nhưng chắc chắn sẽ không tránh khỏi những sai sót, kính mong sự cảm thông vàtận tình chỉ bảo của quý Thầy Cô và các bạn

Em xin chân thành cảm ơn

Đà Nẵng, ngày 25 tháng 12 năm 2020

Sinh viên thực hiện

Nguyễn Ngọc Định

NHẬN XÉT (Của giảng viên hướng dẫn)

………

………

………

………

………

………

………

………

………

………

MỤC LỤC

Trang

MỞ ĐẦU 3

LỜI CẢM ƠN 4

Chương 1 GIỚI THIỆU TỔNG QUAN 9

1.1 Tổng quan 9

1.2 Phương pháp, kết quả 9

1.3 Cấu trúc đồ án 9

Chương 2 CƠ SỞ LÝ THUYẾT 10

2.1 Kết nối Peer to Peer 10

2.2 Network Address Translation 10

2.3 Session Traversal Utilities for NAT 10

2.4 Traversal Using Relays around NAT 11

2.5 Session Description Protocol 11

2.6 Interactive Connectivity Establishment 11

2.7 Signalling 12

2.8 Socket.io 12

Chương 3 Công nghệ WebRTC 13

3.1 Giới thiệu 13

3.1.1 Giới thiệu chung 13

3.1.2 Quá trình phát triển 13

3.1.3 Lợi ích của WebRTC 13

3.1.4 Trở ngại của WebRTC 14

3.2 Cấu trúc của WebRTC 14

3.2.1 Kiến trúc của WebRTC 14

3.2.2 Các thành phần chính 15

3.3 Phương thức hoạt động 15

Chương 4 TRIỂN KHAI XÂY DỰNG 17

KẾT LUẬN 18

1.Kết quả đạt được 18

2 Hướng phát triển 18

DANH MỤC HÌNH

Trang

Hình 1 Kết nối peer to peer 10

Hình 2 Mô hình hoạt động STUN server 11

Hình 3 Mô hình hoạt động của TURN server 11

Hình 4 Kiến trúc của WebRTC 14

Hình 5 Mô hình quá trình gọi video sử dụng WebRTC 16

Hình 6 Mô hình hệ thống của ứng dụng Web Conferencing 18

Hình 7 Cấu trúc của server 20

Hình 8 Signalling server 20

Hình 9 Signalling handle trên signalling server 21

Hình 10 Giao diện tạo phòng 21

Hình 11 Giao diện hội thoại 22

Hình 12 Giao diện chia sẻ màn hình 22

4 Application Programming Interface API

6 Traversal Using Relays around NAT TURN

7 Session Traversal Utilities for NAT STUN

9 Interactive Connectivity

Establishment

ICE

10 Secure Real-time Transport Protocol SRTP

12 Stream Control Transmission Protocol SCTP

Chương 1 GIỚI THIỆU TỔNG QUAN

1.1 Tổng quan

- Tên đề tài: Xây dựng ứng dụng Web Conferencing bằng WebRTC

- Bối cảnh thực hiện đề tài: Nhận thấy nhu cầu kết nối giao tiếp rất lớn trongcuộc sống, đặc biệt trong hoàn cảnh dịch bệnh covid, em quyết định thựchiện đề tài tìm hiểu và xây dựng ứng dụng web conferencing bằngWebRTC

- Vấn đề cần giải quyết: Tìm hiểu cơ chế, nguyên lý hoạt động của côngnghệ WebRTC cũng như cách sử dụng, phát triển thành ứng dụng WebConferencing có khả năng tạo kết nối thời gian thực mọi lúc mọi nơi trêntrình duyệt web

- Đề xuất nội dung thực hiện: nghiên cứu và phát triển một ứng dụng web

có chức gọi thoại, video, chat, stream màn hình

1.2 Phương pháp, kết quả

- Phương pháp triển khai:

+ Tìm hiểu cơ chế, nguyên lý hoạt động của công nghệ WebRTC

+ Tìm hiểu về các công cụ lập trình, ngôn ngữ lập trình hỗ trợ phát triểnứng dụng WebRTC

+ Tìm hiểu và sử dụng các kiến thức đã được học từ môn Phân tích vàThiết kế Hệ thống để phân tích và thiết kế ứng dụng

+ Sử dụng kiến thức đã được học để xây dựng ứng dụng phù hợp

Đồ án gồm có 5 chương:

- Chương 1: GIỚI THIỆU TỔNG QUAN

- Chương 2: CƠ SỞ LÝ THUYẾT

- Chương 3: CÔNG NGHỆ WEBRTC

- Chương 4: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

- Chương 5: TRIỂN KHAI XÂY DỰNG

Chương 2 CƠ SỞ LÝ THUYẾT

2.1 Kết nối Peer to Peer

Mạng ngang hàng hay Peer to Peer (P2P) là một hệ thống máy tính kết nối với nhau thông qua Internet, và chia sẻ dữ liệu mà không cần máy chủ trung tâm Các mạng máy tính ngang hàng sử dụng cấu trúc phân tán (phi tập trung)

Kết nối P2P là kết nối trực tiếp giữa các máy tính (Peer) với nhau, không thông qua máy chủ trung gian nên có các ưu điểm sau:

 Chia sẻ file dễ dàng

 Giảm chi phí đầu tư cho máy chủ

 Khả năng tương thích tốt, dễ dàng mở rộng

 Độ tin cậy cao

 Hiệu suất cao

 Hiệu quả

Tuy nhiên, để thực hiện kết nối P2P, các peer cần phải biết chính xác địa chỉ của peer cần kết nối đến cũng như vượt qua tường lửa và các biện pháp an ninh khác

Hình 1 Kết nối peer to peer

2.2 Network Address Translation

Network Address Translation (NAT) là một kỹ thuật cho phép chuyển đổi từmột địa chỉ IP này thành một địa chỉ IP khác Thông thường, NAT được dùng phổbiến trong mạng sử dụng địa chỉ cục bộ, cần truy cập đến mạng công cộng

(Internet) Vị trí thực hiện NAT là router biên kết nối giữa hai mạng

2.3 Session Traversal Utilities for NAT

Session Traversal Utilities for NAT (STUN) là một giao thức mạng cho phép các máy khách tìm ra địa chỉ công khai của mình, loại NAT mà chúng đang đứng sau và cổng phía Internet được NAT gắn liền với cổng nội bộ nào đó Thôngtin này được sử dụng để thiết lập giao tiếp UDP giữa 2 host mà đều nằm sau NATrouter

STUN là một giao thức client-server Một VoIP phone hay một phần mềm bao gồm 1 STUN client, STUN client sẽ gửi yêu cầu đến STUN server Server

sau đó sẽ gửi trả cho STUN client thông tin về địa chỉ IP công khai của NAT router, và NAT mở cổng nào để cho phép thông tin quay lại mạng.

Tuy nhiên nhược điểm của STUN là không hỗ trợ Symmetric NAT

Hình 2 Mô hình hoạt động STUN server

2.4 Traversal Using Relays around NAT

Traversal Using Relays around NAT (TURN) là một giao thức được xây dựng nhằm vượt qua Symmetric NAT bằng cách mở một kết nối đến TURN server Dữ liệu giữa cá peer sẽ được gửi đến TURN server và TURN sẽ đóng vai trò trung gian vận chuyển gói tin, giúp nâng cao chất lượng dịch vụ của ứng và đảm bảo an toàn thông tin khi truyền dẫn

2.5 Session Description Protocol

Session Description Protocol (SDP) là một chuẩn mô tả các thông số của mỗi kết nối như là độ phân giải, định dạng, loại codecs, mã hóa… Điều này làm cho mỗi peer có thể hiểu nhau khi dữ liệu được truyền Đây thực chất là meta-data miêu tả nội dung chứ không phải là dữ liệu media

2.6 Interactive Connectivity Establishment

Interactive Connectivity Establishment (ICE) là một chuẩn được sử dụng đểthiết lập kết nối giữa các peer trên internet ICE sẽ cố gắng thiết lập kết nối bằng cách tìm đường đi tốt nhất cho kết nối.Bằng cách thử hết các khả năng song song nhau, ICE có thể chọn ra được lựa chọn hiệu quả nhất cho kết nối Đầu tiên ICE

cố gắng kết nối sử dụng địa chỉ host lấy được từ hệ điều hành hoặc card mạng Nếu thất bại nó sẽ lấy địa chỉ IP public thông qua STUN server.Nếu vẫn thất bại, lưu lượng được gửi thông qua TURN server

Hình 3 Mô hình hoạt động của TURN server

2.7 Signalling

Signalling là một giao thức giúp tạo liên hệ giữa các peer với nhau

Signaling bao gồm cả khám phá mạng (network discovery) và NAT Traversal, tạo

và quản lý phiên, bảo mật giao tiếp, siêu dữ liệu (metadata) và phối hợp khả năngcủa media, xử lý lỗi

Một số phương thức signalling phổ biến là XMPP, XHR, WebSocket…

2.8 Socket.io

Socket.io là thư viện JavaScript dùng để phát triển các ứng dụng thời gian thực dựa trên WebSocket Thư viện Socket.IO được phát triển để dùng cho cả client và server (NodeJS server)

Chương 3 CÔNG NGHỆ WEBRTC

3.1 Giới thiệu

3.1.1 Giới thiệu chung

WebRTC hay 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) giao tiếp với nhau thông qua VideoCall, VoiceCall hay transfer data

"Peer-to-Peer" (P2P) mà không cần browser phải cài thêm plugins hay phần mềm

hỗ trợ nào từ bên ngoài

3.1.2 Quá trình phát triển

Ý tưởng phát triển WebRTC được nhóm kỹ sư chịu trách nhiệm cho

Google Hangouts đưa ra từ tận năm 2009 Vào thời gian đó, để truyền tải video, hình ảnh trên web thì người ta thường phải xài đến Flash Nhóm kỹ sư Hangouts lại không muốn sử dụng công nghệ này, và họ bắt đầu tự làm một chuẩn riêng cho mình Đến năm 2010, Google thâu tóm hai công ty On2 và Global IP

Solutions (GIPS) để lấy công nghệ truyền dữ liệu thời gian thực làm nền tảng choWebRTC về sau

Vào tháng 5/2011, Google ra mắt một dự án nguồn mở dành cho việc giao tiếp thời gian thực giữa trình duyệt với nhau, và từ lúc này dự án mang tên

WebRTC Song song đó, Hiệp hội World Wide Web (W3C) và Hiệp hội Kĩ sư quốc tế (IETF) cũng đang phát triển một số giao thức để dùng cho việc việc kết nối thời gian thực, thế nên họ bắt tay nhau tiếp tục hoàn thiện để rồi quyết định kết hợp chung vào WebRTC

Đến 27/10/2011, W3C ra mắt bản nháp đầu tiên của WebRTC Tháng 11/2011, Chrome 23 ra mắt, trở thành trình duyệt đầu tiên có tích hợp WebRTC ngay từ bên trong Và tính đến thời mà mình viết bài này thì WebRTC vẫn còn

 Hỗ trợ mọi nền tảng thiết bị: Bất kì trình trình duyệt nào với hệ điều

hành bất kì có thể tạo trực tiếp một real-time voice hoặc video kết nối tới thiết bị WebRTC khác.Lập trình viên có thể viết các đoạn mã HTML làm việc với máy tính hoặc thiết bị di động

 An toàn trong voice và video: WebRTC sử dụng giao thức SRTP (Secure

Real Time Communication) nhằm mục đích mã hóa và xác thực dữ liệu media.Điều này tránh được việc nghe trộm khi người dùng thực hiện các tác vụ media như là video hay voice

 Không Plugins: Như đề cập ở trên WebRTC không cần phải cài các

plugin của bên thức ba để sử dụng các ứng dụng đa phương tiện.Việc làm làm cho ứng dụng đa phương tiện còn phải phụ thuộc vào các nền tàng khác nhau.Với WebRTC thì không cần quan tâm đến vấn đề này

 Dễ sử dụng: Có thể tích hợp các tính năng của WebRTC trong các dịch vụ

web bằng cách sử dụng JavaScript APIs,những Framework có sẵn

 Thích ứng với các điều kiện mạng khác nhau: WebRTC hỗ trợ việc

thương lượng với nhiều kiểu media và các thiết bị đầu cuối khác nhau Điều này các ứng dụng tương tác video hoặc gọi thoại của chúng ta sử dụng băng thông hiệu quả hơn.Các APIs WebRTC và signaling có thể thỏathuận kích thức và định dạng cho môi thiết bị đầu cuối

3.1.4 Trở ngại của WebRTC

Hiện tại WebRTC chỉ mới được phát triển ở giai đoạn nháp chứ chưa được hoàn tất nên việc hỗ trợ cho lập trình viên khi cần giúp đỡ cũng còn nhiều khó khăn, trong khi tài liệu thì chưa có một cách đầy đủ

Ngoài ra, các hãng trình duyệt chưa thống nhất với nhau về chuẩn video nào

sẽ được dung cho WebRTC

Vấn đề cuối cùng đó là sự khác biệt về số lượng hàm API WebRTC được hỗtrợ trong các trình duyệt rất khác nhau Điều này làm giảm đi khả năng hoạt độngcủa các ứng dụng WebRTC, thế nên lập trình viên sẽ phải dành nhiều công sức hơn để tinh chỉnh lại trang web hoặc app của mình cho phù hợp với từng trình duyệt, phần nào giảm đi lợi ích cốt lõi của WebRTC, chưa kể đến rủi ro phát sinh lỗi cao hơn

3.2 Cấu trúc của WebRTC

3.2.1 Kiến trúc của WebRTC

Về cơ bản, dữ liệu được truyền tải trên WebRTC là dữ liệu voice và video, tuy nhiên khác với các ứng dụng video stream điển hình như Youtube hay Vimeo

là các định dạng video đã trải qua chế biến để có thể giảm bớt dụng lượng, các dữliệu này phải được nhận và gửi trực tiếp từ các Media devices (Microphone, Webcam) Để có thể thực hiện điều này, một số trình duyệt Web đã thêm vào các module hỗ trợ multimedia, điển hình là Google Chrome, Moliza Firefox, Opera

và một số trình duyệt khác trên thiết bị di động

Hình 4 Kiến trúc của WebRTC

Để có thể tích hợp các ứng dụng thời gian thực vào web, các browser phải thêm vào các khối chức năng hỗ trợ dành cho WebRTC:

 Voice/video engine: Thu nhận âm thanh và hình ảnh từ thiết bị ngoại vi(microphone, camera), điều chế mã hoá âm thanh và hình ảnh dựa trên các chuẩn mã hoá cơ bản trước khi truyền Các chuẩn mã hoá cơ bản dành cho voice và video bao gồm: Opus, iSac, iLBC <voice>; VP8, H263, H264 (video)

 Transport: cũng cấp chức năng kết nối với các thành phần khác cùng tham gia trong WebRTC (STUN, TURN, ICE )

 Session management: đóng vai trò điều khiển hoạt động của ứng dụng

 Application Programmable Interface - API: cung cấp các hàm cơ bản

để các nhà phát triển có thể sử dụng API ở đây có thể xét nằm trên 2 mức cơ bản: API dành cho Browser developer và API dành cho Front end developer

3.2.2 Các thành phần chính

Có 3 mục phân loại API chính trong WebRTC:

 Media Capture and Streams (luồng media và chụp media) - cho phép

truy xuất vào các thiết bị đầu vào, chẳng hạn như microphone hay web camera API này cho phép lấy một luồng media từ các thiết bị đó

 RTCPeerConnection – những API này có thể gửi theo thời gian thực

3.3 Phương thức hoạt động

WebRTC sử dụng mô hình P2P để kết nối Trong mô hình này, dữ liệu được chia thành hai loại: dữ liệu điều khiển, báo hiệu (Signaling) và dữ liệu nội dung (Data stream)

Mặc dù sử dụng mô hình P2P xong cái ứng dụng WebRTC vẫn cần một server đứng trung gian để có trao đổi các thông tin cần thiết để hai trình duyệt có thể kết nối với nhau Server này được gọi là signaling server, nó cần phải là một với chức năng thời gian thực (Real Time Communication hay RTC) Sau khi thiếtlập kết nối, các peer sẽ trao đổi dữ liệu nôi dung trực tiếp với nhau

Ví dụ khi thực hiện kết nối video bằng WebRTC:

1 Người gọi và người nhận khi bắt đầu sử dụng ứng dụng phải gửi các tín hiệu về về ứng dụng mà mình đang sử dụng tới server (session

description)

2 Người gọi gọi: Người gọi request tới server để đăng ký một cuộc gọi vớingười nhận, server sẽ trả về cho người gọi địa chỉ IP của người nhận cùng với port ứng dụng hiện tại của người nhận

3 Người nhận sẽ nhận một bản tin của server báo về một cuộc gọi từ phía caller

4 Người gọi bắt đầu truyền dữ liệu từ phía mình trực tiếp sang Người nhận

5 Caller/callee ngắt kết nối: thông báo về server và dừng truyền dữ liệu

Hình 5 Mô hình quá trình gọi video sử dụng WebRTC

Chương 4 PHÂN TÍCH THIẾT KẾ HỆ THỐNG

4.1 Mô hình hóa yêu cầu

- Điều kiện sau: Tham gia vào phòng

- Mô tả: Người gọi sau khi tạo phòng nhấn tham gia phòng, người nhậndùng đường dẫn vào phòng của người gọi chia sẻ và tham gia phòng

c Bật/tắt webcam/microphone

- Các tác nhân: Người gọi, người nhận

- Điều kiện trước: Tham gia vào phòng

- Điều kiện sau: Webcam microphone được bật/tắt

- Mô tả: Người gọi/người nhận chọn bật/tắt webcam/micro, luồngvideo/audio đến mọi người khác trong phòng được ngắt

d Chia sẻ màn hình

- Các tác nhân: Người gọi, người nhận

- Điều kiện trước: Tham gia vào phòng

- Điều kiện sau: Màn hình của người dùng được chia sẻ

- Mô tả: Người gọi/người nhận chọn chia sẻ màn hình, chọn màn hìnhsau đó luồng video màn hình người dùng được gửi tới mọi người trongphòng

e Chat

- Các tác nhân: Người gọi, người nhận

- Điều kiện trước: Tham gia vào phòng

- Điều kiện sau: Tin nhắn được gửi đến tất cả người trong phòng

- Mô tả: Người gọi/người nhận nhập và gửi tin nhắn, tin nhắn được gửiđến tất cả người trong phòng

f Thoát khỏi phòng

- Các tác nhân: Người gọi, người nhận

- Điều kiện trước: Tham gia vào phòng

- Điều kiện sau: Người thoát thoát khỏi phòng, kết nối của người đó vớimọi người khác trong phòng bị ngắt

- Mô tả: Người gọi/người nhận chọn thoát khỏi phòng, quay về màn hìnhchính Luồng kết nối đến những người trong phòng bị ngắt

4.2 Thiết kế hệ thống

Hệ thống gồm Signalling sẽ trung gian chuyển các thông tin giúp thiết lập kết nối giữa các peer