.TÌM HIỂU VÀ ỨNG DỤNG WEBRTC ĐỂ TẠO ỨNG DỤNG VIDEO CALL. TS.NGUYỄN HÀ HUY CƯỜNG.

Lần này nôi dụng của đồ án sẽ là Video Call – một trong những lĩnh vực được xem như là xu thế pháttriển và nâng cấp trong thời kì hiện đại… Đồ án kỳ này cũng là cũng là một cơhội mới để

ĐẠI HỌC ĐÀ NẴNG

KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 4

tạo ứng dụng Video Call

Sinh viên thực hiện : Võ Như Tài

Giảng viên hướng dẫn : TS Nguyễn Hà Huy Cường

Lớp : 17IT2

1

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

MỞ ĐẦU

Ngày nay, trong một thế giới thông minh thì sẽ có nhiều nhu cầu đươcđặt ra hơn, và trong đó chắc chắn sẽ có nhiều nhu cầu có thể giúp cho xã hội conngười vươn tầm lên tầm cao mới

Là một bước đi mới khác với các đồ án kỳ trước Lần này nôi dụng của

đồ án sẽ là Video Call – một trong những lĩnh vực được xem như là xu thế pháttriển và nâng cấp trong thời kì hiện đại… Đồ án kỳ này cũng là cũng là một cơhội mới để nâng cao kiến thức về lập trinh ứng dụng và tìm hiểu về các API cótrên thế giới

Việc sử dụng phương pháp Web Real-Time Communications tạo ra sựthuận tiện việc thực hiện mục tiêu của đồ án lần này Kết hợp với OpenTok đểtạo ra một server cho phép các người dùng có thể trao đổi video với nhau

Và việc hoàn thành được đồ án 4 học kỳ này cũng không thể thiếu đến sựgiúp đỡ chỉ dẫn tận tình của thầy Nguyễn Hà Huy Cường - giáo viên hướng dẫn.Người đã tạo điều kiện tốt nhất cho sự hoàn thành đề án này

Thật sự cảm ơn thầy trong thời gian qua đã hướng dẫn, định hướng hướngphát triển cho chúng em Chúng em xin cảm ơn!

NHẬN XÉT

………

………

………

………

………

………

3

MỤC LỤC Trang Contents Chương 1 Giới thiệu 9

1.1 Tổng quan 9

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

1.2.1 Phương pháp 9

1.2.2 Kết quả 9

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

Chương 2 Nghiên cứu tổng quan 11

2.1 Các phương pháp 11

2.1.1 Web Real-Time Communications 11

2.1.2 EasyRTC OpenSource 12

2.2 Hạn chế, tồn tại của các phương pháp 13

2.2.1 Web Real-Time Communications 13

2.2.2 EasyRTC OpenSource 13

2.3 Kết luận 14

Chương 3 Phân tích thiết kế hệ thống 15

3.1 Mô hình tổng quan của WebRTC 15

3.1.1 Các giao thức được sử dụng trong WebRTC 17

3.1.2 Các API của WebRTC 20

3.1.3 Bảo mật của WebRTC 21

3.2 Thiết kế chi tiết 21

Chương 4 Kết luận và Hướng phát triển 25

4.1 Kết luận 25

4.2 Định hướng phát triển 25

DANH MỤC CÁC BẢNG

TrangBảng 2.1 – Bảng so sánh các phương pháp 13/14

5

DANH MỤC HÌNH

Trang

Hinh1 1: Hoạt động của WebRTC 11

Hinh1 2 : Kiến trúc tổng thể của WebRTC 15

Hinh1 3: Kiến trúc bên trong của WebRTC 16

Hinh1 4: Chồng giao thức WebRTC 17

DANH MỤC CỤM TỪ VIẾT TẮT

1 Web Real-Time Communication WebRTC

2 HyperText Transfer Protocol HTTP

3 Voice over internet protoco VoIP

4 Real-time Transport Protocol RTP

6 Application Programming Interface API

8 Session Traversal Utilities for NAT STUN

9 Traversal Using Relays around NAT TURN

10 Interactive Communication

13 Stream Control Transport Protocol SCTP

7

Chương 1 Giới thiệu

Hiện này, theo dòng thời gian ta đã có thể thực hiện một cuộc gọi cách nữavòng Trát Đất rất dễ dàng Tuy nhiên nhu cầu lại đc nâng lên một tầm cao mới,mọi người đều muốn quan sát theo dõi cuộc sống hằng ngày của người mà họ yêuthương qua những video trực tiếp , để có thế thấu hiểu hơn về đối phương

Từ đó, việc phát triển các ứng dụng cho phép thực hiện các cuộc gọi videoluôn là vấn đề được quan tâm Và để đáp ứng đươc nhu cầu của người người haycòn có thể gọi là thị trường, cũng như để phục vụ cho quá trình học tập cụ thể là

