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

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ 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 ứng dụng Web công việc đời sống Những tính người dùng ưa thích Blog (nhật ký web), mạng xã hội (Facebook, Twitter MySpace) hay Wiki (trang web cập nhật nội dung trực tuyến) công nghệ Web 2.0 tạo “các cộng đồng trực tuyến” nhờ khả kết nối động dễ dàng chia sẻ thông tin Web Công nghệ WebRTC (Web Real-Time Communications) phát triển cho phép liên lạc thời gian thực video, âm loại liệu khác WebRTC cho phép gọi điện video trình duyệt mà không cần đăng ký tài khoản, không cần cài thêm plugin Ngoài ra, nhiều loại ứng dụng phát triển dựa WebRTC 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 kiến thức quý báu suốt trình thực đề tài tạo điều kiện cho chúng em thực đề tài Mặc dù nỗ lực cố gắng chắn đề tài cịn nhiều thiếu sót, chúng em mong nhận đuợc góp ý, phê bình thầy, bạn để đề tài hồn thiệ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 :Tổng quan 1.1 Lí chọn đề tài 1.2 Khách thể đối tượng nghiên cứu, đối tượng khảo sát 1.3 Giới hạn phạm vi nghiên cứu 1.4 Điểm đề tài 1.5 Mục tiêu nhiệm vụ nghiên cứu Chương : Phương pháp nghiên cứu 2.1 Giới thiệu chung công nghệ webrtc 2.2 Webrtc gì? 10 2.2.1 Sơ đồ kết nối client 10 2.2.2 Đặc điểm webrtc 11 Chương : Dàn ý nội dung đề 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 gọi 18 3.2.3 Quy trình lấy SDP 19 3.2.4 Trao đổi ứng viên (candidate) 20 3.2.5 Bắt đầu thiết lập gọi 21 3.2.6 Kết thúc gọi 23 Chương :Kế hoạch, tiến độ thực đề 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 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 Sơ đồ kết nối clinet 12 Hình 2: Kiến trúc webrtc .16 Hình 3: Sơ đồ tác nhân .19 Hình 4: Quy trình lấy 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 thực gọi 23 Hình 24 Hình 24 Hình 10: Các bước kết thúc gọi 25 Chương Tổng quan 1.1 Lí chọn đề tài Hiện webrtc ứng dụng nhiều ứng dụng thịnh hành ngày facebook, zalo, skype, google duo, justtalk, tango,… Và điểm thú vị đại mà càn tìm hiểu vfa thực Nếu bạn biết nhiều thuận lợi đường làm ứng dụng sau Và dây lí mà chúng tơi chọn để nghiên cứu cho mơn đồ án kì Có nhiều điều thú vị mà tìm hiểu hứng thú Những tính tân tiến tiện lợi ứng ụng nhiều hầu nhưu, ứng dụng tích hợp có chổ đứng định thị trường ứng dụng công nghệ 1.2 Khách thể đối tượng nghiên cứu, đối tượng khảo sát - Khách thể: Ở chúng tơi nghiên cứu với tất 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: chia đối tượng nghiên cứu sau: + Các đối tượng trẻ: Đối tượng yêu cầu ứng dụng phải bắt mắt, đáp ứng lẫn nhìn họ tiếp cận nhiều công nghệ đại nên yêu cầu cao Trong giao diện, cách hành kèm tính mẻ phục vụ nhu cầu lớn họ + Các đối tượng trung niên, cao tuổi: Đối với độ tuổi lại yêu cầu giao diện tính dể dùng, dể sử dụng Vì phải vừa làm cho đơn giản hóa ứng dụng vừa đáp ứng nhu cầu đại giới trẻ Việc phải nhiều cho khâu xây dựng ứng dụng + Các đối tượng nhỏ tuổi: Vì ứng dụng có trẻ nhỏ nên hình ảnh hay quảng cáo không độ tuổi cấm tuyệt đối - Đối tượng khảo sát: Ở khảo sát đối tượng sinh viên, giáo viên hay phụ huynh nhu cầu mong muốn mà bạn muốn cho ứng dụng liên hệ online 1.3 Giới hạn phạm vi nghiên cứu Phạm vi nghiên cứu sinh viên, học sinh, phụ huynh hay người mà gặp cung cấp địa để kết nối với họ thực chạy chương trình Hạn chế ứng dụng không test nhiều vùng miền, nhiều quốc gia nên khơng tìm nhiều lỗi ứng dụng 1.4 Điểm đề tài Ngồi tính callvideo ban đầu xây dựng ngồi chúng tơi cịn tích hợp thêm tính callphone nhắn tin bên Ngồi cịn u cầu chia video hay âm bên A gọi đến 1.5 Mục tiêu nhiệm vụ nghiên cứu - Mục tiêu: Ứng dụng hoàn thiện sử dụng rộng rãi đồng thời nhiều người yêu thích ứng dụng - Nhiệm vụ nghiên cứu: + Nắm cốt lõi cách thức xây dựng, hoạt động WebRTC + Hiểu cách vận hành Chương Giới thiệu WebRTC 2.1 Giới thiệu chung công nghệ webrtc Ý tưởng phát triển WebRTC nhóm kỹ sư chịu trách nhiệm GoogleHangouts đưa từ năm 2009 Vào thời gian đó, để truyền tải video, hình ảnh web người ta thườ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 chuẩn riêng cho Đến năm 2010, Google mua lại hai cơng ty On2 Global IP Solutions (GIPS) để tiếp cận công nghệ truyền liệu thời gian thực làm tảng cho WebRTC codec kỹ thuật loại bỏ tiếng vang Vào tháng 5/2011, Google mắt dự án nguồn mở dành cho việc giao tiếp thời gian thực trình duyệt với nhau, từ lúc dự án mang tên WebRTC Song song đó, Hiệp hội W3C (World Wide Web Consortium) Tổ chức IETF (Internet Engineering Task Force) phát triển số giao thức để dùng cho việc việc kết nối thời gian thực, họ bắt tay tiếp tục hồn thiện sau kết hợp chúng vào WebRTC Ngày 27/10/2011, Hiệp hội W3C mắt “nháp” WebRTC Tháng 11/2011, Chrome 23 mắt, trở thành trình duyệt có tích hợp WebRTC từ bên Công nghệ WebRTC tiếp tục phát triển liên tục cập nhật Đến nay, vào ngày 22/3/2016, Google phát hành phiên Chrome 50 (trong Beta Channel) Theo đó, trình duyệt Chrome 50 có hỗ trợ chuẩn video H.264 (codec video) WebRTC Tiếp đó, ngày 29/8/2016, Mozilla phát hành phiên trình duyệt Firefox 49 Firefox 49 tăng cường hỗ trợ tiêu chuẩn WebRTC kiểm sốt băng thơng Các cải thiện quản lý băng thông bao gồm: cho phép cho phương tiện truyền thông chiều xử lý băng thông tốt Đồng thời, trình duyệt Firefox 49 cho phép kiểm tra NAT traversal topo NAT (Network Address Translation) khác Hiện nay, WebRTC tiếp tục phát triển chưa hoàn thiện Tuy nhiên, nhà nghiên cứu phát triển ứng dụng bắt đầu giới thiệu công nghệ hiệu số để truyền tải Một thiết bị nhận biến đổ tín hiệu số trở lại tín hiệu thơng qua giải nén âm để phát lại nội dung  Ilbc: Một narrowband speech codec cho voip streaming audio Sử dụng tần số khz với bitrate of 15.2 kbps cho 20ms khung 13.33 kbps cho 30ms khung Định nghĩa IETF rfcs 3951 3952  Opus: hỗ trợ biến bitrate mã hóa từ kbit/s tới 510 kbit/s, khung size từ 2.5 ms tới 60 ms Được định nghĩa IETF RFC 6176 Neteq cho Voice 3.1.11 Acoustic Echo Canceler (AEC) The Acoustic Echo Canceler phần mềm dựa thành phẫn xử lý tín hiệu xóa Trong real time, acoustic cho kết từ voice chạy tới mircrophone hoạt động 3.1.12 Noise Reduction (NR) Noise Reduction component phần mềm dựa thành phần xử lý tín hiệu, nhằm loại bỏ loại tiếng ồn kết hợp với voip (Hiss, fan noise, etc…) 3.1.13 Videoengine Videoengine framework video media chain cho video, từ camera tới mạng, từ mạng tới hình 3.1.14 VP8 Video codec từ dự án webm Nó phù hợp với RTC thiết kế cho độ trễ thấp (low latency) 3.1.15 Video Jitter Buffer Jitter Buffer động cho video Giúp che giấu ảnh hưởng jitter packet bị toàn chất lượng video 3.1.16 Image enhancements Ví dụ xóa tiếng ồn video từ ảnh quay webcam 17 Chương Triển khai xây dựng, kế hoạch tiến độ thực đề tài -Phương tiện code: Sử dụng trình biên dịch Submiletext -Thư viện: Sử dụng thư viện: Socket.io -Môi trường ảo hóa oracle vm vitualbox Thơng tin máy server:  Centos version  Apache 2.4.6  php 7.3.12  Ratchet websocket  WebRTC 3.1 Đăng kí người dùng Bước thực đơn giản với việc có tác nhân người dùng A, người dùng B signaling server.Server trung gian xử lý yêu cầu đăng kí hai bên (ví dụ lưu vào database).Nó đưa định liệu cho người dùng đăng kí hay khơng.Có hai trạng thái mà gửi cho người dùng bước đăng kí thành cơng đăng kí thất bại Hình mơ tả pha đăng kí người dùng 18 Hình 3: Sơ đồ tác nhân Code minh họa: Hình 4: Code signaling server 19 Code khởi tạo room client Code hàm getroom 20 3.2 Thực gọi Bước chủ yếu giới thiệu thực gọi.Ở bước peer phải thực số trao đổi định để đạt kết nối với KMS Các trao đổi trung gian qua Signaling Server lấy candidate thông qua ICE đứng bên cạnh đối tượng.Dưới mô tả chi tiết quy trình để thực gọi video Code thực gọi 21 3.3 Quy trình lấy SDP Hình 4: Quy trình lấy SDP Khi thực việc đăng kí thành cơng,để bắt đầu thiết lập gọi, bên cần biết thông số định.Đầu tiên, bắt đầu khởi tạo đối tượng WebRtcPeer ( nhắc qua chương 2).Sau ta bắt đầu thiết lập callback để lắng nghe SDP offer gửi Khi nhận SDP thành công, Peer A bắt đầu gửi yêu cầu cấp quyền truy cập số tài nguyên thiết bị tới người dùng.Nếu người dùng đồng ý, bắt đầu thực trình gửi thơng tin ban đầu từ Peer A ( SDP, đến từ đâu, muốn kết nối tới đâu…) đến signaling.Signaling có nhiệm vụ lưu lại thông tin bắt đầu thông báo tới trình duyệt B có muốn kết nối.Khi Peer B nhận thông báo bên A muốn kết nối, thiết lập tương tự Peer A lấy SDP offer truy cập thiết bị Khi Signaling có thơng tin hai Peer bắt đầu vào trình thiết lập gọi với KMS 22 3.4 Trao đổi ứng viên (candidate) Hình 5: Trao đổi ứng viên Quá trình song song với q trình đạt SDP, mục đích trình nhằm mở cách khác mà cách peer khác kết nối với A.Đầu tiên ta cần làm đăng kí lắng nghe candidate tới ICE peer A cách ta thiết lập callback OnIceCandidate ( option tạo đối tượng WebRtcPeer).Khi đó,ICE cho trình duyệt A thực chức tìm cách để kết nối với A Khi tìm được, gửi lại cho trình duyệt A thơng qua hàm callback OnIceCandidate.Bước trình duyệt A gửi lại cho signaling server, server đơn giản ủy quyền lại cho Kurento Media Sever (KMS) cách gọi addCandidate để yêu cầu thêm vào cách để kết nối với A (candidate).Vì KMS biết cách để kết nối với peer A.Việc tương tự với Peer B 23 Hình 6: Các trạng thái hoạt động Quá trình thực mà WebRtcEndpoint tạo bên KMS Khi ta cần biết cách để biết để kết nối với WebRtcEndpoint tương ứng Bằng cách thêm vào máy chủ ICE bên cạnh KMS ( STUN TURN) Nó nói cho KMS biết làm cách để kết nối với WebRtcEndpoint đó.Từ KMS gửi cách kết nối với WebRtcEndpoint (candidate) trở lại chỗ mà đăng kí mà máy chủ ICE gửi trả candidate tương ứng.Các candidate gửi trở lại peer qua Signaling làm trung gian.Các peer thực công việc cuối thêm candidate vào (bằng cách thực addCandidate đối tượng WebRtcPeer) q trình phải lặp lại nhiều lần Nếu trình trao đổi thành công, Peer biết cách để kết nối với WebRtcEndpoint KMS vừa tạo.Kết từ hai trình kể Peer KMS hiểu cách kết nối với 3.5 Bắt đầu thiết lập gọi Ngay sau B chấp nhận kết nối, bắt đầu thiết lập bước cần thiết để đạt gọi hai.Trọng phần bước thực Signaling, mô tả bước Signaling cần thực để thiết lập gọi 24 Hình 7:Các bước thực gọi Ở bước ta cần phải tạo kurentoClient cách gọi hàm kurento ( kurento cung cấp ) nhằm kết nối tới KMS.Sau kết nối với KMS,chúng ta cần gửi yêu cầu đến tạo pipeline, sử dụng đối tượng kurentoClient tạo trước gọi hàm create (được thiết kế để tương tác với KMS đề cập chương trước) với tham số MediaPipeline.Tiếp đó, sau có pipeline, cần hai WebRTCEndpoint cho hai trình duyệt tương ứng A B Mục đích việc để luồng media hoạt động KMS trao đổi với 25 Hình Mặc dù tạo hai WebRTCEndPoint cần phải làm điều kết nói chúng lại với nhau,việc kết nối thực hai WebRTCEndPoint Thực điều cách sử dụng đối tượng hai đối tượng WebRTCEndPoint thực gọi invoke với tham số ‘connect’ Việc thực với hai WebRTCEndPoint Hình Bước cuối việc thực thiết lập cuọc gọi việc trao đổi SDP với KMS.Bên phía signaling có hai SDP offer gửi cho từ lần trước.Cái signaling làm gọi sử dụng đối tượng WebRTCEndPoint mà KMS trả từ trước, gọi hàm processOffer với tham số SDP offer tương ứng với peer callback.Khi thực điều này, bên phía KMS đáp lại SDP answer gửi trả tương ứng với 26 peer.Sau nhận SDP answer, peer gọi processAnswer để xử lý SDP answer trả Từ peer tương tác với nhau, gửi/nhận liệu media qua KMS Code bắt đầu thực gọi 3.6 Kết thúc gọi Pha cuối quy trình ngừng gọi Khi có u cầu ngừng từ peer, peer kết thúc phiên tương tác cách ngắt kết nối camera gửi yêu cầu tới signaling, signaling tiếp tục gửi lại yêu cầu tới peer tương tác thực tương tự Tiếp theo signaling gửi tới KMS yêu cầu ngắt kết nối với hai peer giải phóng tài ngun, kết thúc phiên làm việc Hình mô tả phiên làm việc kết thúc tương tác 27 Hình 10: Các bước kết thúc gọi Code kết thúc gọi 28 Chương Kết luận 5.1 Kết luận Ngành Công nghệ thông tin đời thổi luồng gió vào tất lĩnh vực đời sống – xã hội, đặc biệt năm gần đây, phát triển nhanh chóng công nghệ phần cứng mở khung trời cho cơng nghệ phần mềm Vì giới quốc gia dù phát triển hay phát triển cố gắng áp dụng Tin học vào mặt đời sống xã hội Tin học ln có mặt lúc, nơi nhằm hỗ trợ cho ngành nghiên cứu đạt thành tựu to lớn để đại hóa quy trình quản lý sản xuất kinh doanh nhằm đạt hiệu kinh tế cao Chính vậy, thời gian gần ngành nghề trọng đến việc xây dựng phần mềm ứng dụng tin học việc trao đổi thông tin việc trao đổi phải nhanh, bảo mật, dễ sử dụng Ngoài việc nhanh mà chúng làm cho việc trao đổi thiết bị khơng cần thiết bị ứng dụng khác vấn đề mà công nghệ Bluetooth đời.Với mong muốn tìm hiểu cơng nghệ, kĩ thuật giúp đỡ thầy cô giáo khoa nên em hoàn thành đề tài “webrtc-xây dựng chương trình hội thảo từ xa ” Qua trình thực đề tài, em thu thập nhiều kiến thức bổ ích việc biết thêm công nghệ 3G nguồn mở Với quỹ thời gian có hạn đề tài thực tập tốt nghiệp, em bước đầu nghiên cứu làm để nhà cung cấp liệu phát thiết bị thành công Bên cạnh HTML5, WebRTC thứ giúp thay đổi giới Nó giúp việc liên lạc người dùng với trở nên dễ dàng hơn, tất thứ cần trình duyệt mà thơi khơng cần đến app hay plugin Đây điều hoàn toàn phù hợp bối cảnh thứ dịch chuyển lên sử dụng công nghệ web  Kết đạt được: Nắm công nghệ WebRTC, demo chương trình hội thảo từ xa sử dụng cơng nghệ WebRTC  Hạn chế: Vẫn chưa hiểu kiến thức chiều sâu phức tạp WebRTC  Hướng phát triển: Dựa sản phẩm có sẵn chúng tơi học hỏi đồng thời thêm hay chữa chưa tốt để hồn thiện cho sản phẩm 29 Do nhiều hạn chế thân, thời gian tìm hiểu đề tài cịn nhiều thiếu sót Vì em mong đóng góp ý kiến quý thầy cô bạn để em tiếp tục hồn thành đề tài 5.2 Hướng phát triển Để làm cho đề tài sinh động qua việc nghiên cứu tìm hiểu cơng nghệ webrtc em muốn nêu thêm vài ứng dụng xuất nước ta thời gian qua Để biết khơng có cơng nghệ webrtc đại mà qua biết nhiều nữa, nói webrtc vừa đời thành cơng lớn người phát triển ngày mạnh đời sống tượng “nóng” toàn giới Với phát triển ngày nhanh ngành cơng nghệ thơng tin khơng cần dùng công cụ lạc hậu để trao đổi thơng tin nữa, làm việc nhà quản lý hay trao đổi kinh doanh, thương mại Sự phát triển mạnh mẽ Viễn thông Việt Nam thời gian qua rút ngắn khoảng cách hàng chục năm so với nước phát triển, góp phần quang trọng vào tăng trưởng kinh tế, cải thiện đời sống người dân 30 *Tài liệu tham khảo: Sam Dutton, “Getting Started With WebRTC”, website: https://www.html5rocks.com/en/tutorials/webrtc/basics/ “A Study of WebRTC Security” website: http://webrtc-security.github.io/ Trang Web: https://webrtc.org/ 4.Google: google.com 31 ... khác vấn đề mà công nghệ Bluetooth đời.Với mong muốn tìm hiểu cơng nghệ, kĩ thuật giúp đỡ thầy cô giáo khoa nên em hoàn thành đề tài ? ?webrtc- xây dựng chương trình hội thảo từ xa ” Qua trình thực... thiện sau kết hợp chúng vào WebRTC Ngày 27/10/2011, Hiệp hội W3C mắt “nháp” WebRTC Tháng 11/2011, Chrome 23 mắt, trở thành trình duyệt có tích hợp WebRTC từ bên Công nghệ WebRTC tiếp tục phát triển... kết thúc gọi 28 Chương Kết luận 5.1 Kết luận Ngành Công nghệ thông tin đời thổi luồng gió vào tất lĩnh vực đời sống – xã hội, đặc biệt năm gần đây, phát triển nhanh chóng cơng nghệ phần cứng mở