KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG BÁO CÁO ĐỒ ÁN CƠ SỞ 4ĐỀ TÀI: NGHIÊN CỨU KỸ THUẬT VÀ XÂY DỰNG WEBRTC VIDEOCALL

 Báo cáo Đồ Án sở ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG - - BÁO CÁO ĐỒ ÁN CƠ SỞ ĐỀ TÀI: NGHIÊN CỨU KỸ THUẬT VÀ XÂY DỰNG WEBRTC VIDEOCALL Giảng viên hướng dẫn : ThS Nguyễn Anh Tuấn Sinh viên thực : Võ Văn Nhã Nguyễn Mậu Nhật Tường Lớp : 17IT3 Đà nẵng, tháng năm 2020  Báo cáo Đồ Án sở LỜI MỞ ĐẦU 1 Dưới phát triển không ngừng ngành công nghệ thông tin xu tiến đến cách mạng công nghiệp 4.0 Để đáp ứng nhu cầu việc đơn giản hóa việc giao tiếp, giải pháp hoàn thiện đem đến cho người lợi ích truyền thơng liên lạc Công nghệ WebRTC công nghệ phổ biến Được quan tâm giúp đỡ thầy cô giáo viên hướng dẫn ThS Nguyễn Anh Tuấn chúng em xin cảm ơn Khoa Công nghệ thơng tin nói chung xin cảm ơn thầy Tuấn nói riêng tạo điều kiện cho chúng em có hội tìm hiểu hồn thành tiểu luận, báo cáo WebRTC Trong giới hạn tiểu luận báo cáo kết thúc môn học, nội dung báo cáo trình bày theo yêu cầu Đề tài “xây dựng WebRTC video call” danh mục “Danh sách đề tài đồ án sở 5” Khoa Công Nghệ Thông Tin Truyền Thông - Đại học Đà Nẵng, bao gồm: Chương 1: Mạng ngang hàng(P2P) ứng dụng Chương 2: WebRTC xây dựng WebRTC video call Được giúp đỡ tận tình Thầy giáo hướng dẫn, chúng em hoàn thành nhiệm vụ đề Tuy nhiên, với thời gian kiến thức có hạn, báo cáo chắn chắn nhiều khiếm khuyết, em mong nhận góp ý chân thành Thầy giáo bạn Em xin chân thành cảm ơn! Sinh viên thực Võ Văn Nhã Nguyễn Mậu Nhật Tường  Báo cáo Đồ Án sở NHẬN XÉT …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… ……………………………………………………………………………………………………………  Báo cáo Đồ Án sở ĐẶT VẤN ĐỀ  Cùng với bùng nổ công nghệ, người dùng Internet, nhu cầu giao tiếp, chia sẻ thông tin, trao đổi liệu ngày lớn Về chia sẻ thơng tin liệu, giới có nhiều hình thức với cơng nghệ, giao thức, ứng dụng khác nhau, từ FTP, Email đến hình thức chia sẻ P2P (Peer-to-Peer) Bitorrent, ứng dụng dịch vụ cloud Dropbox, OneDrive, Google Drive… Về giao tiếp thời gian thực có ứng dụng messenger thành cơng người dùng chào đón Skype, Viber, Whatsapp, Line, Hangouts…Tuy nhiên, nhiều lý từ tốc độ, bảo mật an tồn thơng tin đặc biệt tiện dụng, tiếp tục có nghiên cứu để đơn giản hóa việc giao tiếp, chia sẻ liệu, hỗ trợ người dùng cách nhanh mà khơng địi hỏi phải thao tác nhiều hay cài đặt thêm plugin ứng dụng máy Cụ thể hơn, mong muốn sử dụng trình duyệt không để lướt web, check mail mà công cụ hỗ trợ tất nhu cầu từ chia sẻ file đến giao tiếp thời gian thực từ lâu nhen nhóm thực phát triển mạnh từ năm 2009 Ý tưởng ban đầu từ Google với dự án mã nguồn mở browser-based real-time communication, gọi WebRTC, mục đích tạo khả giao tiếp thời gian thực trình duyệt Đến WebRTC thiết kế để tích hợp với hệ thống truyền thông VoIP, SIP client khác nhau, chí mạng PSTN WebRTC tiếp tục phát triển, tổ chức tiêu chuẩn giới bàn thảo để chuẩn hóa giao thức, APIs trình duyệt để hỗ trợ WebRTC WebRTC vendor trình duyệt lớn hỗ trợ việc phát triển, đảm bảo trình duyệt kết nối trực tiếp với thực yêu cầu thời gian thực giao tiếp Điều mở giai đoạn Web, thực mang Web đến với giới viễn thông  Báo cáo Đồ Án sở CHƯƠNG MẠNG NGANG HÀNG (P2P) VÀ CÁC ỨNG DỤNG 1.1 TỔNG QUAN VỀ MẠNG NGANG HÀNG (P2P) 1.1.1 Giới thiệu - Mạng ngang hàng (P2P) hay gọi Peer-To-Peer bắt đầu xuất từ năm 1999 thu hút quan tâm giới công nghệ thông tin năm gần Đặc biệt, việc áp dụng mơ hình P2P việc xây dựng ứng dụng chia sẻ file (file sharing), video call, điện thoại tảng Internet (Internet-based telephony) dã đạt nhiều thành công - Hiện nay, ứng dụng P2P chiếm khoảng 50% (thậm chí 75%) băng thơng Internet - Các ứng dụng kiểu mạng là: Napster,Skype, BitTorrent, v.v 1.1.2 Định nghĩa - Mạng ngang hàng kiểu mạng thiết kế cho thiết bị có chức khả thiết bị - Mạng P2P khái niệm trạm (client) hay máy chủ (server) mà có khái niệm nốt (peers) đóng vai trị client server Hình abc Mơ hình mạng ngang hàng (P2P)  Báo cáo Đồ Án sở - Mạng ngang hàng hệ thống phân tán đặc biệt tầng ứng dụng, cặp điểm nút giao tiếp với thông qua giao thức định tuyến tầng mạng ngang hàng Mỗi điểm nút giữ đối tượng liệu nhạc, ảnh tài liệu, v.v… Mỗi điểm nút truy vấn tới đối tượng cần từ điểm nút khác thơng qua kết nối logic tầng mạng ngang hàng 1.1.3 So sánh mơ hình Client-Server mơ hình Peer-To-Peer: a Ưu điểm: Client-Server - Tốc độ truy cập nhanh - Khả mở rộng cao - Hoạt động với loại ứng dụng - Sử dụng với ứng dụng chia sẻ CSDL - Đáng tin cậy (có server riêng) Mức độ an toàn cao - - P2P Không cần Server riêng, nốt chia sẻ tài nguyên Khi mạng mở rộng khả hoạt động hệ thống tốt Rẻ Dễ cài đặt bảo trì Thuận lợi cho việc chia sẻ file, máy in, CD_ROM v.v… b Nhược điểm: Client-Server - Cần Server riêng (nghẽn cổ chai) - Đắt - Phức tạp việc bảo trì, trì hoạt động mạng P2P - Chậm - Không tốt cho ứng dụng CSDL - Kém tin cậy 1.1.4 Mục đích ứng dụng mạng P2P a Mục đích: Mạng ngang hàng hoạt động chủ yếu dựa vào khả tính tính tốn băng thơng máy tham gia không tập trung vào số nhỏ server trung tâm mạng thông thường Tất máy mạng tham gia đóng góp tài nguyên, bao gồm băng thơng, lưu trữ khả tính tốn nên nhiều máy tham gia khả mạng mạnh b Ứng dụng: Sự đời mạng ngang hàng tạo cách thức quản lí cho hàng loạt lĩnh vực ứng dụng như: giao tiếp (communication), chia sẻ file (flie sharing), băng thông (bandwidth), vấn đề lưu trữ (storage), chu trình xử lí (processor cycles)  Báo cáo Đồ Án sở CHƯƠNG WEBRTC VÀ XÂY DỰNG WEBRTC VIDEO CALL 2.1 TỔNG QUAN WebRTC nỗ lực để xây dựng framework mở có khả giao tiếp audio video thời gian thực, biến trình duyệt web thành tảng cho giao tiếp người với người Giao tiếp thời gian thực trình duyệt web có trứớc nhiên phải cài đặt phần mềm bên thứ ba lên trình duyệt web WebRTC mang lại hỗ trợ giao tiếp thời gian thực từ bên trình duyệt web nhà phát triển web sử dụng cách tự thông qua JavaScript API tiêu chuẩn Điều mang lại giao tiếp thời gian thực tính cho web, thúc đẩy đổi WebRTC (Web Real-Time Communications) tập hợp hàm lập trình dùng cho việc liên lạc thời gian thực video, âm loại liệu khác WebRTC giú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 phức tạp, ngồi chúng xài để phát triển game chơi trực tiếp trình duyệt nhiều loại ứng dụng khác WebRTC gì? , người ta dùng trở ngại hữu với chuẩn 2.2 SƠ LƯỢC LỊCH SỬ CỦA WEBRTC Ý tưởng phát triển WebRTC nhóm kỹ sư chịu trách nhiệm cho Google Hangouts đưa từ tận năm 2009 Vào thời gian đó, để truyền tải video, hình ảnh web 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, họ bắt đầu tự làm chuẩn riêng cho Đến năm 2010, Google thâu tóm hai cơng ty On2 Global IP Solutions (GIPS) để lấy công nghệ truyền liệu thời gian thực làm tảng cho WebRTC sau 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 Đến 27/10/2011, 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 WebRTC tiếp tục phát triển chưa hồn thiện cách thức  Báo cáo Đồ Án sở 2.3 KHÁI NIỆM WEBRTC WebRTC không sản phẩm hay hàm API Nó tập hợp nhiều hàm lập trình viên sử dụng cho nhiều mục đích khác Có hàm để làm việc đơn giản đòi quyền truy cập vào webcam microphone máy tính, có hàm phức tạp để thiết lập kết nối hai người dùng với nhau, có hàm cịn dùng để chia sẻ hình với người khác Và có hàm để hai người gọi video cho nhau, chức "nổi tiếng" WebRTC tính đến thời điểm Tuy nhiên, tất hàm lập trình nằm API có điểm chung vô quan trọng: chúng thực thi hầu hết tác vụ theo thời gian thực Đó lý chữ Real-Time xuất tên hàm Và khơng dùng cho việc gọi video hai trình duyệt mà người ta cịn làm nhiều chuyện khác, miễn chuyện có liên quan đến việc làm cho hai nhiều người dùng liên lạc với Trên trang web mình, WebRTC cho biết họ hỗ trợ thức Google, Mozilla, Opera nhiều đơn vị khác Mục đích cuối dự án nhằm "mang lại ứng dụng phong phú, chất lượng cao chạy theo thời gian thực phát triển lập trình viên cho trình duyệt, tảng di động, thiết bị Internet of Things, cho phép tất bọn chúng liên lạc với thông qua giao thức chung" Để sử dụng hàm lập trình WebRTC, lập trình viên xài nhiều loại ngơn ngữ lập trình quen thuộc: viết trang web họ quyền xài JavaScript, làm app cho Android dùng Java, viết cho iOS dùng Objective-C, cịn viết app cho Windows dùng C++ Gọi điện cho trình duyệt Chrome Android, khơng cần cài thêm Bên cạnh đó, CU-RTC-Web phần mở rộng Microsoft "cống hiến" cho WebRTC Nó viết tắt cho cụm từ Customizable, Ubiquitous Real Time Communication over the Web Giải thích thêm đóng góp mình, Microsoft cho biết tính "tùy biến" nằm chỗ ứng dụng phản hồi theo thời gian thực với chất lượng đường truyền Ví dụ, tốc độ mạng bị giảm đi, lập trình viên lệnh cho ứng dụng web chuyển sang dùng kênh âm thay cho kênh hình ảnh, chí ngừng hoạt động đến tín hiệu tốt trở lại Cịn thuộc tính "mọi lúc nơi" (Ubiquitous) có nghĩa người dùng giao tiếp với bạn bè mặc cho trình duyệt thiết bị sử dụng khác CU-RTC-Web hoạt động tốt sở hạ tầng mạng để đảm bảo tính tương thích cao  Báo cáo Đồ Án sở 2.4 KIẾN TRÚC CỦA WEBRTC Kiến trúc tổng quan webRTC sau: Hình 2.1 Kiến trúc WebRTC Có lớp riêng biệt (distinct layers):  Browser developers quan tâm đến WebRTC C++ API thành phần cốt lõi sâu Voice Engine, Video Engine, Transform Hay dễ hiểu âm thanh, video kết nối mạng  Web App developers quan tâm tới Web API  Báo cáo Đồ Án sở 2.5 THÀNH PHẦN TRONG CẤU TRÚC WEBRTC 2.5.1 Your web App  Một ứng dụng phát triển developer bên thứ với video audio chat, xây dựng dựa Web API để kết nối thời gian thực 2.5.2 Web API  Một API sử dụng developer bên thứ 3, để phát triển web video 2.5.3 WebRTC Native C++ API  Một tầng API cho phép trình duyệt dễ dàng thực thi Web API 2.5.4 Transport / Session  Các session componnent xây dựng bời việc sử dụng lại component từ libjingle, không yêu cầu sử dụng giao thức xmpp/jingle  Transport: cung cấp chức kết nối với thành phần khác tham gia WebRTC (STUN, TURN, ICE )  Session: đóng vai trị điều khiển hoạt động ứng dụng 2.5.5 RTP Stack  Một network stack cho RTP (Real Time Protocol) 2.5.6 STUN/ICE  Một thành phần cho phép gọi sử dụng STUN ICE để thiết lập kết nối thông qua loại mạng khác 2.5.7 Session Management  Một lớp session trừu tượng (abstracted session layer) cho phép thiết lập gọi lớp quản lý 2.5.8 VoiceEngine  VoiceEngine framework cho audio media chain, từ card âm tới mạng  Báo cáo Đồ Án sở 2.9 CÁC ĐỊNH DẠNG GÓI TIN 2.9.1 SESSION DESCRIPTION  chuẩn mô tả thông số kết nối độ phân giải, định dạng, codecs, mã hóa… Điều làm cho peer hiểu liệu truyền Đây thực chất meta-data miêu tả nội dung liệu media  Khi bắt đầu q trình truyền tín hiệu, thông điệp “offer” tạo người bắt đầu gọi Thông điệp “offer” bao gồm định dạng SDP (Giao thức mô tả phiên - tiêu chuẩn mô tả kết nối ngang hàng SDP chứa codec , địa nguồn thông tin thời gian âm video) chuyển đến người nhận Người nhận trả “offer” thông điệp “answer”, bao gồm định dạng SDP  Trường liệu SDP: Type: Loại tin nhắn (“video-offer” “video-answer”) Name: Tên người dùng người gửi Target: Tên người dùng người nhận mô tả (nếu người gọi gửi tin nhắn, điều định callee ngược lại) SDP: Chuỗi SDP (Giao thức mô tả phiên) mô tả đầu cuối cục kết nối theo quan điểm người gửi (hoặc đầu cuối kết nối từ quan điểm người nhận) 2.9.2 ICE CANDIDATES  chuẩn sử dụng để thiết lập kết nối các peer internet Mặc dù WebRTC kết nối trực tiếp Peer-to-Peer, thực tế gặp phải vấn đề NAT (Network Address Translation) gây khó khăn kết nối ICE cố gắng thiết lập kết nối cách tìm đường tốt cho việc kết nối  Mô tả phương thức mà peer gửi đến để sử dụng giao tiếp Mỗi peer gửi ICE candicates theo thứ tự phát tiếp tục gửi hết đề xuất, phương tiện bắt đầu streaming Mỗi thông điệp ICE candicates bao gồm trường sau: Type: Loại tin nhắn (ví dụ: “new-ice-candidate”) Target: Tên người dùng (máy chủ gửi tin nhắn cho người dùng) Candicate: Chuỗi SDP candicates, mô tả phương thức kết nối đề xuất 16  Báo cáo Đồ Án sở 2.10 CÁC BƯỚC TẠO WEBRTC I Kết nối WEBRTC: Hình 2.2 Kết nối WebRTC II Các bước kết nối WebRTC: Sử dụng getUserMedia API để truy cập vào camera microphone Lấy thông tin network địa IP, ports trao đổi thơng tin với peer khác (những peer mà muốn connect tới) để tạo connection (kết nối) có bị ngăn cản NATs hay firewalls Sau dùng RTCPeerConnection RTCDataChannel để voice call/ video call chia sẻ liệu sau có kết nối peer-to-peer 17  Báo cáo Đồ Án sở 2.11 CƠ CHẾ GỌI VIDEO CALL TRONG WEBRTC 2.11.1 CƠ CHẾ GỌI WEBRTC Mỗi peer phải thiết lập địa IP public “Kênh” (channel) liệu signaling tự động tạo để xác định peer hỗ trợ đàm phán peer-topeer thiết lập phiên (do linh động WebRTC tiến trình signaling khơng cụ thể hóa tiêu chuẩn, vài giao thức khơng cần đến chế “kênh” mà giao tiếp được) Một nhiều peer kết nối vào “kênh” peer giao tiếp trao đổi thơng tin phiên Về bản, peer khởi tạo ban đầu gửi “lời đề nghị” (offer) sử dụng giao thức signaling chẳng hạn Session Initiation Protocol (SIP - Giao thức khởi tạo phiên) SDP Người khởi tạo chờ để nhận “câu trả lời” (answer) từ người nhận kết nối với “kênh” Khi nhận câu trả lời, tiến trình diễn để xác định trao đổi giao thức ứng viên ICE tốt (Interactive Connectivity Establishment - Thiết lập kết nối tương tác) mà peer thu thập Một chọn ứng viên ICE tối ưu có nhiều thứ theo sau chấp nhận, bao gồm: metadata cần thiết, định tuyến mạng (địa IP port) thông tin media thường dùng để giao tiếp với peer Phiên mạng socket mạng peer sau thiết lập hồn chỉnh kích hoạt Tiếp đó, luồng liệu local endpoint kênh liệu tạo peer, liệu đa phương tiện cuối chuyển theo đường sử dụng công nghệ giao tiếp chiều Nếu tiến trình đồng ý chấp nhận ứng viên ICE tốt bị thất bại, nguyên nhân tường lửa kỹ thuật NAT dùng, giải pháp dự phịng sau sử dụng server TURN dạng điểm chuyển tiếp thay Tiến trình dùng server hoạt động người trung gian chuyển tiếp liệu truyền qua lại peer Lưu ý giao tiếp peer-to-peer thực thụ peer truyền liệu chiều trực tiếp đến với Khi sử dụng giải pháp dự phòng TURN để giao tiếp, peer không cần phải biết làm để liên lạc truyền liệu đến bên Thay vào đó, cần biết server TURN public để gửi nhận liệu đa phương tiện theo thời gian thực xuyên suốt phiên giao tiếp (Các server TURN cần phải vững chắc, có băng thơng rộng, khả xử lý xử lý lượng lớn liệu tiềm tàng) 18  Báo cáo Đồ Án sở 2.11.2 VÍ DỤ Hình 2.4 Cơ chế gọi video call WebRTC  Cơ chế gọi video call WebRTC mô tả sau: Đầu tiên, có signalling server A B biết số IP A khởi tạo mediaStream gửi message tới Signalling Server Signalling Server transfer message gửi đến B B nhận message khởi tạo local mediaStream B gửi trả message cho Signalling Server server sau transfer gửi đến A Sau đó, A khởi tạo đối tượng RTCPeerConnection tạo createOffer Khi tạo thành công, A nhận thông tin trả RTCSessionDescription Trong hàm trả về, A gọi setLocalDescription sau gửi session cho B thông qua Signalling Server, loại session “OFFER” B nhận message, tạo RTCPeerConnection gọi hàm setRemoteDescription với thơng tin A Sau đó, gọi createAnswer 10.Hàm createAnswer trả thông tin RTCSessionDescription B, sau gọi hàm setLocalDescription gửi message answer cho A 11.Khi nhận SessionDescription B A làm tương tự B, setRemoteDecription 12 Hoàn thành thiết lập kết nối Peer-To-Peer 19  Báo cáo Đồ Án sở 2.12 CÔNG DỤNG CỦA WEBRTC Một trang web biết đến nhiều giới lập trình viên WebRTC Appear.in mắt hồi năm 2012 Dịch vụ hỗ trợ người dùng tạo phịng chat video nhanh chóng cách dùng Chrome Firefox gốc, không cần phải cài thêm plugin Thậm chí người ta cịn khơng cần phải đăng nhập hay tạo tài khoản app chat video Và khơng có Appear.in xài WebRTC Skype for Web, Facebook Messenger sử dụng hàm để hoạt động, cịn Citrix phát triển giải pháp GoToMeeting để người dùng doanh nghiệp ứng dụng việc gọi video vào công việc ngày cách dễ dàng WebRTC xài để tạo game nhiều người chơi mà khơng cần cài thêm, người ta cần xài trình duyệt có hỗ trợ WebRTC đủ Hầu hết trị tựa game giải trí nhẹ nhàng thơi, có vài tên bật The Hobbit: The Battle for Five Armies mắt cuối năm ngoái Bằng cách dùng WebRTC kết hợp với hàm WebGL chuyên dùng xử lý đồ họa, nhà phát triển game The Hobbit nói tạo khơng gian thời trung cổ để người chơi đánh với người khác, không thua so với game online hạng nhẹ Nói tóm lại, WebRTC sử dụng cho nhiều mục đích, từ việc truyền tải video, âm gửi liệu theo thời gian thực hai nhiều thiết bị với mà không thiết phải qua server trung gian Điều giúp giảm độ trễ việc truyền tải, giảm độ phức tạp phát triển ứng dụng giảm chi phí vận hành (vì khơng phải trả tiền thuê server, tiền điện, tiền bảo dưỡng ), kéo theo giá bán dịch vụ có thấp 20  Báo cáo Đồ Án sở 2.13 SỰ HỖ TRỢ TỪ TRÌNH DUYỆT Chrome Firefox hai trình duyệt hỗ trợ mạnh cho WebRTC, khơng có lạ mà WebRTC ủng hộ mạnh mẽ Google Mozilla Opera cho phép chạy hầu hết tính quan trọng bạn chia sẻ hình cho người khác Đứng cuối bảng có lẽ IE Safari với việc hỗ trợ cho WebRTC Nhưng nói tóm lại hàm chưa hỗ trợ cách đầy đủ từ hãng trình duyệt, Chrome từ Google khơng thể tương thích 100% hàm API có WebRTC Nhưng hãng khơng hỗ trợ khơng có nghĩa hồn tồn khơng thể xài WebRTC Vẫn có plugin cài thêm từ bên ngồi vào để giúp trình duyệt tương thích tốt hơn, lúc thuận lợi khơng cịn Điểm tuyệt vời WebRTC phải hỗ trợ sẵn từ trình duyệt để người ta khơng cần cài thêm plugin mà Tóm lại, trình duyệt lớn sau có hỗ trợ WebRTC Phiên ghi phiên triển khai WebRTC, cịn chúng update lên  PC     o Google Chrome 23 o Mozilla Firefox 22 o Opera 18 Android o Google Chrome 28 (Enabled by default since 29) o Mozilla Firefox 24 o Opera Mobile 12 Chrome OS Firefox OS Ios o Bowser 21  Báo cáo Đồ Án sở 2.14 SỰ AN TOÀN CỦA WEBRTC WebRTC xem bước tiếp nối cho Adobe Flash, vốn xài để giao thời gian thực trình duyệt Flash tiếng lỗ hổng bảo mật khiến người dùng dễ bị công hacker hay malware Đây lý mà Steve Jobs nhắc đến kể định khơng mang Flash lên iPhone May mắn WebRTC bị vấn đề thế, khơng phải phần mềm cài thêm từ bên Flash plugin, WebRTC khơng Nó tập hợp hàm API lập trình viên sử dụng mà thơi nên khó bị khai thác Flash Nhưng nói khơng có nghĩa WebRTC không gặp vấn đề bảo mật Hồi cuối năm ngoái người ta phát họ tìm thấy địa IP thực người dùng VPN cách tận dụng vài đoạn mã JavaScript có xài hàm API WebRTC Người ta xài VPN thường với mục đích khơng để lộ IP thực mà Hiện chưa có cập nhật vụ việc này, ngồi trừ lời khuyên tắt WebRTC 22  Báo cáo Đồ Án sở 2.15 TRỞ NGẠI CỦA WEBRTC Như nói trên, WebRTC phát triển giai đoạn nháp chưa hoàn tất nên việc hỗ trợ cho lập trình viên cần giúp đỡ cịn nhiều khó khăn, tài liệu chưa có cách đầy đủ Ngồi ra, hãng trình duyệt chưa thống với chuẩn video dùng cho WebRTC Google Mozilla muốn xài VP8 VP9, codec video Google phát triển theo mơ hình mã nguồn mở xài mà khơng phải đồng Trong đó, Microsoft số cơng ty khác muốn đề xuất xài H.264 H.265 cho WebRTC, vốn codec xài phổ biến giới Internet Tuy nhiên, H.264 lại thuộc quyền sở hữu hiệp hội MPEG LA phải trả phí quyền để sử dụng Thực chất nhóm chịu trách nhiệm xây dựng WebRTC muốn xài VP8 VP9 so với H.26x họ muốn né vấn đề quyền Tuy nhiên, để có hiệu chất lượng giao thời gian thực tốt thiết bị, thiết bị di động, phải cần đến tăng tốc phần cứng Tính đến thời điểm có H.264 hỗ trợ tăng tốc phần cứng cách rộng rãi mà Vấn đề cuối khác biệt số lượng hàm API WebRTC hỗ trợ trình duyệt khác Vấn đề nói cho bạn nghe Điều làm giảm khả hoạt động ứng dụng WebRTC, nên lập trình viên phải dành nhiều công sức để tinh chỉnh lại trang web app cho phù hợp với trình duyệt, phần giảm lợi ích cốt lõi WebRTC, chưa kể đến rủi ro phát sinh lỗi cao 23  Báo cáo Đồ Án sở CHƯƠNG 3XÂY DỰNG TRANG WEB VÀ DEMO 3.1 MỘT SỐ TRANG TRONG WEB a Trang index.html: i Giới thiệu trang web ii.Khởi tạo phòng với mã id, mã id người dùng tự đặt random b Trang call.html: i Chạy camera ii Kết nối peer to peer iii Chức coppy đường link trang web iv Thực gọi thoại 3.2 MỘT SỐ HÀM VÀ CÁC CHỨC NĂNG TRONG WEBRTC a Hàm startWebRTC: i ii iii iv v vi Hiển thị video người dùng Bắt đầu gọi webRTC Gửi message đến peer khác Nếu người dùng kết nối tạo createOffer Nhận message “offer” từ peer khác tạo createAnswer Hiển thị video stream người nhận b Hàm chuyển địa theo mã id: Ramdom mã đặt người dùng c Nút coppy: i ii Hiển thị đường link page với mã id phòng tạo Coppy hiển thị alert coppy thành công 24  Báo cáo Đồ Án sở 3.3 LẬP TRÌNH a Trang index.html: i Nút tạo id phòng: $('#randomNum').click(function () { var idRooom = Math.floor(Math.random() * 0xFFFFFF).toString(16); //const roomHash = location.hash.substring(1); $('#num').val(idRooom); }); $('#runWeb').click(function () { var num = $('#num').val(); if (num == 0) { alert("Moi nhap id phong!!!"); } else { window.location = ' /call.html#'+num; } }); b Trang call.html: i Hàm startWebRTC: function startWebRTC(isOfferer) { pc = new RTCPeerConnection(configuration); // 'onicecandidate' notifies us whenever an ICE agent needs to deliver a // message to the other peer through the signaling server pc.onicecandidate = event => { if (event.candidate) { sendMessage({ 'candidate': event.candidate }); } }; // If user is offerer let the 'negotiationneeded' event create the offer if (isOfferer) { pc.onnegotiationneeded = () => { pc.createOffer().then(localDescCreated).catch(onError); } } // When a remote stream arrives display it in the #remoteVideo element pc.ontrack = event => { const stream = event.streams[0]; if (!remoteVideo.srcObject || remoteVideo.srcObject.id !== stream.id) { remoteVideo.srcObject = stream; } }; 25  Báo cáo Đồ Án sở navigator.mediaDevices.getUserMedia({ audio: true, video: true, }).then(stream => { // Display your local video in #localVideo element localVideo.srcObject = stream; // Add your stream to be sent to the conneting peer stream.getTracks().forEach(track => pc.addTrack(track, stream)); }, onError); // Listen to signaling data from Scaledrone room.on('data', (message, client) => { // Message was sent by us if (client.id === drone.clientId) { return; } if (message.sdp) { // This is called after receiving an offer or answer from another peer pc.setRemoteDescription(new RTCSessionDescription(message.sdp), () => { // When receiving an offer lets answer it if (pc.remoteDescription.type === 'offer') { pc.createAnswer().then(localDescCreated).catch(onError); } }, onError); } else if (message.candidate) { // Add the new ICE candidate to our connections remote description pc.addIceCandidate( new RTCIceCandidate(message.candidate), onSuccess, onError ); } }); } ii Nút coppy: $('.btnCop').click(function () { var copyText = document.getElementById("number"); copyText.select(); copyText.setSelectionRange(0, 99999); document.execCommand("copy"); alert("Copied the text: " + copyText.value); }); 26  Báo cáo Đồ Án sở 3.4 KẾT QUẢ ĐẠT ĐƯỢC a Trang index.html: Hình 3.1 Trang index.html b Trang call.html: Hình 3.2 Trang call.html 27  Báo cáo Đồ Án sở KẾT LUẬN  Qua trình nghiên cứu thực đề tài, thân tiếp thu nhiều kiến thức WebRTC lập trình NodeJs Qua việc thực đề tài, nhóm chúng em rút số thành hạn chế sau: Kết đạt  Phân tích đầy đủ u cầu tốn  Hiểu rõ thêm chất việc gọi thoại video call WebRTC, trình truyền gọi peer WebRTC thông qua việc gửi nhận thông điệp peer  Xây dựng web gọi peer khác dựa mã id theo random tự đặt Hạn chế  Chưa mở rộng cho việc gọi nhiều – nhiều  Không ổn định rejoin nhiều Hướng phát triển  Ứng dụng phần code thực làm nhân cho toán thực tế; lĩnh vực xây dựng app web  Phát triển gọi với nhiều người dùng lúc  Hoàn thiện sản phẩm, thêm nhiều chức  Xây dựng giao diện thẩm mĩ thân thiện  Dễ dàng sử dụng  Bảo mật thông tin  Thương mại sản phẩm Kết lại, lần đầu chúng em tiếp cận với kỹ thuật webRTC nên kết nghiên cứu chưa thoả mãn mong muốn đặt thân Thầy giáo Rất mong, nhận trao đổi, đóng góp hướng dẫn Thầy bạn 28  Báo cáo Đồ Án sở TÀI LIỆU THAM KHẢO  Trang chủ webRTC Tìm hiểu từ số mã nguồn từ GitHub số trang web 29  Báo cáo Đồ Án sở MỤC LỤC  LỜI MỞ ĐẦU CHƯƠNG MẠNG NGANG HÀNG (P2P) VÀ CÁC ỨNG DỤNG 1.1 Tổng quan mạng ngang hàng (p2p) CHƯƠNG WEBRTC VÀ XÂY DỰNG WEBRTC VIDEO CALL 2.1 Tổng quan .6 2.2 Sơ lược lịch sử webrtc 2.3 Khái niệm webrtc 2.4 Kiến trúc webrtc .8 2.5 Thành phần cấu trúc webrtc 2.6 Các thành phần kết nối webrtc 12 2.7 Các api webrtc giao tiếp p2p 14 2.8 Signalling, session, protocol .15 2.9 Các định dạng gói tin 16 2.10 Các bước tạo webrtc 17 2.11 Cơ chế gọi video call webrtc 18 2.12 Công dụng webrtc 20 2.13 Sự hỗ trợ từ trình duyệt 21 2.14 Sự an toàn webrtc .22 2.15 Trở ngại webrtc 23 CHƯƠNG XÂY DỰNG TRANG WEB VÀ DEMO 24 3.1 Một số trang web .24 3.2 Một số hàm chức webrtc .24 3.3 Lập trình .25 3.4 Kết đạt 27 KẾT LUẬN .28 30