ĐỀ TÀI: “HỆ THỐNG PHÁT TRỰC TUYẾN SỬ DỤNG GIAO THỨC RTMP” Giảng viên hướng dẫn : Th.S PHẠM HỒ TRỌNG NGUYÊN

ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI: “HỆ THỐNG PHÁT TRỰC TUYẾN SỬ DỤNG GIAO THỨC RTMP” Sinh viên thực : PHẠM QUANG HỒNG PHẠM HỊA BÌNH Giảng viên hướng dẫn : Th.S PHẠM HỒ TRỌNG NGUYÊN Lớp : 17IT2 Đà Nẵng, tháng năm 2021 BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI: “HỆ THỐNG PHÁT TRỰC TUYẾN SỬ DỤNG GIAO THỨC RTMP” Đà Nẵng, tháng năm 2021 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Đà Nẵng, ngày … tháng … năm 2021 Giảng viên hướng dẫn PHẠM HỒ TRỌNG NGUYÊN MỞ ĐẦU Bạn có biết rằng, theo vài thống kê Livestream video hấp dẫn người xem nhiều lần so với video thơng thường Vì đơn giản, thời đại thơng tin nay, chả muốn có thơng tin sớm xác khơng bị tam thất nghe kể lại Do ngày nay, Livestream xu hướng mới, chí coi Livestream ngành cơng nghiệp Rất nhiều ông lớn quan tâm tham gia ngành cơng nghiệp kể đến Facebook, Youtube, Apple, twitch.tv… Có nhiều giao thức đáp ứng cho việc phát trực tuyến Trong có Web-RTC RTMP hai giao thức phổ biến Với Web-RTC, độ trễ đánh giá thấp so với giao thức khác có điểm yếu khó scale phù hợp với hệ thống phịng họp, nhóm nhỏ Để đáp ứng ứng dụng cho hàng nghìn người dùng lúc giao thức RTMP (Real-Time Messaging Protocol) lựa chọn hàng đầu Trong suốt thời gian nghiên cứu đồ án này, ngồi nỗ lực mình, nhóm chúng em cịn nhận giúp đỡ, góp ý, bảo tận tình Thầy Phạm Hồ Trọng Nguyên Nhóm em xin gửi lời cảm ơn chân thành tới Thầy Thầy dành nhiều thời gian quý báu tận tình hướng dẫn nhóm suốt q trình thực đồ án Mặc dù cố gắng song đồ án nhóm chúng em khơng tránh khỏi thiếu sót Vì nhóm chúng em mong nhận góp ý Q Thầy giáo, Cơ giáo để đồ án hoàn thiện Em xin chân thành cảm ơn! MỤC LỤC Trang MỞ ĐẦU DANH MỤC BẢNG BIỂU DANH MỤC HÌNH ẢNH CHƯƠNG GIỚI THIỆU Lý chọn đề tài Tổng quan Phương pháp nghiên cứu Cấu trúc đồ án CHƯƠNG NGHIÊN CỨU TỔNG QUAN Hạn chế, tồn phương pháp Kết luận CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3.2 Yêu cầu hệ thống 3.2.1 Danh sách tác nhân 3.2.2 Danh sách yêu cầu (use case) 3.3 Đặc tả ca sử dụng theo nhóm yêu cầu: 3.3.1 Đăng nhập 3.3.2 Đăng ký 10 3.3.3 Quên mật 11 3.3.4 Xem thông tin tài khoản 12 3.3.5 Xem danh sách kênh 13 3.3.6 Tìm kiếm 15 3.3.7 Sắp xếp lọc 15 3.3.8 Phát Livestream 16 3.3.9 Xem Livestream 17 3.3.10 Theo dõi tình trạng máy chủ 18 3.4 Biểu đồ Entity Relationship Diagram (ERD) 20 CHƯƠNG TRIỂN KHAI XÂY DỰNG 21 Công nghệ áp dụng vào Đồ án 21 4.2.1 Backend 21 4.2.2 Front-end 24 UI/UX (All) 26 Welcome screen 26 Sign in (Đăng nhập) 27 Sign up (Đăng ký) 28 Forgot Password (Quên mật khẩu) 29 User Profile 30 Following screen 31 Discovery screen 32 Browse screen 33 Gamming screen 34 Detail stream screen 35 Search screen 36 4.15 Màn hình phát trực tuyến từ thiết bị 37 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 38 DANH MỤC TÀI LIỆU THAM KHẢO 40 DANH MỤC BẢNG BIỂU Trang Bảng 3.1 Các nhóm yêu cầu cần thực Bảng 3.2 Danh sách tác nhân Bảng 3.3 Danh sách yêu cầu Biểu đồ 3.1 Biểu đồ Use Case Đăng nhập 10 Biểu đồ 3.2 Biểu đồ Use Case Đăng ký 11 Biểu đồ 3.3 Biểu đồ Use Case Quên mật 12 Biểu đồ 3.4 Biểu đồ Use Case Xem thông tin tài khoản 13 Biểu đồ 3.5 Biểu đồ Use Case Xem danh sách kênh 14 Biểu đồ 3.6 Biểu đồ Use Case Tìm kiếm 15 Biểu đồ 3.7 Biểu đồ Use Case Sắp xếp lọc 16 Biểu đồ 3.8 Biểu đồ Use Case Phát Livestream 17 Biểu đồ 3.9 Biểu đồ Use Case Xem Livesteam 18 Biểu đồ 3.10 Biểu đồ Use Case Theo dõi tình trạng máy chủ 19 Biểu đồ 3.11 Biểu đồ Entity Relationship Diagram 20 DANH MỤC HÌNH ẢNH Trang Hình 2.1 Giao thức RTMP - Real Time Messaging Protocol Hình 4.1 Logo ứng dụng 21 Hình 4.2 Hapipal.- cơng cụ xây dựng backend cho dự án 22 Hình 4.3 PostgreSQL – Hệ quản trị sở liệu sử dụng 22 Hình 4.4 ObjectionJS – ORM Database cho NodeJS 23 Hình 4.5 Docker - Mơi trường phát triên cho dự án 24 Hình 4.6 ReactJS - Thử viện cho phát triển FrontEnd 25 Hình 4.7 Material UI Frame worok cho phát triển UI 26 Hình 4.8 Swagger - Cơng cụ ghi API document cho dự án 26 Hình 4.9 Màn hình chào 27 Hình 4.10 Màn hình đăng nhập 27 Hình 4.11 Màn hình đăng ký 28 Hình 4.12 Màn hình đổi mật 29 Hình 4.13 Màn hình thông tin tài khoản 30 Hình 4.14 Màn hình Following screen 31 Hình 4.15 Màn hình Discovery screen 32 Hình 4.16 Màn hình Browse 33 Hình 4.17 Màn hình Gamming 34 Hình 4.18 Màn hình chi tiết video phát trực tuyến 35 Hình 4.19 Màn hình trang tìm kiếm 36 Hình 4.20 Màn hình phát trực tuyến từ thiết bị 37 DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ Viết tắt Administrators (Quản trị viên) Admin Application Programming Interface Hypertext Transfer Protocol Input/Output Object Relational Mapping ORM Real time messaging protocol RTMP Structured Query Language SQL Laboratory (Phòng thực hành) TCP User Interface/ User Experience API HTTP I/O UI/UX ĐỒ ÁN CHUYÊN NGÀNH CHƯƠNG GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN GIỚI THIỆU Lý chọn đề tài Chúng ta sống thời đại mới, thời đại phát triển rực rỡ công nghệ thông tin Công nghệ thông tin bước phát triển cao số hóa tất liệu thông tin, luân chuyển mạnh mẽ kết nối tất lại với Mọi loại thơng tin, số liệu âm thanh, hình ảnh đưa dạng kỹ thuật số để máy tính lưu trữ, xử lý chuyển tiếp cho nhiều người Những công cụ kết nối thời đại kỹ thuật số cho phép dễ dàng thu thập, chia sẻ thông tin hành động sở thơng tin theo phương thức hồn tồn mới, kéo theo hàng loạt thay đổi quan niệm, tập tục, thói quen truyền thống, chí cách nhìn giá trị sống Công nghệ thông tin đến với người dân, người quản lý, nhà khoa học, người nông dân, bà nội trợ, học sinh… khơng có lĩnh vực nào, khơng có nơi khơng có mặt cơng nghệ thông tin Công nghệ thông tin động lực quan trọng phát triển, ứng dụng phát triển công nghệ thông tin nước ta nhằm góp phần giải phóng sức mạnh vật chất, trí tuệ tinh thần tồn dân tộc, thúc đẩy công đổi mới, phát triển nhanh đại hoá ngành kinh tế, tăng cường lực cạnh tranh doanh nghiệp, hỗ trợ có hiệu cho trình hội nhập kinh tế quốc tế, nâng cao chất lượng sống nhân dân, đảm bảo an ninh quốc phòng tạo khả tắt đón đầu để thực thắng lợi nghiệp cơng nghiệp hóa, đại hóa Trong thời buổi cơng nghệ thông tin xu thế, công nghệ không ngừng đưa tạo điều kiện cho cơng việc kinh doanh, giải trí, học tập,… phát triển Trong cơng nghệ đó, phát trực tuyến (Livestream) công nghệ ngày ứng dụng vào nhiều mặt xã hội, đặc biệt ngành giải trí truyền thơng Do ngày nay, Livestream xu hướng mới, chí coi Livestream ngành cơng nghiệp Rất nhiều ông lớn quan tâm tham gia ngành cơng nghiệp kể đến Facebook, Youtube, Apple, twitch.tv…Chính vậy, từ lý chúng em lựa chọn đề tài xây dựng “HỆ THỐNG PHÁT TRỰC TUYẾN SỬ DỤNG GIAO THỨC RTMP” cho Đồ án chuyên ngành ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Hình 4.7 Material UI Frame worok cho phát triển UI Nhằm tạo tương tác UI API dễ dàng tracking đường dẫn có phía API Việc viết document cho API vấn để cần thêm vào từ giai đoạn đầu xây dựng dự án Nhóm sử dụng Swagger để thực cơng việc nói với mục đích tạo tính chun nghiệm hướng đến việc bảo trì code cách thuận lợi cho dự án sau Đường dẫn tham khảo Material-ui: https://swagger.io/ Hình 4.8 Swagger - Công cụ ghi API document cho dự án UI/UX (All) − Material UI − Dark mode Welcome screen − Chuyển đến screen đăng nhập − Chuyển đến screen đăng ký 26 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Hình 4.9 Màn hình chào Sign in (Đăng nhập) − Đăng nhập email − Validate form đăng nhập − Báo lỗi đăng nhập không thành cơng Hình 4.10 Màn hình đăng nhập 27 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Sign up (Đăng ký) − Đăng ký email − Active tài khoản thơng qua email − Validate form đăng kí ( email, mật khẩu, username, password ) − Kiểm tra user trùng lặp − Báo lỗi đăng ký khơng thành cơng Hình 4.11 Màn hình đăng ký 28 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Forgot Password (Quên mật khẩu) − Lấy mật email − Kiểm tra email có hợp lệ Hình 4.12 Màn hình đổi mật 29 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN User Profile − Hiển thị thông tin user − Hiển thị banner − Hiển thị số lượng người theo dõi kênh − Hiển thị số lượng kênh theo dõi − Cho phép khởi tạo stream button screen − Chuyển đổi theme (dark mode) − Thay đổi thông tin tài khoản − Thay đổi mật tài khoản − Thay đổi màu chat − Đăng xuất Hình 4.13 Màn hình thơng tin tài khoản 30 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Following screen − Hiển thị category thích − Hiển thị kênh đăng ký live − Hiển thị kênh live nhiều người xem ( Suggestion channel ) − Hiển thị streamer đăng ký Hình 4.14 Màn hình Following screen 31 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Discovery screen − Hiển thị category bật slider − Gợi ý category phù hợp với user − Liệt kê category hàng đầu theo list − Hiển thị nhãn gắn liền với category − Phân trang load more action Hình 4.15 Màn hình Discovery screen 32 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Browse screen − Hiển thị toàn kênh − Hiển thị toàn category − Hiển thị nhãn gắn liền với category − Sắp xếp lọc theo mong muốn dialog press vào button Hình 4.16 Màn hình Browse 33 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Gamming screen − Hiển thị toàn kênh có category gaming Hình 4.17 Màn hình Gamming 34 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Detail stream screen − Hiển thị video stream − Hiển thị tên streamer − Hiển thị thông tin strean (Description, viewer) − Cho phép user chưa đăng kí đăng kí kênh − Cho phép user chưa đăng kí đăng kí kênh − Trị truyện realtime kênh − Trò truyện emote − Chủ kênh có quyền block viewer từ phần trị chuyện − Thông báo stream kết thúc đến viewer streammer bị disconnect Hình 4.18 Màn hình chi tiết video phát trực tuyến 35 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Search screen − Search theo tên kênh (tên streammer) − Lọc theo category − Lọc theo tags − Ưu tiên search với kênh theo dõi online − Áp dụng fulltext search phía backend để cải thiện hiệu search Hình 4.19 Màn hình trang tìm kiếm 36 ĐỒ ÁN CHUYÊN NGÀNH 4.15 GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN Màn hình phát trực tuyến từ thiết bị − Ko cần sử dụng phần mềm thứ ba Obs Studio − User trực tiếp tạo luồng trực tuyến thiết bị họ − Tại user đọc tin nhắn chat có người xem tương tác Hình 4.20 Màn hình phát trực tuyến từ thiết bị 37 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Tổng quan Đồ án chúng em đưa lợi ích Ứng dụng quản lý phịng thực hành công tác đào tạo trực tuyến, quản lý trực tuyến Các tiếp cận hiệu chương trình đào tạo quy trình quản lý tích hợp nhiều tính có giá trị việc dạy học Từ đó, nhóm chúng em rút ưu nhược điểm ứng dụng sau: − Ưu điểm ứng dụng: Trong thời gian xem truyền hình tiếp tục giảm, thời gian sử dụng dành cho mạng xã hội tăng lên đặn với người Mỹ, họ dành trung bình 5:30 tuần cho tảng mạng xã hội phần lại giới nhanh chóng bắt kịp xu Các nội dung video thúc đẩy tăng trưởng này, công ty Facebook, YouTube hay Snaptchat quảng bá rầm rộ công cụ truyền video trực tiếp phát trực tiếp video 360 độ, kênh ngày chuyên gia truyền thông tận dụng để thu hút đối tượng thu hút ý dòng doanh thu Tuy nhiên, live stream mạng xã hội chuyên nghiệp thách thức với chất lượng tính linh hoạt khía cạnh then chốt Các mơ-đun mã hóa truyền phát video nhỏ gọn hệ thống giúp việc Đây xem tiềm lớn hệ thống phát trực tuyến tương lai − Nhược điểm ứng dụng: Các nội dung đóng góp cho mạng xã hội chủ yếu hình thành từ điện thoại thơng minh người dùng Đối với người dùng mạng xã hội, tiện lợi đơn giản điện thoại thông minh hiệu quả, nhà sản xuất video chuyên nghiệp, việc sử dụng điện thoại kèm với video chất lượng chất lượng video livestream so sánh với chất lượng video truyền hình Như hệ thống cần khắc phục chất lượng nguồn video livestream để đáp ứng nhu cầu người dùng − Hướng phát triển: Truyền phát trực tiếp video – livestream mạng xã hội trở thành tảng thay quan trọng để thu hút người xem đặc biệt đối tượng trẻ 38 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN thời đại công nghệ cao ngày Chất lượng mã hóa nhiều lựa chọn giao diện video tích hợp kết hợp với kích thước nhỏ gọn ấn tượng mức tiêu thụ điện thấp, cho phép giải pháp live stream dễ dàng, dễ cài đặt tiết kiệm chi phí cho phép đơn vị truyền thông chuyên nghiệp bắt đầu chia sẻ câu chuyện thú vị với đối tượng khán giả rộng lớn Trong khuôn khổ Đồ án lần này, hệ thống chúng em phát triển tảng di động tương lai, có điều kiện nhóm chúng em phát triển hệ thống phát trực tuyến tảng web cách mà Facebook hay Youtube làm 39 ĐỒ ÁN CHUYÊN NGÀNH GVHD: Th.S PHẠM HỒ TRỌNG NGUYÊN DANH MỤC TÀI LIỆU THAM KHẢO Tiếng Anh: [1] , xem 19/1/2021 [2] , xem 19/1/2021 [3] , xem 19/1/2021 40