KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNGĐỒ ÁN CƠ SỞ 4ĐỀ TÀI: WEBRTC – XÂY DỰNG CHƯƠNG TRÌNH HỘI THẢO TỪ XA

Những tính năng được người dùng ưa thích như Blognhật ký web, các mạng xã hội Facebook, Twitter và MySpace hay Wiki trang webcập nhật nội dung trực tuyến của công nghệ Web 2.0 đã tạo “cá

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

ĐỒ ÁN CƠ SỞ 4

ĐỀ TÀI: WEBRTC – XÂY DỰNG CHƯƠNG TRÌNH

HỘI THẢO TỪ XA Sinh viên thực hiện: Nguyễn Vũ

Nguyễn Thị Hoàng Thắm Lớp: 17IT2

Giảng viên hướng dẫn: TS Huỳnh Ngọc Thọ

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

Lời mở đầu

Ngày nay, người sử dụng đã quen thuộc với giao diện Web, sử dụng các ứng dụngWeb trong công việc và đời sống Những tính năng được người dùng ưa thích như Blog(nhật ký web), các mạng xã hội (Facebook, Twitter và MySpace) hay Wiki (trang webcập nhật nội dung trực tuyến) của công nghệ Web 2.0 đã tạo “các cộng đồng trực tuyến”nhờ khả năng kết nối năng động và dễ dàng chia sẻ thông tin trên Web Công nghệWebRTC (Web Real-Time Communications) được phát triển hiện nay cho phép liên lạcthời gian thực bằng video, âm thanh cũng như các loại dữ liệu khác WebRTC cho phépgọ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ầncài thêm plugin nào Ngoài ra, nhiều loại ứng dụng cũng được phát triển dựa trênWebRTC

Lời cảm ơn

Chúng em xin chân thành cảm ơn thầy TS Huỳnh Ngọc Thọ đã tận tình giảng dạy,trang bị cho chúng em những kiến thức quý báu trong suốt quá trình thực hiện đề tài cũngnhư đã tạo điều kiện cho chúng em thực hiện đề tài này.

Mặc dù đã rất nỗ lực và cố gắng nhưng chắc chắn rằng đề tài vẫn còn nhiều thiếu sót,chúng em mong sẽ nhận đuợc sự góp ý, phê bình của thầy, và các bạn để đề tài hoànthiện hơn

Chúng em xin chân thành cảm ơn!

NHẬN XÉT

(Của giảng viên hướng dẫn)

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Mục lục : Chương 1 :Tổng quan 7

1.1 Lí do chọn đề tài 7

1.2 Khách thể và đối tượng nghiên cứu, đối tượng khảo sát 7

1.3 Giới hạn và phạm vi nghiên cứu 8

1.4 Điểm mới của đề tài 8

1.5 Mục tiêu và nhiệm vụ nghiên cứu 8

Chương 2 : Phương pháp nghiên cứu 9

2.1 Giới thiệu chung về công nghệ webrtc 9

2.2 Webrtc là gì? 10

2.2.1 Sơ đồ kết nối giữa client 10

2.2.2 Đặc điểm của webrtc 11

Chương 3 : Dàn ý nội dung của đề tài 15

3.1 Kiến trúc WebRTC 15

3.1.1 Architecture 15

3.1.2 Your Web App 16

3.1.3 Web API 16

3.1.4 Webrtc Native C++ API 16

3.1.5 Transport / Session 16

3.1.6 RTP Stack 16

3.1.7 STUN/ICE 16

3.1.8 Session Management 16

3.1.9 Voiceengine 16

3.1.10 Isac / ilbc / Opus 16

3.1.11 Acoustic Echo Canceler (AEC) 17

3.1.12 Noise Reduction (NR) 17

3.1.13 Videoengine 17

3.1.14 VP8 17

3.1.15 Video Jitter Buffer 18

3.1.16 Image enhancements 18

3.2 Triển khai xây dựng 18

3.2.1 Đăng kí người dùng 18

3.2.2 Thực hiện cuộc gọi 18

3.2.3 Quy trình lấy được SDP 19

3.2.4 Trao đổi ứng viên (candidate) 20

3.2.5 Bắt đầu thiết lập cuộc gọi 21

