Môn lập trình mạng căn bản báo cáo Đồ án cuối kỳ hệ thống upload và phát video

Tất cả các điều trên cho phép chúng em áp dụng cũng như cải thiện kỹ năng xử lý tap tin, quản lý dữ liệu và truyền tải dữ liệu qua mô hình client-server và quan trọng hơn là áp dụng đượ

Z

MON LAP TRINH MANG CAN BAN

BAO CAO DO AN CUOI KY

HE THONG UPLOAD VA PHAT VIDEO

GVHD: Lê Minh Khánh Hội Lớp: NT106.P13 Sinh viên thực hiện: Trần Lê Uyên Thy - 23521564 — Nhóm trưởng

Lê Nguyễn Phương Giang — 23520407 — Thành viên Nguyễn Xuân Đan — 23520222 - Thành viên Huỳnh Quốc Khánh - 23520718 - Thành Viên

90% Tp H6 Chi Minh, 12/2024 soca

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DÂN

., 9ày thẳng năm 2024

Người nhận xét (Ký tên và ghi rõ họ tên)

2 Network Stack ee 10

3 LUGMG UNG GUNG ố ẽẽố 11

3.1 Xác thực GCÌÌ©FiẨ - CC nọ ni cọ BE re 11 3.2 Cap nhật thông tỈn - LH TH Ho KH 12

Chương 3: XÂY DỰNG HỆ THÓNG 2à S ch treo 21

1 Tinh nang xác thực người Ùn - - - << << HH HH KH Hy 21

LG on 4 21 2® nh .ee—- 43 23

2 Các tính năng 000580 //801)1 01 24 Pha na 24

2.2_ Quên mật khâU 22-222 ++S+*+t+E*+E£E+eEeEetEsEeEEeErrrkrkeerrererersrerrrrereee 24

2.3 Cập nhật thông tin người dÙnG - - - ng 26

3 Các tính năng chính của AdïmiHn - -< + xxx ng y 27

3.1 Quản lý @mail 5 << 11111 HH ki 27 3.1.1 Hiến thị danh sách emaill - 5< E111 E38 E1 EEx SE Sky ky rry 27 3.1.2 Hiên thị thông tin email - -+-5- +s+s++c+++s+z++szs+eezexexesrsezsrsescee 28 3.2 Quản lý US€( HH HH HH KH TU 28

3.2.1 Hiển thị danh sách US@T - - - c <1 E1 S111 ExE SH TH nh Hư Hy ry 28

3.5.1 Tính năng tìm KiẾm - << +s+s++z+z+eEeEexeveereertrsrsreerrrerereeree 32

3.5.2 Tính năng load lại ffAïNQ - - - + Ăn nh nen kh Hee 33

4 Các tính năng chính của JS©Y - SG ST SH TH nọ kg xà 34

4.1 Hiên thị danh sách vÏde@O - c1 21x E E1 KHE TH KH KHE ng krkp 34

4.1.1 Danh sách video mới nhất và được đánh giá tốt nhát 34

4.1.2 Danh sách các video đã xem như ren 35 4.2 Tính năng xem vVI€O -.- Ă SH HH Họ KEt 36 4.2.1 Xem VỈ@O - - LLcQ cọ nh vvrến 36

4.2.2_ Xem các video liên quan ch ky 37

ca na 38

4.4 Upload VỈd©O SH HH HH Họ Họ kh ki 39 4.5 X€IH COOD ST HH ĐT 40 4.5.1 Tạo phịng hoặc nhập id phịng . Su 40 4.5.2 Tính năng xem cùng nhau .- S229 1133113311 nh 41 4.6 Chat với admiÌTi LG HH HH kh 43

4.7 Xĩa video trong Watched Video0s .- - nen» 44

A.B Tal VIMO .e 45

4.9 Donate cho ứng dụng - nh HH nh v kếp 46

A API danh cho cac tính năng liên quan đến S@ï 5- -s-s=s<+==s+s 48

B API dành cho các tính năng liên quan đến Video . -s-s< s2 48

C API dành cho các tính năng liên quan đến ©oop Room - 49

D._ API dành cho các tính năng liên quan đến Email -s-s<s<=s2 49

0000/18 TÀI) C9010 d43ư35 ,ƠỎ 50