Đồ án Cơ sở 4, cho nên chúng tôi đã quyết định nghiên cứu và phát triển một ứngdụng – mô hình để cho mọi người có thể thoải mái liên lạc với nhau , cùng nhaumang lại niềm vui hạnh phúc

Ở đây, chúng tôi đang nghiên cứu về WebRTC, là một web API được phát triển bởi World Wide Web Consortium, khả năng hỗ trợ trình duyệt giao tiếp với nhau thông qua VideoCall để tạo nên một ứng dụng cho phép thực hiện các cuộc gọi video

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

1.2.1 Phương pháp

Tìm hiểu WEBRTC là gì? Cách thức nó hoạt động như thế nào Liên kết rasao với ngôn ngữ lập trình di động

Chuẩn bị môi trường làm làm việc bao gồm các thiết bị cần thiết để phục

vụ cho việc lập trình đi động Lên kế hoạch làm việc cho từng giai đoạn làm việc

để đảm bảo tiến độ dự án

1.2.2 Kết quả

Đối với một ứng dụng trên thiết bị di dộng thì giao diện là môt phần quantrọng không thua kém chức năng cho nên kết quả của đề tài lần này sẽ bào gồm:

- Giao diện thân thiện,thuận tiện, sẵn sàng tương tác hỗ trợ người dùngkhi ứng dụng – hệ thống gặp vấn đề.

- Đảm bào khả năng VideoCall luôn sẵn sàng hoạt động

1.3 Cấu trúc đồ án

- Tìm hiểu và so sanh giữa hai phương pháp WebRTC và EasyRTC

- Hạn chế và lợi ích của từng phương pháp

- Tìm hiểu về OpenTok SDK Android

- Phân tích thiết kệ hệ thống và triển khai:

o Nói rõ đến cách thức hoạt động của phương pháp được chọn

o Xây dựng mô hình hoạt động của ứng dụng

o Tiến hành lập trình ứng dụng

- Kết luận và hướng phát triển:

o Tổng kết những gì đã đạt được qua quá trình xây dựng ứng dụng

o Nêu ra những hạn chế tồn tại chưa được giải quyết

o Định ra hướng phát triển, khắc phục những hạn chế tồn tại nêu ra trước đó

-9

Chương 2 Nghiên cứu tổng quan

2.1 Các phương pháp

2.1.1 Web Real-Time Communications

Sơ lượt về lịch sử của WebRTC

Ý 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 đang tiếp tục được phát triển chứ chưa hoàn thiện một cách chính thức

WebRTC là gì?

Hinh1 1: Hoạt động của WebRTC

WebRTC là viết tắt của cụm từ 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

WebRTC được ra đời từ năm 2011, ngay sau khi ra đời nó đã đạt được khảnăng tương tác giữa các trình duyệt Chrome và FireFox vào năm 2013 để triển khai hỗ trợ cho điện thoại di động như Android, WebRTC đã ngày càng thu hút sựchú ý hứa hẹn thị trường ngày càng phát triển

Ngoài ra theo dự đoán Apple và Microsoft sẽ kết hợp WebRTC trong trìnhduyệt của họ và có thể có 7 tỷ thiết bị hỗ trợ WebRTC trong năm 2020 Với tốc

độ tăng trưởng mạnh mẽ việc kiểm tra để có một chiến lược cho các ứng dụngWebRTC được hiệu quả là cần thiết

Các thành phần chính của WebRTC và chức năng của WebRTC API ?

Các phần chính của WebRTC bao gồm:

- getUserMedia, cho phép trình duyệt web truy cập vào camera và/hoặc microphone để lấy dữ liệu hình ảnh âm thanh cho việc truyền tải

- RTCPeerConnection dùng để cài đặt videocall/voicecall dùng cho việc truyền tải

- RTCDataChannel cho phép trình duyệt chia sẻ dữ liệu peer-to-peer.WebRTC API bao gồm chức năng:

- getStats cho phép ứng dụng web lấy tập hợp các số liệu thống kê

về các session WebRTC

11

2.1.2 EasyRTC OpenSource

EasyRTC là một khung được xây dựng dựa trên WebRTC, một tiêu chuẩnW3C / IETF mới nổi để giao tiếp thời gian thực của âm thanh, video và dữ liệugiữa các trình duyệt web WebRTC hỗ trợ chuyển âm thanh, video và dữ liệu trên

cơ sở ngang hàng đặt rất ít tải lên các máy chủ hỗ trợ