3.2.6 Kết thúc cuộc gọi 23

Chương 4 :Kế hoạch, tiến độ thực hiện đề tài 24

4.1.1 Phương tiện code 24

4.1.2 Thư viện 24

4.1.3 Môi trường ảo hóa oracle vm vitualbox 24

Chương 5 Kết luận 25

5.1 Kết luận 25

5.2 Hướng phát triển 25

Mục lục ảnh :

Hình 1 Sơ đồ kết nối giữa clinet 12

Hình 2: Kiến trúc của webrtc 16

Hình 3: Sơ đồ tác nhân 19

Hình 4: Quy trình lấy được SDP 20

Hình 5: Trao đổi ứng viên 21

Hình 6: Các trạng thái hoạt động 22

Hình 7:Các bước khi thực hiện cuộc gọi 23

Hình 8 24

Hình 9 24

Hình 10: Các bước khi kết thúc cuộc gọi 25

1.2 Khách thể và đối tượng nghiên cứu, đối tượng khảo sát

- Khách thể: Ở đây chúng tôi nghiên cứu với tất cả các khách hang có nhu cầu sửdụng ứng dụng chat bao gồm callvideo, callphone, chat,…

- Đối tượng nghiên cứu: chúng tôi chia ra các đối tượng nghiên cứu như sau:

+ Các đối tượng trẻ: Đối tượng này yêu cầu các ứng dụng phải bắt mắt, đáp ứng cảlẫn nhìn vì họ tiếp cận nhiều công nghệ hiện đại nên sẽ yêu cầu khá cao Trong cảgiao diện, cách hiện hành kèm đó là những tính năng mới mẻ phục vụ nhu cầu lớncủa họ

+ Các đối tượng trung niên, cao tuổi: Đối với độ tuổi này lại yêu cầu giao diện vàtính năng dể dùng, dể sử dụng Vì vậy chúng ta phải vừa làm cho đơn giản hóaứng dụng vừa đáp ứng nhu cầu hiện đại của giới trẻ Việc này phải mất khá nhiềucho khâu xây dựng ứng dụng

+ Các đối tượng nhỏ tuổi: Vì ở đây ứng dụng chúng ta có trẻ nhỏ nên những hìnhảnh hay quảng cáo không đúng độ tuổi chúng ta sẽ cấm tuyệt đối

- Đối tượng khảo sát: Ở đây chúng tôi khảo sát hầu như là các đối tượng sinh viên,giáo viên hay các phụ huynh về nhu cầu là các mong muốn mà bạn muốn cho 1ứng dụng liên hệ online

1.3 Giới hạn và phạm vi nghiên cứu

Phạm vi nghiên cứu là sinh viên, học sinh, phụ huynh hay những người mà chúng tôigặp được chúng tôi sẽ cung cấp địa chỉ để kết nối với họ và thực hiện chạy chương trìnhcủa mình Hạn chế của chúng tôi là ứng dụng không được test trên nhiều vùng miền, trênnhiều quốc gia nên không tìm ra được nhiều lỗi trên ứng dụng

1.4 Điểm mới của đề tài

Ngoài tính năng callvideo như ban đầu xây dựng thì ngoài ra chúng tôi còn tích hợpthêm tính năng callphone và nhắn tin giữa 2 bên Ngoài ra còn yêu cầu chia sẽ video hay

âm thanh khi bên A gọi đến

1.5 Mục tiêu và nhiệm vụ nghiên cứu

- Mục tiêu: Ứng dụng sẽ hoàn thiện và được sử dụng rộng rãi đồng thời được nhiềungười yêu thích ứng dụng này

- Nhiệm vụ nghiên cứu:

+ Nắm được cốt lõi là cách thức xây dựng, hoạt động của WebRTC

+ Hiểu được cách vận hành của nó

Chương 2 Giới thiệu về WebRTC

2.1 Giới thiệu chung về công nghệ webrtc

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

ra từ năm 2009 Vào thời gian đó, để truyền tải video, hình ảnh trên web thì người tathường phải dùng Flash Nhóm kỹ sư Hangouts lại không muốn sử dụng công nghệ này,nên họ bắt đầu tự làm một chuẩn riêng cho mình