I Kết luận, hướng phát triÊn - ¿22 S252 SE ‡tEvxeEeEekesesesrsrrrsrksrrrsrsree 50

2 Đĩng gĩp của các thành vIÊP - -< àLH HH HH nọ HH TK 50

DANH MỤC BẢNG

Hình 1 Network S†aCKK - << SH TH Hà Ko KT kh 10

Hinh 2 Ludng dang hap .cccscecsesscscscsessesesscscsesecscseececsesecaesesececsenecaesscecscanseseseeneasees 11 DI) c8 ong 8.1 .- ÔỎ 11

Hình 4 Luồng cập nhật thông tin 7-2 252522 +s+>£zEzEevEeEeEezreervreersrerrrrrrecee 12

Hình 5 Luông tải video lên 252223222 123E3 1231111111111 1111k rrke 12 DI) No No g0 8 0n xS H,.,H,EA 13 Hình 7 Luồng xem video và xem cùng nhau - 5-2 525+S2£+£+e+e+vzezvrereseresrsee 13 Hình 8 Luông quản lý User, Video, Room (Admin) -5-5- +s5s<+<+z<zceszsescee 14

Hình 9 Luồng xóa User, Video (Admin) . - + 5 2+ +s+s+s+z+zxzzxzeeeeeezrsrsererscee 14 Hình 10 Usercase dang nhập . - LH KH KH TY Họ Họ 15 Hinh 0808/—.2i 0 0 vn eee 15 Hình 12 Usercase cập nhâty thông tỉn - HH KH kh 16 Hình 13 Usercase xem vid€O - HH HH To KH 16 Hình 14 Usercase upload vide€O -. - - - << 1n HH TH HH kh 17

Hình 15 Usercase xem video chung - - - - - - chen km Ho xi nh 17

Hình 16 Usercase liên hệ với Admiin - c2 2n nn 3 nHnn nh hy ren 18 Hình 17 Usercase donaf@ - - LH TT Hà HD KEh 18

Hình 18 Usercase quản lý User, Video, Room (Admiin) che se 18

