Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CNTT VÀ TT VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEBRTC OC (ONLINE CONFERENCE) Sinh viên thực hiện: NGUYỄN TRUNG HIẾU – 19IT3 TRẦN THỊ KIM OANH – 19IT3 Giảng viên hướng dẫn: Ths Lê Viết Trương Đà Nẵng, tháng 10 năm 2021 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CNTT VÀ TT VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEBRTC OC (ONLINE CONFERENCE) Sinh viên thực hiện: NGUYỄN TRUNG HIẾU – 19IT3 TRẦN THỊ KIM OANH – 19IT3 Giảng viên hướng dẫn: Ths Lê Viết Trương Đà Nẵng, tháng 10 năm 2021 LỜI CẢM ƠN Trong suốt thời gian làm đồ án, nhóm chúng em nhận nhiều giúp đỡ Chúng em xin chân thành cảm ơn Khoa khoa học máy tính - Trường ĐH CNTT & TT Việt Hàn - ĐHĐN tạo điều kiện thuận lợi cho em thực đề tài đồ án sở Xin cảm ơn quý Thầy Cô mơn Khoa khoa học máy tính - Trường ĐH CNTT & TT Việt Hàn ĐHĐN tận tình giảng dạy, trang bị cho chúng em kiến thức quý báu năm học vừa qua Chúng em xin chân thành tỏ lòng biết ơn sâu sắc đến Thầy Lê Viết Trương tận tình hướng dẫn em suốt trình thực làm đồ án Cảm ơn bạn lớp, trường, Khoa khoa học máy tính - Trường ĐH CNTT & TT Việt Hàn - ĐHĐN hỗ trợ, giúp đỡ, chia sẻ kinh nghiệm kiến thức cho nhóm q trình thực đề tài Trong trình làm đồ án, kiến thức lập trình mạng chưa thực sâu sắc nên đồ án chúng em tránh khỏi sai sót Mong thầy thơng cảm góp ý thêm cho chúng em để đồ án hoàn chỉnh Chúng em xin chân thành cảm ơn! LỜI NĨI ĐẦU Cùng với phát triển khơng ngừng ngành khoa học kỹ thuật, ngành cơng nghiệp phát triển nhanh chóng Việc áp dụng công nghệ đại vào nhiều lĩnh vực sống điều tất yếu Song song với phát triển phát triển văn hóa, phương thức truyền thơng mạng Sự đời cơng nghệ thơng tin tích hợp đồng thời tiến công nghệ tổ chức thơng tin, đem đến nhiều ảnh hưởng tích cực cho phát triển xã hội Công nghệ thông tin đặc biệt phát triển internet mở kho kiến thức vô đa dạng phong phú cho người, giúp cho việc tìm hiểu kiến thức đơn giản nhiều Hiện với tình trạng dịch bệnh kéo dài làm cho nhiều hoạt động bị trì trệ, kể học tập lẫn công việc người Nỗi lo lớn lúc để học tập, giảng dạy tốt thực tốt công việc mà khơng cần ngồi Giải pháp tốt cho vấn đề xây dựng nên hệ thống hỗ trợ hoạt động học tập làm việc trực tuyến Do đó, nhóm chúng em để thực đề tài: “XÂY DỰNG WEBRTC OC (ONLINE CONFERENCE)” Ứng dụng giúp người dùng có nhìn tốt mạng xã hội biết cách chọn lọc thông tin dùng mạng xã hội Bằng cố gắng nỗ lực đặc biệt giúp đỡ tận tình, chu đáo giảng viên hướng dẫn ThS Lê Viết Trương, em hồn thành đồ án mơn học thời hạn Do thời gian làm đồ án có hạn trình độ cịn nhiều hạn chế nên khơng thể tránh khỏi thiếu sót Em mong nhận đóng góp ý kiến thầy cô bạn sinh viên để đồ án hoàn thiện Đ Nng, ngy tháng 11 năm 2021 NHẬN XÉT ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… Đ nng, ngy … tháng … năm 2021 Chữ ký giảng viên hướng dẫn MỤC LỤC LỜI CẢM ƠN .3 LỜI NÓI ĐẦU NHẬN XÉT MỤC LỤC DANH MỤC HÌNH DANH MỤC BẢNG 11 DANH MỤC VIẾT TẮT 12 MỞ ĐẦU .1 Giới thiệu đề tài .1 Kế hoạch dự kiến .2 Mục tiêu nghiên cứu Nhiệm vụ nghiên cứu Phương pháp phạm vi nghiên cứu Phương tiện nghiên cứu Kết đề tài Bố cục báo cáo CHƯƠNG TỔNG QUAN .6 1.1 Hệ thống WEBRTC 1.1.1 Khái niệm 1.1.2 Quá trình phát triển 1.1.3 Một số giao thức WebRTC 1.1.4 Cách thức hoạt động 11 1.1.5 Cấu trúc liên kết WebRTC 13 1.1.6 Một số ứng dụng WebRTC 16 1.2 Các tảng tương tự hệ thống OC .17 1.2.1 Google Meet 17 1.2.2 Zoom 18 1.3 Xác định yêu cầu hệ thống 20 1.3.1 Yêu cầu chức 20 1.3.2 Yêu cầu phi chức .20 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 21 2.1 Biểu đồ Usecase .21 2.1.1 Nhận diện tác nhân Usecase 21 2.1.2 Đặc tả Usecase 22 2.2 Biểu đồ trình tự .22 2.2.1 Biểu đồ trình tự đăng nhập .22 2.2.2 Biểu đồ trình tự người dùng thực chức 23 2.3 Biểu đồ hoạt động 24 2.3.1 Biểu đồ hoạt động thực chức Chat text 25 2.3.2 Biểu đồ thực chức Chia sẻ hình 25 CHƯƠNG XÂY DỤNG WEBRTC OC .26 3.1 Kiến trúc tổng thể mơ hình WebRTC .26 3.1.1 Giao tiếp peer to peer .26 3.1.2 Kiến trúc tổng thể .26 3.2 Ngơn ngữ lập trình cơng cụ lập trình 29 3.2.1 NodeJs 29 3.2.2 Socket.io 30 3.2.3 Các cơng cụ hỗ trợ lập trình .33 3.2.3.1 Visual studio code .33 3.3 Code hệ thống 34 3.3.1 Tạo backend 34 3.3.2 Tạo Frontend 38 3.4 Demo chương trình 39 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 43 Kết đạt 43 Hạn chế 44 Hướng phát triển 44 TÀI LIỆU THAM KHẢO 45 DANH MỤC HÌNH Hình 1 Mơ hình WebRTC Hình Mơ tả cách thức hoạt dộng TURN 10 Hình Mơ hình tam giác WebRTC 12 Hình Peer-to-peer 14 Hình SFU 14 Hình Điều khiển đa điểm 15 Hình Logo Google Meet 18 Hình Logo Zoom .19 Hình Biểu đồ Usecase .21 Hình 2 Biểu đồ trình tự đăng nhập .22 Hình Biểu đồ trình tự người dùng thực chức .23 Hình Biểu đồ hoạt động tổng quát người dùng 24 Hình Biểu đồ hoạt động thực chức Chat Text 25 Hình Biểu đồ hoạt động thực chức Chia sẻ hình 25 Hình Kiến trúc tổng thể .27 Hình Mơ hình tẳng nodejs 29 Hình 3 Blocking I/O (trái) Non-Blocking I/O (phải) 30 Hình Mơ hình socket 31 Hình Cấu trúc thư mục backend 34 Hình Cấu trúc thư mục frontend .39 Hình Giao diện bắt đầu .39 Hình Tiến hành tạo phịng chat 40 Hình Tiến hành đặt User name setting camera mic 40 Hình 10 Giao diện trang chủ đăng nhập vào 41 Hình 11 Giao diện chức nhắn tin phòng 41 Hình 12 Giao diện chức share hình .42 Hình 13 Giao diện chức sau share hình 42 DANH MỤC BẢNG Hình Mơ hình socket Tương tự ta cần dùng mô tả mộ file để kết nối với file đó, muốn kết nối với socket ta gửi yêu cầu đến socket để nhận mơ tả socket (socket description) dựa vào tạo kết nối - Địa socket dùng để nhân diện socket muốn kết nối mạng Một chương trình máy tính tham khảo mơ tả socket (socket description) Một dạng tham chiếu trừu tượng dùng cần tham chiếu nhớ ứng dụng đối tượng quản lý hệ thống khác Cách để chương trình máy tính tham khảo socket: - Chương trình máy tính gửi u cầu nhóm giao thức (protocol stack) tạo socket - Nhóm giao thức gửi mơ tả liệu đến chương trình máy tính để xác định socket hai dùng - Chương trình gửi mơ tả liệu trở lại với nhóm giao thức, socket trở thành nơi nhận gửi liệu - Cụ thể, mơ hình máy khách – máy chủ (Client – Server): để tạo yêu cầu kết nối, phía máy khách cần biết: - Tên máy chủ mà thiết bị chạy - Số cổng (Port Number) máy chủ muốn kết nối 32 - Tự nhận diện đến máy chủ để liên kết với cổng kết nối sử dụng cổng q trình liên kết Khơng giống cổng (port), socket dành riêng cho nút mạng, chúng tài nguyên cục sử dụng nút mạng khác Hơn nữa, socket không cần phải liên tục liên kết với kênh liên kết trước để giữ liên lạc hai nút mạng, khơng cần phải có điểm cuối khác Trong thực tế, đề cập đến socket người ta thường nói đến Internet socket TCp socket Một Internet socket thường có đặc trưng cụ thể sau đây: Địa socket cục bộ, gồm có địa IP cục cổng giao thức đặc trưng (đối với giao thức TCP giao thức UDP, IP khơng bao có cổng vật lý này) Một số cổng (a Port number): giao thức tầng Giao vận (ví dụ: TCP, UDP) Có nghĩa điểm cuối (cục từ xa) với TCP cổng 53 UDP cổng 53 socket riêng biệt Một socket kết nối với socket khác, có sẵn địa socket 3.2.3 Các cơng cụ hỗ trợ lập trình 3.2.3.1 Visual studio code Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hồn hảo IDE Code Editor Visual Studio Code hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code cho phép người dùng thay đổi theme, phím tắt, tùy chọn khác Một số tính bật: Hỗ trợ nhiều ngơn ngữ lập trình: Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Vì vậy, dễ dàng phát đưa thơng báo chương chương trình có lỗi Hỗ trợ đa tảng: Các trình viết code thơng thường sử dụng cho Windows Linux Mac Systems Nhưng Visual Studio Code hoạt động tốt ba tảng 33 Cung cấp kho tiện ích mở rộng: Trong trường hợp lập trình viên muốn sử dụng ngơn ngữ lập trình khơng nằm số ngơn ngữ Visual Studio hỗ trợ, họ tải xuống tiện ích mở rộng Điều khơng làm giảm hiệu phần mềm, phần mở rộng hoạt động chương trình độc lập Kho lưu trữ an ton: Đi kèm với phát triển lập trình nhu cầu lưu trữ an toàn Với Visual Studio Code, người dùng hồn tồn n tâm dễ dàng kết nối với Git kho lưu trữ có Hỗ trợ web: Visual Studio Code hỗ trợ nhiều ứng dụng web Ngồi ra, có trình soạn thảo thiết kế website Lưu trữ liệu dạng phân cấp: Phần lớn tệp lưu trữ đoạn mã đặt thư mục tương tự Ngồi ra, Visual Studio Code cịn cung cấp thư mục cho số tệp đặc biệt quan trọng Hỗ trợ viết Code: Một số đoạn code thay đổi chút để thuận tiện cho người dùng Visual Studio Code đề xuất cho lập trình viên tùy chọn thay có Hỗ trợ thiết bị đầu cuối: Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải chuyển đổi hai hình trở thư mục gốc thực thao tác Màn hình đa nhiệm: Người dùng Visual Studio Code mở lúc nhiều tệp tin thư mục – chúng không liên quan với Intellisense: Hầu hết trình viết mã có tính nhắc mã Intellisense, chương trình chun nghiệp Visual Studio Code Nó phát đoạn mã khơng đầy đủ Thậm chí, lập trình viên qn khơng khai báo biến, Intellisense tự động giúp họ bổ sung cú pháp thiếu Hỗ trợ Git: Visual Studio Code hỗ trợ kéo chép mã trực tiếp từ GitHub Mã sau thay đổi lưu lại phần mềm Bình luận: Việc để lại nhận xét giúp người dùng dễ dàng nhớ cơng việc cần hồn thành 34 3.3 Code hệ thống 3.3.1 Tạo backend Đối với phần backend, sử dụng Node.js framework Express Socket.io cần thiết để cung cấp giao tiếp hai chiều, thời gian thực máy chủ backend giao diện người dùng( frontend) Cấu trúc thư mục cho chương trình backend: Hình Cấu trúc thư mục backend Code backend: Bước : - Đầu tiên tạo thư mục backend với tên video-meeting Câu lệnh: mkdir video-meeting ( tạo thư mục video-meeting) - cd video-meeting ( trỏ đến thư mục video-meeting) Khởi tạo dự án máy chủ thiết bị đầu cuối tạo tệp package.json Câu lệnh: npm init –y Bước 2: - Tiếp theo, cài đặt frameworks Câu lệnh: npm install socket.io express cors colors npm install -D nodemon - Tiếp theo ,cài đặt npm install yarn –global : Yarn thực công việc với tốc độ nhanh, bảo mật cao đáng tin cậy Code chia sẻ thường gọi package (gói phần mềm) module (mơ đun phần mềm) Tất gói sử dụng mơ tả file package.json nằm thư mục gốc dự án 35 Bước 3: Tạo tệp có tên app.js khởi tạo kết nối phụ trợ đảm bảo giao tiếp người dùng phòng File app.js: const express = require('express') const http = require('http') var cors = require('cors') const app = express() const bodyParser = require('body-parser') const path = require("path") var xss = require("xss") var server = http.createServer(app) var io = require('socket.io')(server) app.use(cors()) app.use(bodyParser.json()) if(process.env.NODE_ENV==='production'){ app.use(express.static( dirname+"/build")) app.get("*", (req, res) => { res.sendFile(path.join( dirname+"/build/index.html")) }) } app.set('port', (process.env.PORT || 4001)) sanitizeString = (str) => { return xss(str) } connections = {} messages = {} timeOnline = {} io.on('connection', (socket) => { socket.on('join-call', (path) => { if(connections[path] === undefined){ connections[path] = [] } connections[path].push(socket.id) timeOnline[socket.id] = new Date() 36 for(let a = 0; a < connections[path].length; ++a){ io.to(connections[path][a]).emit("user-joined", socket.id, connections[path]) } if(messages[path] !== undefined){ for(let a = 0; a < messages[path].length; ++a){ io.to(socket.id).emit("chat-message", messages[path][a]['data'], messages[path][a]['sender'], messages[path][a]['socket-idsender']) } } console.log(path, connections[path]) }) socket.on('signal', (toId, message) => { io.to(toId).emit('signal', socket.id, message) }) socket.on('chat-message', (data, sender) => { data = sanitizeString(data) sender = sanitizeString(sender) var key var ok = false for (const [k, v] of Object.entries(connections)) { for(let a = 0; a < v.length; ++a){ if(v[a] === socket.id){ key = k ok = true } } } if(ok === true){ if(messages[key] === undefined){ messages[key] = [] } messages[key].push({"sender": sender, "data": data, "socket-id-sender": socket.id}) console.log("message", key, ":", sender, data) for(let a = 0; a < connections[key].length; ++a){ 37 io.to(connections[key][a]).emit("chat-message", data, sender, socket.id) } } }) socket.on('disconnect', () => { var diffTime = Math.abs(timeOnline[socket.id] - new Date()) var key for (const [k, v] of JSON.parse(JSON.stringify(Object.entries(connections)))) { for(let a = 0; a < v.length; ++a){ if(v[a] === socket.id){ key = k for(let a = 0; a < connections[key].length; ++a){ io.to(connections[key][a]).emit("user-left", socket.id) } var index = connections[key].indexOf(socket.id) connections[key].splice(index, 1) console.log(key, socket.id, Math.ceil(diffTime / 1000)) if(connections[key].length === 0){ delete connections[key] } } } } }) }) server.listen(app.get('port'), () => { console.log("listening on", app.get('port')) }) Trong app.js ,bắt đầu cách nhập mô-đun Mã lắng nghe cổng 4001 khởi tạo socket Sau khởi tạo socket, khởi tạo hàm thiết lập chức cho phòng 38 - Trong hàm “connection” khởi tạo chức tạo phòng , user đăng nhập phòng , chat, … “chat-messenger” Chức chuyển để socket.on(“chat-messenger”)xử lý gửi, nhận tin nhắn hiển thị thời gian thực gửi - Trong hàm “dissconection”chức xử lí người dùng khỏi phịng … Trình nghe kiện chức joinRoom chat kích hoạt từ giao diện người dùng tệp Video.js 3.3.2 Tạo Frontend Chúng sử dụng React, thư viện Redux , socket.io-client Cấu trúc thư mục cho phía client-side : Hình Cấu trúc thư mục frontend 39 3.4 Demo chương trình Hình Giao diện bắt đầu Hình Tiến hành tạo phịng chat 40 Hình Tiến hành đặt User name setting camera mic Hình 10 Giao diện trang chủ đăng nhập vào 41 Hình 11 Giao diện chức nhắn tin phịng Hình 12 Giao diện chức share hình 42 Hình 13 Giao diện chức sau share hình KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết đạt Về kiến thức học tập Để xây dựng hệ thống WebRTC nói chung WebRTC hội nghị trực tuyến nói riêng việc khơng đơn giản, địi hỏi phải xây dựng theo giai đoạn: khảo sát, phân tích thiết kế hệ thống, nghiên cứu tổng quan cơng cụ lập trình, thiết kế phần mềm kiểm thử Ngày đứng trước nhiều lựa chọn công nghệ nên hệ thống học tập làm việc online hiệu điều thiếu Thông qua nghiên cứu xây dựng đề tài này, chúng em củng cố, học hỏi thêm nhiều thứ như: - Củng cố kiến thức lập trình webRTC Javascript, NodeJs, Socket.io Biết thêm nhiều kiến thức xây dựng hệ thống web thời gian thực phân tích hệ thống ứng dụng web 43 - Trau dồi kiến thức kĩ lập trình mạng, Từ phát triển xây dựng nên số hệ thống WebRTC tương tự - Cũng cố kiến thức phân tích thiết kế hệ thống UML, vẽ thao tác thành thạo loại biểu đồ như: biểu đồ use-case, biểu đồ lớp, biểu đồ tuần tự… Đặc tả use-case Về phần mềm Đứng trước xu hướng phát triển công nghệ thông tin vũ bão, việc tin học hoá việc học tập làm việc online mùa dịch vô quan trọng thiết Nó giúp cho nhà trường lãnh đạo doanh nghiệp giảm bớt gánh nặng vấn đề học tập làm việc học sinh, nhân viên Qua dự án nhóm chúng em đạt số kết sau: - Xây dựng hệ thống webRTC API với giao diện phù hợp, chưa tối ưu hoàn toàn đủ bắt mắt với người dùng - Ứng dụng có số chức ứng dụng hội nghị trực tuyến cần có video call, gọi âm thanh, tắt/bật camera âm thanh, chia sẻ hình, chat box… - Ứng dụng giúp người dùng tối ưu hóa liệu người dùng, dễ dàng thao tác dễ dàng sử dụng Hạn chế Dự án Xây dựng WebRTC OC( Hội nghị trực tuyến) chưa hồn thiện hồn tồn có chức ứng dụng hệ thống hội nghị trực tuyến cần có Do thời gian hồn thiện dự án cịn hạn chế nên số chức khác nhóm chúng em chưa kịp hoàn thiện thời gian trước bảo vệ, nên dự án có số chức chưa kịp hồn thiện mong thầy giáo châm chước nhiều Song có thời gian nhiều nhóm chúng em hồn thiện bảo trì dự án tốt từ đưa ứng dụng vào thực tiễn Hướng phát triển Để dự án hoạt động hiệu cần có liệu, từ tăng tính bảo mật hệ thống Dự án hồn thiện thời gian tới ứng dụng vào thực tế 44 mang tính thuyết phục cao Vì khn khổ đồ án chúng em đưa chức bản, mô số yêu cầu thực tế Đồ án chúng em nhiều thiếu sót, mong nhận góp ý từ quý thầy để chúng em hồn thiện đồ án Em xin chân thành cảm ơn! 45 TÀI LIỆU THAM KHẢO [1] [1:56AM 13/11/2021] Giới thiệu WebRTC [online]https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Protocols [online]https://www.geeksforgeeks.org/introduction-to-webrtc/ [2] [3:00AM 13/11/2021] Giới thiệu cấu trúc Peer-to-Peer [online] https://tek4.vn/peer-to-peer-network-nen-tang-mang-ngang-hang-cua blockchain [3] [4:00AM 13/11/2021] Giới thiệu NodeJS [online] https://openplanning.net/11933/gioi-thieu-ve-nodejs [3] [4:30AM 13/11/2021] Giới thiệu Socket.io [online] https://freetuts.net/gioi-thieu-ve-socketio-2245.html 46