Đến năm 2010, Google mua lại hai công ty On2 và Global IP Solutions (GIPS) để tiếpcận công nghệ truyền dữ liệu thời gian thực làm nền tảng cho WebRTC như các bộ codec

và các kỹ thuật loại bỏ tiếng vang

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ờigian 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 W3C (World Wide Web Consortium) và Tổ chức IETF (InternetEngineering Task Force) cũng đang phát triển một số giao thức để dùng cho việc việc kếtnối thời gian thực, vì vậy họ bắt tay nhau tiếp tục hoàn thiện và sau đó kết hợp chúng vàoWebRTC

Ngày 27/10/2011, Hiệp hội 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ợpWebRTC ngay từ bên trong Công nghệ WebRTC vẫn đang tiếp tục được phát triển vàliên tục cập nhật

Đến nay, vào ngày 22/3/2016, Google đã phát hành phiên bản Chrome 50 (trong bảnBeta Channel) Theo đó, trình duyệt Chrome 50 có sự hỗ trợ chuẩn video H.264 (codecvideo) của WebRTC

Tiếp đó, ngày 29/8/2016, Mozilla đã phát hành phiên bản trình duyệt Firefox 49 Firefox

49 đã được tăng cường hỗ trợ tiêu chuẩn WebRTC trong kiểm soát băng thông Các cảithiện quản lý băng thông bao gồm: cho phép cho phương tiện truyền thông một chiều và

xử lý băng thông tốt hơn Đồng thời, trình duyệt Firefox 49 cho phép kiểm tra NATtraversal trong các topo NAT (Network Address Translation) khác nhau

Hiện nay, WebRTC vẫn còn đang tiếp tục được phát triển chứ chưa hoàn thiện Tuynhiên, các nhà nghiên cứu và phát triển ứng dụng bắt đầu giới thiệu về công nghệ

WebRTC dành cho các thiết bị di động chạy hệ điều hành IOS và Android như: CésarGuirao (tại Tokbox) với “Android Development with WebRTC”, (RealTime Weeklyngày 22/11/2016) César Guirao đã trình bày ba phương pháp chính có thể xây dựng mộtứng dụng Android với WebRTC.

Và Arik Halperin (tại Greenfield Tech) với “IOS Development with WebRTC”,(RealTime Weekly ngày 22/11/2016) Arik Halperin sử dụng AppRTC để xây dựng ứngdụng WebRTC Ứng dụng được dùng pristine.io của AppRTC, mã nguồn mở của Googletrên GitHub

2.2 Webrtc là gì?

Theo Arin Sime - CEO của công ty AgilityFeat.com có trụ sở tại Charlottesville,

bang Virginia, Hoa Kỳ, người đã đưa ra định nghĩa rất ngắn gọn về WebRTC như sau: “WebRTC là một tiêu chuẩn HTML5 cho mã hóa peer-to-peer (P2P) trao đổi video,

âm thanh và dữ liệu, trực tiếp giữa hai máy tính”

Các tính năng nổi bật nhất của WebRTC đó là được tích hợp trực tiếp vào trình duyệt,

và chúng ta dùng HTML5 và Javascript để sử dụng nó WebRTC không chỉ là một sảnphẩm hay một hàm API duy nhất Nó là một tập hợp rất nhiều các hàm, có thể được lậptrình viên sử dụng cho nhiều mục đích khác nhau Có hàm chỉ để làm những việc đơngiản như đòi quyền truy cập vào webcam và microphone của máy tính, có hàm phức tạphơn thì để thiết lập kết nối giữa hai người dùng với nhau, có hàm còn dùng để chia sẻmàn hình với người dùng khác Và có hàm để kết nối (gọi) video, đây là chức năng quantrọng nhất của WebRTC

Tuy nhiên, tất cả các hàm lập trình nằm trong bộ API có đặc điểm chung là thực thihầu hết các tác vụ theo thời gian thực Và nó không chỉ được dùng cho việc gọi videogiữa hai trình duyệt mà còn có thể thực hiện nhiều tác vụ khác, để hai hoặc nhiều ngườidùng liên lạc với nhau WebRTC được hỗ trợ chính thức bởi Google, Mozilla, Operacùng nhiều hãng khác