Hình 19 Usercase quản lý email (Admin) . + S1 SH TH» nhe 19 Hình 20 Packet S†rUC[UFG - LH HH HH ok BH 19

Hình 21 Kiến trúc hệ thống, .- -2-¿- +22 ++2+2+2+z+E+E++Ee+eEeEexezeeerrrersreesrrerererree 20

s90: 0( 1s ố ẻẻ ốh 21 ðIiai025Än9i0:04:19101 117777 21 Hình 24 Form email O TP đăng ký . ĂĂ S SH Họ Họ on kh 22

si 80 0i ằằe 23

Hình 27 Form quên mật khâu . - + + 2 2 E* E13 E+EEvEEVE#EEEEEEEEEEEExEEErkserexrerrs 24

Hinh 28 Form email OTP quén mat KIA oeecescecceccceccecseeeeeceeceeaeceeesereeaecaeeeeeseresesaneeetens 25 Hình 29 Form cập nhật thông tín người dÙn - << S111 hy 26 Hình 30 DataGridView hiện danh sách email - - -cccSSccssssxxcesscsxz 27 Hình 31 Form nội dụng email SH KH Ho kh 28

Hình 32 DataGridView hiện danh sách S@r - 2< TS nnSSS Hee 29

Hình 33 MessageBox trước khi XÓa S@Y' . Ăn HH nh 29

Hình 34 MessageBox thông báo không thẻ xóa User đang online . 30

Hình 35 DataGridView hiên thị danh sách video - 5-2-2 <+c+scscsseveseserrrreree 30 Hình 36 MessageBox trước khi XÓA VỈ€O Q.5 - SH HT khe 31 Hình 37 DataGridView hin Ganh SACN COOP LOOM .ccccccceccecceeeeeeeeeeeeeeeeeeeeseeesseensess 32 Hình 38 Tìm kiếm thanh CONG ccccecesceseescecscecsesseececsesscscsececsesesacaesesecseeecaeaeeesesaeeees 33 Hình 39 Tìm kiếm không thành công - +2 2 2+8 =+S+#+z£zszEze£zEzz+zxzszeezezszxrs 33 J0 9AE l0 0s 34

Hình 41 Tab Top Rated Videos HH HT HH Ho KH 34 Hinh 42 Tab 2e 0v 35

Hình 43 Form phát vide€O - HH HH KH To KH TK 36 Hình 44 Hiền thị danh sách các video liên 000 0 (c-£+43 37

Hình 45 Chức năng đánh giá video - ST HH By 38 Hình 46 Chức năng tìm kiếm VÏd@O . 2-2: 5-2 S2S+2S2+z 23t £eEexeterererrrrrrereerersre 39 Hình 47 Chức năng upload video - HH Họ kg, 39 Hình 48 Video được phân tách thành các nhỏ - 5 S232 222 S s2 nen rrrry 40 Hình 49 Chức năng xem coOD - SH HH HH TK Ki kh 40 Hình 50 Form COOP FOOI - - <1 TH Ho KH KH Hit 41 Hinh 51 Tinh nang xem CUA COOP [OOM ôÔÔÔÔÔÔÔÔÔÔÔẨ 42 Hình 52 Form gửi mail cho Admiin nh nh 43 Hình 53 Form hướng dẫn lây pass email -+ 5+ c2 s+s++E+szz£eeeeeezeeeerresrzrzee 43 Hình 54 Email của Admin sẽ nhận được liên hệ của USer - -<<s+ 44 Hinh 55 MessageBox théng bao xóa video đã xem thành công . -< <5 44 Hinh 56 MessageBox théng bao lưu thành công - Ă 5 + SH, 45 Hinh 57 File Explorer được mở để chọn nơi lưu videO - -c- cv ke res 45 Hình 58 Form dona†@ - - ch TH no Ho TK TH th kg 46 Hình 59 Mã QR được tạo thành cÔng - HH HH HT ki EEHk 46 Hình 60 Kết quả sau khi quét mã .-. - + +22 ++2+£+E+E+++EeEezEeervreerererrrrrrerecee 47 Hinh Rn am 48

HINA 62 VidEO API 48

Hinh 63 COOp API ỐẦẦ¬5ÁABAaBaBỚƠIA443 49

10h No ao 49

DANH MỤC HÌNH ẢNH

Bảng 1 Bảng đóng góp công vIỆC - - SH TH TK HH Họ KH 50

Bang 2 Bang tự đánh giá - - ST nh HH Tre

Chuong 1: TONG QUAN

1 Bối cảnh chọn đề tài

Xu thế công nghệ: Hiện nay, video đang trở thành phương tiện thông tin với mọi

lĩnh vực từ giải trí, giáo dục cho đến thương mại Triển khai hệ thống upload và

phát video là nên tảng để giúp phát triển ứng dụng tương tự như thế này trong

tương lai, giúp đáp ứng nhu cầu của mọi người ở mọi lúc mọi nơi

Trải nghiệm người dùng: Đề tài này có mục tiêu mang đến cho người xem phạm

vi xem và khả năng chia sẻ video trực tuyến, cùng nhiều tính năng giúp đảm bảo trải nghiệm của người xem Bộ lọc tìm kiếm chỉ tiết giúp mọi người dễ dàng tìm kiếm, phân vùng và phát video mà mình muốn xem

Kỹ thuật lập trình: Đè tài đòi hỏi biết về các công nghệ hệ thống ha tang mang,

lập trinh căn bản và kỹ thuật xử lý video từ quá trình upload, lưu trữ, phát lại và

xử lý các yêu cầu người dùng Bên cạnh đó, có cơ hội tiếp cận và làm việc với các giao thức và định dạng video, đồng thời giúp nâng cao khả năng xử lý và tối

ưu hóa dữ liệu đa phương tiện Tất cả các điều trên cho phép chúng em áp dụng

cũng như cải thiện kỹ năng xử lý tap tin, quản lý dữ liệu và truyền tải dữ liệu qua

mô hình client-server và quan trọng hơn là áp dụng được những kỹ năng được

học trong lập trình mạng

Khả năng ứng dụng rộng rãi: Hệ thống upload và phát video này không giới

hạn mà có thẻ sử dụng nó trong nhiều lĩnh vực khác nhau như giáo dục trực tuyến, quảng cáo sản phẩm, lưu trữ video cá nhân hoặc công việc và nhiều hơn thế nữa Đây thực sự là dé tài có thẻ ứng dụng trong những ứng dụng thực tê

2 Mục tiêu đề tài

Xây dựng hệ thống quản lý video hoàn chỉnh:

o_ Phát triển một hệ thống cho phép người dùng tải lên, lưu trữ, phát và quản

lý video dễ dàng

o_ Qung cáp các chức năng cơ bản như tìm kiếm, tai video

Đảm bảo trải nghiệm người dùng mượt mà và tối ưu hóa hiệu SUẤT:

o_ Thiết kế giao diện người dùng thân thiện, dễ sử dụng và đáp ứng nhu cầu của người dùng, giúp họ dễ dàng thao tác và trải nghiệm

o_ Tối ưu hóa quá trình tải lên và phát video đề đảm bảo video có thẻ phát một cách mượt mà với độ trễ thấp nhát

Quản lý quyền hạn và bảo mật nội dung:

o_ Phân quyền rõ ràng giữa người dùng và admin: admin có thẻ xóa hoặc

quản lý nội dung, trong khi người dùng có thê xem, upload, tải video và

thực hiện các thao tác giới hạn

o Dam bao bao mat dữ liệu người dùng và nội dụng video, sử dụng mã hóa

và token để đảm bảo tính an toàn cho người dung

Đảm bảo quản lý và lưu trữ dữ liệu hiệu quả:

© Su dung co sở đữ liệu đề lưu trữ thông tin video, người dùng, lịch sử tìm

kiếm, và các siêu dữ liệu liên quan

o_ Tối ưu hóa không gian lưu trữ và quản lý dữ liệu video để giảm tải cho

server và tiết kiệm băng thông

- _ Xây dựng hệ thống tương tác giữa người dùng và admin:

o_ Phát triển chức năng chat cho phép người dùng và admin trao đôi thông

tin, giúp admin hỗ trợ người dùng kịp thời

- Tinh nang xem video chung:

o_ Qung cấp tính năng cho phép người dùng tạo hoặc tham gia vào các phòng xem chung, nơi họ có thẻ xem video cùng nhau

o_ Thực hiện đồng bộ hóa phát video đê đảm bảo tất cả người dùng trong phòng xem đều xem video ở cùng một thời điềm

3 Giới thiệu đề tài

- D6 án "Hệ thống Upload va Phat Video" nham tạo ra một nàn tang cho phép người dùng dễ dàng tái lên, xem và quản lý video một cách an toàn Hệ thống

nay đáp ứng nhu cầu ngày càng tăng về chia sẻ video trực tuyến trong các lĩnh

vực như giải trí và giáo dục

- _ Giao diện thân thiện giúp cả người dùng và quản trị viên điều hướng dễ dàng, và

tính năng chat tích hợp cung cáp hỗ trợ theo thời gian thực

- D6 an nay mang lai trái nghiệm thực hành với xử lý dữ liệu đa phương tiện, bảo

mật và tối ưu hóa hiệu suất, giúp chúng em xây dựng các giải pháp kỹ thuật số thực tiễn va chat lượng cao đáp ứng nhu câu truyền thông hiện đại

Chuong 2: TONG QUAN HE THONG

1 Công nghệ sử dụng

- IDE: Visual Studio 2022

- Ngôn ngữ code: C#

- Framework: Windows Forms, NET Core

- Component Object Model: AxWindowsMediaPlayer

- Thu vién: SignalR, Newtonsoft Json

- Network stack: RESTful API HTTP methods

- Database: MongoDB

- Version controller: Github

2 Network Stack

JSON, SSL, TLS

Transport

Data Link Efhemet

Physical Wifi hoac Ethemet

Hinh 1 Network Stack

- Tang Vat ly (Physical): truyền các tín hiệu dưới dạng vật lý từ giữa 2 thiết bị

đầu cuối, sử dụng các giao thức thuộc họ Wifi hoac Ethernet

-_ Tầng Liên kết dữ liệu (Data Link): đóng gói dữ liệu thành các khung, kiêm tra

lỗi và điều khiến truy cập trong mạng đa truy cập

- Tang Mang (Network Layer): quản lý địa chỉ IP, định tuyến các gói tin, kiêm

-_ Tầng Trình bày (Presentation): mã hóa hoặc giải mã, nén hoặc giải nén dữ liệu

- Tang Ung dụng (Application): cung cáp giao diện tương tác trực tiếp với người

> > ———

Trả về dữ liệu User Hiến thị màn hình ắ

tương ứng với Userld

Interface

Dang ky Gui POST request Luu vao database

Hiến thị màn hình

Trả về response Trả về trạng thái đăng nhập

Hình 3 Luông đăng ký

11

các thông tin Gửi PATCH request Cập nhật thông tin

Hình 4 Luống cáp nhát thông tin

- Tai lén video

Tải lên video Gửi POST request Lưu vào đatabase

Hiển thị video mới Trả về response Trả về trạng thái

Hình 5 Luảng tái video lên

12

- _ Đánh giá video

Cập nhật dữ liệu

Đánh giá video Gửi PATCH request trong database

Hiển thị thông tin đã Trả về dữ liệu Video đã

Trả ve

cập nhật response cập nhật

Hình 6 Luông đánh giá video

- _ Xem video và xem cùng nhau

Hiển thị nội dung video Tra vé response Trả về dữ liệu Video

Hinh 7 Luéng xem video và xem cùng nhau

13

Quan ly User, Video, Room (Admin)

Xuất các dữ liệu Tra vé 3 response Trả về dữ liệu lần lượt

raform fan lượt theo từng request

Hinh 8 Luéng quan ly User, Video, Room (Admin)

Xóa User, Video (A dmin)

Nhấn nút xóa User/ X6a User/Video/Room

Video/Room Gui DELETE request rakhéi database

'Thông báo kết qua Trả về response Tra về trạng thái

Hình 9 Luống xóa User, Video (Admin)

14

Nhap password Nhap email

C Cập nhật thông tin

Đỗi full name

Đăng nhập

Đôi thông tin Câp nhật bio

Câp nhật thông tin

cập nhật

Hình 12 Usercase cáp nhât;; thông tin

D Xem video

Xem mô tả video

Xem video mới Đăng nhập upload

Xem video tương tự sH ĐỂ mm số

Tìm kiêm video Hình 13 Usercase xem video

16

Dang nha

9 nhập Tải lên video

Hình 14 Usercase upload video

Nhập thông tin mô tả

F Xem video chung

Đăng nhập Join phòng

include include

Xem video chung include

NT106 — LAP TRINH MANG CAN BAN

G Liên hệ với Admin

Đăng nhập Điền thông tin Ề

include

Liên hệ admin Xác minh thông tin

Hình 16 Usercase liên hệ với Admin

Đăng nhập Điền thông tin

include include

H Donate ồ

lud Quét ma QR Hinh 17 Usercase donate

I, Quan ly User, Video, Room (Admin)

Xem danh sach

Hinh 18 Usercase quan ly User, Video, Room (Admin)

18

J Quan ly Email (Admin)

Quan ly email

‘extend extend

- Header:

o Phan IP header: chita cdc dia chi nguồn, địa chỉ đích, các thông tin cần

thiết cho tầng Network

o_ Phản TÓP Header: cung cấp thông tin cơ bản của gói tin như phiên bản giao thức (HTTPS), kiểu dữ liệu, mã hóa, Bên cạnh đó còn chứa các

dữ liệu dé giúp client và server xác định yêu cầu của gói tin như đăng nhập tài khoản, tải video, tìm kiêm,

- _ Payload: chứa dữ liệu cần truyền tải, bao gồm các dữ liệu thô (video binary, text,

.)

19

Client (WinForms Application)

UI (Giao diện người dùng): Hiên thị các form như form đăng nhập, đăng ký, danh sách video, trình phát video

API Client: Lớp kết nói tới Web API của server qua HTTP Tat ca cac yéu cau

như đăng nhập, đăng ký và xem video sẽ được gửi đến server qua lớp này Trình phát video: Có thẻ tích hợp trình phát video vào WinForms đề xem video

từ server hoặc phát live-stream (qua đường dẫn cung cáp bởi server)

Server (NET Web API)

REST API: Xây dựng các endpoint RESTful cho các chức năng như đăng nhập (/api/auth/login), đăng ký (/api/auth/register), tải lên video, và lấy thông tin video

(/api/video)

SignalR: Sử dụng SignalR đề tạo kết nói hai chiều giữa client va server

Bảo mật và Xác thực: Sử dụng JWT (JSON Web Tokens) dé xac thuc và ủy quyén cac yéu cau tir client

Xử lý tệp video: Server sẽ lưu trữ hoặc xử lý đường dẫn của video, đảm bảo cung cap streaming URL cho client

JWT Token: Dam bao méi yéu cau tir client đều đi kèm token hợp lệ

SSL/TLS: Mã hóa đường truyền giữa client và server dé bảo vệ dữ liệu khi truyền

tải

20

- Client can dién day du thong tin dé dang ky

- Mat khau duoc gui qua Server sau đó Server sẽ thực hiện hashpassword

- _ Server kiếm tra xem tài khoản, email có tồn tại chưa, nếu chưa thì sẽ gửi mã OTP qua mail cho Client, OTP sé lwu vao dictionary dé tam ghi nho, néu trong 5’

Client không xác minh mã OTP thì mã OTP do bi sẽ xóa khoi dictionary

%& Verify OTP — x

Hinh 23 Form nhép OTP

21

CONFIRM YOUR EMAIL ON UITFLIX @#ếfđ8ỹ, inbox « 8 ø

s Itmkhongvui@gmail.com 8:00PM (2minutesago) ye ©

to me

Ea

UITFlix - NT106.P13

Thank you for becoming a member of UITflix!

Please do not reply to this email

( © Reply | ( r> Forward )

Hinh 24 Form email OTP dang ky

- Néu Client dién ma OTP trùng với OTP đã được gửi ở mail thì Server sẽ tiền hành lưu thông tin Client vao database và phía Olient sẽ trở về form đăng nhập

22

Hinh 25 Form dang nhap

- Client điền thông tin vào form đăng nhập, Server sẽ kiếm tra xem Client nay da tôn tại trong hệ thông hay chưa

- Mật khâu sẽ được hash đề kiếm tra xem nó có trùng với mật khâu đã hash được

lưu trong database hay không

- Nếu hợp lệ, Client sẽ được mở form Home tương ứng với role của mình (user

thông thường hoặc admin)

- Access token sẽ được tao ra va luu vao cookie Refresh token duoc luu vao

database

23

2 Cac tinh nang chung cua Client

- Néu Client click vao link Forget password? 6 trén form Login, mét form moi sé

được mở ra giúp Client tạo một mật khâu mới thông qua email đã đăng ký với tài

khoản trước đó

& Forget Password x

Cancel Send

Hinh 27 Form quén mat khdu

- Client can dién day đủ thông tin bao gồm email khdi phuc va mat khau moi Sau khi nhán gửi, một mã OTP sẽ được gui dén email cua Client Client can dién ma OTP đề hoàn thành tạo mật khẩu mới

24

RENEW PASSWORD OF YOUR UITFLIX ACCOUNT @#888f; inbox = 8 @

s Itmkhongvui@gmail.com 8:21PM (Iminute ago) yy ¬

tome v

=:

=

UITFlix - NT106.P13

Don't forget your password again!

Please do not reply to this email

( © Reply )( r> Forward |

Hinh 28 Form email OTP quên mát khẩu

- Néu ma OTP hop lệ, Server sẽ lưu mật khẩu mới vào hệ thống Client sẽ được quay vé form Login đề đăng nhập lại

25

2.3 Cập nhật thông tin người dùng

Change Avatar Update

Hình 29 Form cáp nhát thông zin øgười dùng

- Cho phép Client thay déi avatar, tén va bio

- Khinguoi dung thay déi bat kỳ thông tin nào trong ba cái trên, Client sẽ gửi các thay đổi đó đến server

- _ Server sẽ tạo một list UpdateDeñnition đề kiêm tra số thông tin đã được cập nhật

Nếu số phần tử của list nhỏ hơn 1, Server sẽ trả về lỗi

- _ Nếu Glient không viết gì vào bio, Server sẽ tự động gán giá trị mặc định là "<

This user is speechless >" thay cho giá trị null đề dễ xử lý hơn trong database

- _ Khi Glient cập nhật avatar, file ảnh sẽ được gửi qua Server đề gọi tới API Imgur,

sau đó Client sẽ sử dụng URL ảnh được trả về từ Imgur để cập nhật trên

PictureBox

26