Khung EasyRTC bao gồm thư viện JavaScript phía máy khách hoặc trìnhduyệt và máy chủ JavaScript phụ trợ được xây dựng trên đỉnh của node.js Bởi vìcác thư viện WebRTC được tích hợp vào mỗi trình duyệt, không cần trình cắmtrình duyệt

Trình duyệt Chrome của Google có hỗ trợ rộng nhất cho APIWebRTC Opera hiện đang sử dụng cùng một công cụ với Chrome và do đó bắtchước hành vi của nó Firefox cung cấp hỗ trợ tuyệt vời cho truyền thông dữ liệunhưng chỉ hỗ trợ cơ bản cho các cuộc trò chuyện video (nó thiếu khả năng đặt độphân giải camera, lập trình cho phép chia sẻ màn hình hoặc thu thập số liệu thốngkê)

WebRTC có tiềm năng một khi nó được chuẩn hóa hoàn toàn để hỗ trợ tròchuyện và hội thảo bằng âm thanh và video, trò chơi nhiều người chơi và nhiềuứng dụng dựa trên âm thanh, video và dữ liệu khác

Như thường thấy với phần mềm, với sức mạnh đi kèm phức tạp WebRTC

có một lộ trình học tập có khả năng cản trở việc sử dụng của các nhà phát triểnweb Để che giấu sự phức tạp đó, Priologic đã xây dựng khung EasyRTC

Một ứng dụng WebRTC thường cần thực hiện hầu hết các bước sau

- Truy cập vào camera và micrô cục bộ dưới dạng "luồng phươngtiện"

- Thiết lập kết nối đến một máy chủ báo hiệu

- Bắt đầu một cuộc gọi đến một người trên một trình duyệt khác

- Kết nối các luồng phương tiện với các thẻ video

Sử dụng khung EasyRTC, một số bước trong số này có thể được thu gọnthành một cuộc gọi, đơn giản hóa rất nhiều công việc của nhà phát triển, đặc biệtnếu nhà phát triển web đang cố gắng hỗ trợ nhiều nền tảng

Thành phần của EasyRTC OpenSource :

- Một thư viện trình duyệt máy khách được viết bằng JavaScript Ứngdụng khách này xử lý tín hiệu và ở một mức độ lớn sẽ cách ly các ứngdụng khỏi những thay đổi đang diễn ra trong api WebRTC

- Một máy chủ báo hiệu dựa trên Node.js Node.js chạy trên các nền tảngnhỏ như một Raspberry Pi lõi đơn (phiên bản đầu tiên) cho các máychủ trong đám mây.

Cùng với nhau, hai thành phần này sẽ cho phép bạn viết một ứng dụng hộinghị video đơn giản hoặc một ứng dụng chia sẻ tệp, v.v chỉ trong một vài dòng

mã đơn giản

2.2 Hạn chế, tồn tại của các phương pháp

2.2.1 Web Real-Time Communications

Như thường thấy với phần mềm, với sức mạnh đi kèm phức tạp WebRTC

có một lộ trình học tập có khả năng cản trở việc sử dụng của các nhà phát triểnweb Để che giấu sự phức tạp đó, Priologic đã xây dựng khung EasyRTC

Một ứng dụng WebRTC thường cần thực hiện hầu hết các bước sau

- Truy cập vào camera và micrô cục bộ dưới dạng "luồng phươngtiện"

- Thiết lập kết nối đến một máy chủ báo hiệu

- Bắt đầu một cuộc gọi đến một người trên một trình duyệt khác

- Kết nối các luồng phương tiện với các thẻ video

2.2.2 EasyRTC OpenSource

Hiện tại, máy chủ EasyRTC chạy trên một cá thể Node.js Điều đó có nghĩa

là nó bị giới hạn bởi số lượng bộ nhớ và số lượng cổng mà đối tượng node.js cóquyền truy cập Nó cũng chỉ có thể gửi và nhận tin nhắn rất nhanh Số lượngkhách hàng mà nó có thể hỗ trợ có thể dao động từ hàng trăm đến hàng nghìn, tùythuộc vào nhu cầu ứng dụng của bạn đặt trên máy chủ Điều này cũng có nghĩa làmáy chủ EasyRTC không mạnh như bạn muốn cho một hệ thống sản xuất Nếumáy chủ đang chạy quá trình máy chủ ngừng hoạt động, dịch vụ sẽ thất bại

2.3 Kết luận

Web Real-Time Communications EasyRTC OpenSource

Là một tập hợp các hàm lập trình Một khung được xây dựng dựa trên

WebRTCKhông cần đăng kí tài khoản Một máy chủ báo hiệu dựa trên Node.jsCòn được dùng để phát triển game chơi Một thư viện trình duyệt máy khách

13

trực tiếp trong trình duyệt được viết bằng JavaScript

Thực thi hầu hết các tác vụ theo thời

gian thực