2.2.1 Sơ đồ kết nối giữa client

Kiến trúc của WebRTC khá đơn giản bao gồm các client kết nối với nhau thông quaserver signaling

Hình 1 Sơ đồ kết nối giữa clinet

2.2.2 Đặc điểm của webrtc

Công nghệ WebRTC có một số đặc điểm sau đây:

Chương 1 Các hàm API của WebRTC

WebRTC có ba loại hàm API thường được dùng:

getUserMedia: truy cập vào camera và microphone của người dùng RTCpeerConnection: gửi và nhận dữ liệu hình ảnh, giọng nói RTCdataChannel:

gửi và nhận dữ liệu không phải là hình ảnh, giọng nói ứng dụng/trình duyệt

Các trình duyệt web hỗ trợ 3 hàm AIP WebRTC trên đây (getUserMedia, RTCpeerConnection và RTCdataChannel) được liệt kê ở bảng dưới đây:

TÊN HÀM TRÌNH DUYỆT WEB HỖ TRỢ HÀM API

getUserMedia Chrome desktop 18.0.1008+; Chrome for Android 29+

 Opera 18+; Opera for Android 20+

 Opera 12, Opera Mobile 12 (dựa trên: Presto engine)

 Firefox 17+  Microsoft Edge

RTCPeerConnection  Chrome desktop 20+; Chrome for Android 29+

 Opera 18+; Opera for Android 20+

 Firefox 22+

RTCDataChannel  Chrome 25 (phiên bản thử nghiệm); Chrome 26+ (phiên

bản ổn định và có khả năng tương tác với Firefox);Chrome for Android 29+

 Opera 18+; Opera for Android 20+

 Firefox 22+

bảng 1 Các hàm của WebRTC

Để sử dụng các hàm lập trình WebRTC, các lập trình viên có thể sử dụng rất nhiềuloại ngôn ngữ lập trình quen thuộc: Nếu viết trang web thì họ có thể dùng JavaScript, nếuviết ứng dụng (App) cho Android thì dùng Java, viết cho iOS thì dùng Objective-C, cònviết App cho Windows thì dùng C++ Nếu gọi điện cho nhau bằng trình duyệt Chrometrên Android thì không cần cài thêm gì

Tuy nhiên, có sự khác biệt về số lượng hàm API WebRTC được hỗ trợ trong cáctrình duyệt Web Điều này làm giảm đi khả năng hoạt động của các ứng dụng WebRTC

Do đó, 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ặcApp 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ủaWebRTC, chưa kể đến rủi ro phát sinh lỗi cao hơn

Ngày 3/8/2016, Hiệp hội W3C đã đưa ra bản Dự thảo mới nhất của WebRTC1.0,

đề cập đến những thay đổi liên quan đến số lượng lớn các điều khiển cấp thấp truy cậpqua RTCRtpSender, RTCRtpReceiver, và RTCRtpTransceiver Bao gồm: Làm rõ hoạt

động khi setDirection() và làm rõ ảnh hưởng của RTCRtpReceiver.track.stop().Cụ thể:

- RTCRtpReceiver.track.stop(): dừng cuộc gọi đối tượng liên qua củaRTCRtpReceiver

- Khi setDirection() có hiệu lực: RTCRtpTransceiver.setDirection() là đề nghị

cách mới để thay đổi đối tượng cuộc gọi

- RTCRtpTransceiver.stop (): để dừng lại người gửi và người nhận

Như vậy, các hàm WebRTC vẫn đang được tiếp tục cập nhật chuẩn hóa

Chương 2 Chuẩn video

WebRTC chưa có chuẩn video thống nhất Đặc điểm nổi bật nhất của WebRTC là khảnăng kết nối video từ trình duyệt web của người sử dụng Nhưng hiện nay, các hãng trìnhduyệt cũng chưa thống nhất với nhau là chuẩn video nào sẽ được dùng cho WebRTC

Google và Mozilla thì muốn dùng VP8 hoặc VP9, một codec video do chính Google

phát triển theo mô hình mã nguồn mở Thực tế cho thấy, đối với trình duyệt web Chrome

