Đồ án phát triển ứng dụng hội họp trực tuyến dựa trên công nghệ web rtc

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN PHÁT TRIỂN ỨNG DỤNG HỘI HỌP TRỰC TUYẾN DỰA TRÊN CƠNG NGHỆ WEB-RTC Mơn: Đồ án Lớp: SE122.N21.PMCL Giảng viên: Nguyễn Công Hoan Sinh viên: Phạm Quang Việt – 20522153 Thành phố Hồ Chí Minh, tháng năm 2023 Mục lục Chương 1: Tổng quan 1.1 Mục đích nghiên cứu 1.2 Đối tượng nghiên cứu 1.3 Phạm vi đề tài Chương 2: Cơ sở lý thuyết công nghệ 2.1 Công nghệ WebRTC 2.1.1 Giới thiệu WebRTC 2.1.2 Kiến trúc WebRTC 2.1.3 Lợi ích WebRTC 10 2.1.4 Nhược điểm WebRTC 11 2.2 Công nghệ Agora 11 2.2.1 Điểm bật Agora so với WebRTC 12 2.2.2 Các khái niệm Agora SDK 13 2.2.3 Video calling SDK 14 2.3 Nodejs 15 2.4 Socket.io 16 2.5 React Native 17 Chương 3: Phân tích yêu cầu hệ thống 19 3.1 Yêu cầu chức 19 3.2 Yêu cầu phi chức 19 3.3 Phân tích use case 20 3.3.1 Sơ đồ use case 20 3.3.2 Danh sách tác nhân hệ thống 20 3.3.3 Danh sách use case 20 3.3.4 Đặc tả use case 21 3.3.4.1 Tham gia vào phòng tạo 21 3.3.4.2 Gửi tin nhắn 21 3.3.4.3 Rời khỏi phòng họp 22 3.3.4.4 Tạo phòng họp 23 3.3.5 Sơ đồ 3.3.4.5 24 Tham gia vào phòng tạo 24 3.3.4.6 Gửi tin nhắn 24 3.3.4.7 Tạo phòng họp 25 Chương 4: Triển khai hệ thống 4.1 26 Sơ đồ triển khai 26 4.1.1 React Native App 26 4.1.2 NodeJS Authentication Service 26 4.1.3 Agora API Provider 27 4.1.4 Java Spring Service with Socket API 27 4.2 Phương thức triển khai 27 4.2.1 Phương pháp quản lý triển khai 27 4.2.2 Công nghệ hỗ trợ triển khai 28 Chương 5: Thiết kế giao diện ứng dụng 30 5.1 Giao diện trang chủ 30 5.2 Giao diện nhập meeting code 30 5.3 Giao diện meeting room có user 32 5.4 Giao diện meeting room có user 33 5.5 Giao diện meeting room có bắt đầu meeting 34 5.6 Giao diện trò chuyện 35 5.7 Giao diện rời khỏi họp 36 Chương 6: Kết luận hướng phát triển 37 6.1 Kết đạt 37 6.2 Hạn chế 37 6.3 Hướng phát triển 37 Tài liệu tham khảo 39 Chương 1: Tổng quan 1.1 Mục đích nghiên cứu Hãy tưởng tượng ngày mà điện thoại, máy tính, tivi, kết nối trực tiếp với thực gọi thông qua tảng chung Việc giao tiếp trở nên dễ dàng điều thay phương phức liên lạc có Đó mục tiêu mà dự án WebRTC theo đuổi, WebRTC kỳ vọng tạo bước ngoặt lớn lĩnh vực truyền thông đa phương tiện Điểm đột phá WebRTC ta tham gia hội thoại trình duyệt mà khơng cần cài thêm phần mềm hay plugin khác Nó chuẩn hóa cấp độ API W3C cấp độ giao thức IETF, hỗ trợ trình duyệt Google Chrome, Mozilla Firefox Opera PC Android Ngồi WebRTC cịn hỗ trợ Chrome OS Tính đến thời điểm tại, có tỷ thiết bị đầu cuối hỗ trợ WebRTC, dự báo tăng lên tỷ vào năm 2016, có khoảng 1,5 tỷ người dùng thường xuyên WebRTC hoạt động thiết bị có cài trình duyệt hỗ trợ WebRTC Ở góc độ nhà phát triển, khơng có WebRTC, việc tạo ứng dụng RTC địi hỏi phải nhiều công sức từ việc lấy liệu từ thiết bị camera, microphone đến việc thiết lập phiên, xử lý tín hiệu, truyền tín hiệu,… Nhưng với WebRTC, tất công việc để tạo hội thoại nằm vài chục dòng lệnh Việc phát triển ứng dụng với chức gọi điện, video chat chia sẻ file, đơn giản dùng WebRTC kết hợp JavaScript HTML5.2 Ở góc độ người sử dụng, sử dụng WebRTC cần thông qua trình duyệt Web Tính sẵn sàng cao cho phép thực gọi mà không cần đăng ký tài khoản hay cài đặt thêm thành phần trình duyệt có hỗ trợ WebRTC Ví dụ, hai người dùng cần truy cập vào đường dẫn web để gọi video với sử dụng trình duyệt Google Chrome hay Mozilla Firefox Với ưu điểm kể trên, việc tìm hiểu hệ thống hội họp trực tuyến thời gian thực sở giải pháp kỹ thuật WebRTC ứng dụng giải pháp kỹ thuật vào thực tế vấn đề cần thiết 1.2 Đối tượng nghiên cứu Các ứng dụng gọi video trở thành công cụ thiết yếu cho giao tiếp cá nhân nghề nghiệp giới ngày Với việc áp dụng rộng rãi hình thức làm việc từ xa học tập từ xa, nhu cầu giải pháp liên lạc qua video chất lượng cao đáng tin cậy tăng lên nhanh chóng Để đáp ứng nhu cầu này, nhiều tổ chức công ty phát triển ứng dụng gọi video Agora WebRTC Mục tiêu nghiên cứu dự án ứng dụng gọi video sử dụng Agora WebRTC tập trung vào việc cung cấp cho người dùng trải nghiệm liên lạc liền mạch hiệu Điều bao gồm cung cấp truyền video âm chất lượng cao, tạo giao diện thân thiện với người dùng, đảm bảo tính bảo mật quyền riêng tư liệu người dùng, tối ưu hóa hiệu suất khả mở rộng ứng dụng, giúp ứng dụng truy cập nhiều loại thiết bị tảng liên tục cải thiện trải nghiệm người dùng Một mục tiêu dự án ứng dụng gọi video cung cấp đường truyền âm hình ảnh chất lượng cao Điều yêu cầu triển khai công nghệ thuật tốn xử lý hiệu giao tiếp thời gian thực, chẳng hạn độ tin cậy mạng, loại bỏ tiếng vang triệt tiêu tiếng ồn Ứng dụng phải thiết kế để cung cấp khả truyền tải âm video rõ ràng mượt mà, điều kiện mạng có băng thông thấp chất lượng thấp Một mục tiêu quan trọng khác tạo giao diện thân thiện với người dùng, giúp người dùng dễ dàng bắt đầu tham gia vào gọi video phiên trò chuyện Điều yêu cầu sử dụng yếu tố thiết kế trực quan dễ tiếp cận, chẳng hạn biểu tượng, nút menu rõ ràng tích hợp tính chia sẻ hình, chia sẻ tệp trò chuyện văn Giao diện nên thiết kế để nhiều người dùng truy cập sử dụng được, trình độ kỹ chuyên môn kỹ thuật họ Đảm bảo tính bảo mật quyền riêng tư liệu người dùng mục tiêu quan trọng dự án ứng dụng gọi video Khi lượng thông tin cá nhân thông tin nhạy cảm truyền qua giao tiếp video tăng lên, điều cần thiết phải đảm bảo liệu bảo vệ phiên giao tiếp an toàn Điều yêu cầu triển khai giao thức bảo mật mã hóa mạnh, chẳng hạn SSL/TLS, để bảo vệ liệu người dùng đảm bảo phiên giao tiếp bảo vệ khỏi bị hack mối đe dọa bảo mật khác 1.3 Phạm vi đề tài Đề tài nghiên cứu phần mềm hỗ trợ viêc hội họp trực tuyến cho cá nhân cho tổ chức nhỏ, sử dụng công nghệ WebRTC thư viện Agora Đề tài nghiên cứu xây dựng để đáp ứng nhu cầu hội họp như:  Hội họp trực tuyến video thời gian thực  Gửi tin nhắn cho người hội họp  Hội họp lúc với nhiều người nhiều nơi khác mặt địa lý  Phân tích nghiên cứu thư viện Agora ứng dụng vào hệ thống hội họp trực tuyến Đề tài thử nghiệm môi trường làm việc nhóm nhỏ người sử dụng Sau mở rộng rãi với nhiều khách hàng Chương 2: Cơ sở lý thuyết công nghệ 2.1 Công nghệ WebRTC 2.1.1 Giới thiệu WebRTC WebRTC (Web Real-time Communication), hay Giao tiếp thời gian thực web, công nghệ cho phép giao tiếp ngang hàng, thời gian thực trực tiếp trình duyệt web mà khơng cần plugin phần mềm bổ sung Nó cung cấp giải pháp hoàn chỉnh cho giao tiếp âm thanh, video liệu trình duyệt, trình duyệt ứng dụng gốc WebRTC bắt đầu phát triển vào năm 2011 với hợp tác Google, Mozilla Opera Software Mục tiêu tạo tiêu chuẩn cho giao tiếp thời gian thực hỗ trợ nguyên trình duyệt web mà không cần plugin phần mềm bổ sung Các điểm bật q trình phát triển WebRTC: ● Bản phát hành lần đầu (2012): Phiên đặc tả WebRTC phát hành vào năm 2012, cung cấp tiêu chuẩn cho giao tiếp thời gian thực trình duyệt Điều cho phép nhà phát triển bắt đầu xây dựng ứng dụng dựa WebRTC tạo tiền đề cho việc nhà cung cấp nhà phát triển trình duyệt áp dụng rộng rãi WebRTC ● Giới thiệu API DataChannel (2013): Việc giới thiệu API DataChannel vào năm 2013 cho phép trao đổi liệu trực tiếp trình duyệt, cho phép trường hợp sử dụng chia sẻ tệp trò chơi nhiều người chơi ● Hỗ trợ trình duyệt rộng rãi (2015-2017): Trong vài năm tới, WebRTC nhà cung cấp trình duyệt áp dụng rộng rãi, với hỗ trợ riêng cho WebRTC có sẵn Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge trình duyệt khác ● Mở rộng hệ sinh thái WebRTC (2018-hiện tại): Trong năm gần đây, hệ sinh thái WebRTC tiếp tục phát triển với nhiều công cụ, dịch vụ tảng nguồn mở thương mại có sẵn để giúp nhà phát triển xây dựng ứng dụng dịch vụ WebRTC ● Phát triển sản phẩm dịch vụ WebRTC cung cấp: WebRTC sử dụng để phát triển nhiều loại sản phẩm dịch vụ, bao gồm tảng hội nghị truyền hình, tảng giáo dục trực tuyến, dịch vụ trò chơi, v.v 2.1.2 Kiến trúc WebRTC Để hai ứng dụng WebRTC nhận nhau, điều cần làm thiết lập kết nối trình duyệt mà muốn kết nối với WebRTC có cung cấp API cho phép thực việc kết nối, không bao gồm chức báo hiệu Tức cách gửi thông tin client đến client khác để thực việc kết nối ngang hàng Đây gọi báo hiệu (Signaling) Báo hiệu triển khai theo nhiều cách đó, nhà phát triển ứng dụng phải dưa giải pháp cho việc gửi nhận báo hiệu Websockets giải pháp hiệu cho việc Websockets tạo kết nối hai chiều mở trình duyệt máy chủ Điều có nghĩa tương tác trình duyệt máy chủ dựa kiện trình duyệt khơng phải thăm dò ý kiến máy chủ để trả lời liệu phải trao đổi Tuy nhiên, ứng dụng WebRTC cần nhiều signaling server đủ Bởi mơi trường internet, để thực việc gửi nhận data client với thân chúng phải biết số thông tin đặc thù Trong đó, thơng tin quan trọng địa IP client Trong trình kết nối, client phải biết thơng tin tạo nhận kết nối Đôi khi, thân client khó biết địa IP cơng khai mình, đặc biệt client đứng sau tường lửa NAT, điều mà phổ biến thiết bị có kết nối internet Để khắc phục điều này, WebRTC khuyến nghị sử dụng máy chủ STUN Máy chủ STUN cho phép client tìm địa IP cơng cộng họ loại NAT đứng trước họ Đôi khi, việc lấy thơng tin khó khăn tùy thuộc vào NAT, trường hợp đó, máy chủ TURN hỗ trợ xử lý Thông tin thu thập STUN sau sử dụng việc Thiết lập kết nối tương tác (Interactive Connectivity Establishment - ICE) để điều phối kết nối clients với ICE mô tả cách kết nối hoạt động, giúp clients tìm thấy thơng tin thiết lập kết nối ngang hàng Kiến trúc ban đầu có thêm thành phần 2.1.3 Lợi ích WebRTC WebRTC mang lại số lợi ích cho người dùng nhà phát triển khiến trở thành lựa chọn phổ biến cho giao thời gian thực web Dưới số lợi ích quan trọng việc sử dụng WebRTC: ● Giao tiếp ngang hàng: Một lợi ích lớn WebRTC cho phép giao tiếp ngang hàng (P2P) trình duyệt thiết bị di động Điều giúp loại bỏ nhu cầu sở hạ tầng phía máy chủ phức tạp giúp việc triển khai ứng dụng hỗ trợ giao tiếp trở nên dễ dàng tốn Với 10