Cho phép bạn viết một ứng dụng hộinghị video đơn giản chỉ trong một vàidòng mã đơn giản

Không chỉ được dùng cho việc gọi

video giữa hai trình duyệt

Bị giới hạn bởi số lượng bộ nhớ và số lượng cổng mà đối tượng node.js có quyền truy cập

Một lộ trình học tập có khả năng cản

trở việc sử dụng của các nhà phát triển

web

Chỉ có thể gửi và nhận tin nhắn rất nhanh

Bảng 1: So sanh 2 phương pháp WebRTC và EasyRTC

Mặc dù EasyRTC là một bộ khung thu gọn dựa trên WebRTC, phù hợp vớiviệc phát triển các hệ thống với số lượng bộ nhớ không quá lớn, hỗ trợ cho nhàphát triển rất tốt… Nhưng để hoàn thành quá trình học tập và củng cố kiến thứcmột cách chắc chắn nhất thì lựa chọn tốt nhất là bắt đầu với việc tìm hiểu và pháttriển ứng dụng trong đồ án lần này là theo phương pháp WebRTC

Ở đồ án này chúng ta sẽ sữ dụng thêm môi trường là OpenTok.

OpenTok là nền tảng WebRTC hàng đầu cho video tương tác, cho phépthoại, video và nhắn tin cho thiết bị di động và web với API Video trực tiếp Bộgiải pháp di động toàn diện nhất cho WebRTC Tải ứng dụng di động của bạn lên

và chạy nhanh với các tính năng nâng cao, kiểm soát và hỗ trợ thiết bị rộng VớiOpenTok, bạn có toàn quyền kiểm soát trang web hoặc ứng dụng bạn muốn

Chương 3 Phân tích thiết kế hệ thống

3.1 Mô hình tổng quan của WebRTC

Cho phép truyền thông thời gian thực trong trình duyệt là một cam kết đầy tham vọng, và có lẽ là một trong những bổ sung quan trọng nhất cho nền tảng web từ khi được hình thành cho đến nay Với kết quả là kiến trúc WebRTC bao gồm rất nhiều tiêu chuẩn, giao thức và API mới để cho nó hoạt động:

 Tổ chức W3C chịu trách nhiệm định nghĩa các APIs mới của WebRTC cho trình duyệt

 Tổ chức IETF chịu trách nhiệm định nghĩa các giao thức, định dạng

dữ liệu, bảo mật và các khía cạnh cần thiết khác để cho phép truyềnthông peer-topeer trong trình duyệt

Hình đưới đây mô tả kiến trúc tổng thể của WebRTC.Khối màu nhạt hơn gọi là "chức năng truyền thông thời gian thực của trình duyệt" Chức năng này tương tác với các ứng dụng web sử dụng các API tiêu chuẩn của WebRTC và nó giao tiếp với hệ điều hành thông qua trình duyệt

Hinh1 2 : Kiến trúc tổng thể của WebRTC

15

Một khía cạnh mới của WebRTC là sự tương tác xảy ra giữa trình duyệt với trình duyệt, được biết đến nhờ một kết nối peer-to-peer, nơi mà chức năng RTC trong một trình duyệt giao tiếp sử dụng các giao thức tiêu chuẩn trên dây (không phải HTTP) với chức năng RTC trong một trình duyệt khác Trong khi truyền thôngtrên web sử dụng 12 giao thức TCP, các giao thức tiêu chuẩn trên dây được RTC sử dụng giữa các trình duyệt có thể sử dụng giao thức truyền UDP- User Datagram Protocol

Một cái mới nữa là máy chủ báo hiệu (signaling server) cung cấp các kênhbáo hiệu giữa các trình duyệt trong kết nối peer-to-peer

Hình dưới đây thể hiện kiến trúc bên trong của WebRTC Chúng ta thấy cóhai tầng riêng biệt trong WebRTC [8]: 1 Các nhà phát triển trình duyệt web (nhờ Google Chrome hoặc Mozilla Firefox) sẽ quan tâm đến các WebRTC C ++ API cho kết nối peer-to-peervà các API cho audio, video và vào/ra mạng theo ý của

họ Các nhà phát triển ứng dụng web sẽ quan tâm đến các web API

Hinh1 3: Kiến trúc bên trong của WebRTC

Ứng dụng web: là ứng dụng viết trên nền web sử dụng các JavaScript API của WebRTCcho chức năng truyền thông thời gian thực như chia sẻ video, audio chat, chia sẻ file

WebRTC JavaScript API: là các API được xây dựng bởi các nhà phát triển trình duyệt web theo tiêu chuẩn được quy định bởi tổ chức W3C Các API này được các nhà 13 phát triển ứng dụng web sử dụng để viết ra các ứng dụng web có