50 trở lên, codec VP9 tốt hơn Nó hỗ trợ cho chất lượng tốt hơn trong truyền tải phươngtiện truyền thông nhờ khả năng dự phòng (RED), cơ chế FEC tương tác với ước lượngbăng thông và kiểm soát các thông số (NACK, POI, RTX, remb, ) trong trình duyệt,khả năng tương tác với các trình duyệt khác tốt hơn VP8 Do đó, VP9 cho độ phân giảicao hơn, giảm thiểu các lỗi (nhờ hỗ trợ cho Error Correction Forward)

Trong khi đó, Microsoft và một số công ty khác thì muốn đề xuất sử dụng H.264 hoặcH.265 cho WebRTC, vốn đang là codec được dùng phổ biến nhất hiện nay trên Internet

Và tất nhiên, H.264 lại thuộc quyền sở hữu của Hiệp hội MPEG LA và phải trả phí bảnquyền để sử dụng

Hiện nay, nhóm làm việc của Google gồm Niklas Blum, Justin Uberti và Per Ahgren

đã thực hiện được những cải tiến về hiệu suất, đó là trình duyệt Chrome đã có thể bớt thờigian kết nối trung bình từ 2 giây xuống còn 650ms cho một kết nối 1Mbps Họ cũng đanglàm việc để mang lại VP9 – codec video đến các thiết bị di động, nhờ đó sẽ cho phép đạtchất lượng video cao với yêu cầu băng thông ít hơn

Chương 3 Tính an toàn, bảo mật của công nghệ WebRTC

• Công nghệ WebRTC sử dụng giao thức bảo mật DTLS và SRTP

- DTLS (Datagram Transport Layer Security) cho phép các ứng dụng được thiết kế đểngăn chặn việc nghe trộm, giả mạo, hoặc tin nhắn giả mạo Các gói giao thức DTLS đảmbảo các ứng dụng không bị chậm trễ kết hợp với việc xử lý khi mất gói tiện ích và dữliệu

- Giao thức SRTP (Secure Real-time Transport Protocol) cung cấp tính bảo mật, tính toànvẹn và xác thực thông báo trong môi trường truyền thông (tiếng nói và hình ảnh ) Bằng

việc sử dụng thuật toán dẫn xuất khoá nguyên thuỷ, SRTP có khả năng tối thiểu hoá tínhtoán và sử dụng tài nguyên để sinh các khoá mật mã qua cơ chế quả lý khoá ngoài.

• Mã hóa là bắt buộc đối với tất cả các thành phần WebRTC, bao gồm các cơ chế báohiệu (signaling)

• WebRTC được không phải là một plugin: thành phần của nó chạy trong sandbox củatrình duyệt, các thành phần không yêu cầu cài đặt riêng, và được cập nhật bất cứ khi nàotrình duyệt được cập nhật

Sandbox là một kỹ thuật quan trọng trong lĩnh vực bảo mật có tác dụng cô lập các ứngdụng , ngăn chặn các phần mềm độc hại để chúng không thể làm hỏng hệ thống máytính , hay cài cắm các mã độc nhằm ăn cắp thông tin cá nhân của người sử dụng

Tóm tại, công nghệ WebRTC với những ưu điểm nổi bật sẽ mang lại các ứng dụngphong phú, chất lượng cao và chạy theo thời gian thực Công nghệ này có thể được pháttriển cho các trình duyệt, nền tảng di động, thiết bị Internet of Things, và cho phép tất cảchúng liên lạc với nhau thông qua một bộ giao thức chung

Hình 2: Kiến trúc của webrtc

Có 2 lớp riêng biệt (distinct layers):

 Browser deveopers sẽ quan tâm đến webrtc C++ API và các thành phần core sâuhơn của nó như Voice Engine, Video Engine, Transform Hay dễ hiểu hơn đó là âmthanh, video và kết nối mạng

 Web App developers sẽ quan tâm tới Web API

3.1.2 Your Web App

Một ứng dụng phát triển bởi các developer bên thứ 3 với video và audio chat, xâydựng dựa trên Web API để kết nối thời gian thực

3.1.3 Web API

Một API được sử dụng bởi các developer bên thứ 3, để phát triển web video

3.1.4 Webrtc Native C++ API

Một tầng API cho phép trình duyện dễ dàng thực thi Web API