Thiết kế và xây dựng web application chỉnh sửa video

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN THIẾT KẾ VÀ XÂY DỰNG WEB APPLICATION CHỈNH SỬA VIDEO GVHD: TS HUỲNH XUÂN PHỤNG SVTH : TRẦN QUỐC VIỆT SKL010930 Tp Hồ Chí Minh, tháng 6/2023 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP THIẾT KẾ VÀ XÂY DỰNG WEB APPLICATION CHỈNH SỬA VIDEO Giáo viên hướng dẫn: TS Huỳnh Xuân Phụng Sinh viên thực hiện: Trần Quốc Việt MSSV: 18110238 Khóa: K18 Ngành: Cơng Nghệ Thơng Tin TP Hồ Chí Minh, … tháng năm 2023 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc -*** - TP Hồ Chí Minh, ngày … tháng năm 2023 NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên Sinh viên: Trần Quốc Việt Ngành: Công Nghệ Thông Tin MSSV: 18110238 Lớp: 18110ST1 Giảng viên hướng dẫn: TS Huỳnh Xuân Phụng Ngày nhận đề tài: Ngày nộp đề tài: Đề tài: THIẾT KẾ VÀ XÂY DỰNG WEB APPLICATION CHỈNH SỬA VIDEO Nội dung thực đề tài:  Tìm hiểu tác vụ việc chỉnh sửa video  Tìm hiểu giới hạn web application thực việc chỉnh sửa video  Tìm hiểu thiết kế giao diện web application framework Angular  Tìm hiểu cơng cụ cho phép thao tác lên video  Tìm hiểu giới hạn xây dựng hệ thống rendering video NodeJS Sản phẩm: -WebApplication thực thao tác chỉnh sửa video thông dụng hệ thống rendering video TRƯỞNG NGÀNH GIÁO VIÊN HƯỚNG DẪN I CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc -*** - NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên: Trần Quốc Việt MSSV: 18110238 Tên đề tài: THIẾT KẾ VÀ XÂY DỰNG WEB APPLICATION CHỈNH SỬA VIDEO Họ tên Giáo viên hướng dẫn: TS Huỳnh Xuân Phụng NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Điểm (Bằng chữ: ) TP Hồ Chí Minh, ngày … tháng năm 2023 Giáo viên hướng dẫn (Ký tên & ghi rõ họ tên) II CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc -*** - NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên: Trần Quốc Việt MSSV: 18110238 Tên đề tài: THIẾT KẾ VÀ XÂY DỰNG WEB APPLICATION CHỈNH SỬA VIDEO Họ tên Giáo viên phản biện: Ths Mai Anh Thơ NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Điểm (Bằng chữ: ) TP Hồ Chí Minh, ngày … tháng năm 2023 Giáo viên phản biện (Ký tên & ghi rõ họ tên) III LỜI CẢM ƠN Đầu tiên em xin gửi lời cảm ơn đến thầy cô lãnh đạo Trường Đại học Sư phạm Kỹ Thuật TP Hồ Chí Minh, tạo điều kiện thuận lợi học thuật cở sở vật chất cho em học tập, rèn luyện, củng cố kiến thức phát triển thân suốt thời gian em theo học trường Nhờ giúp đỡ từ giáo viên khoa Công nghệ thông tin khoa Đào tạo Chất Lượng Cao nói chung, giáo viên hướng dẫn em, thầy Huỳnh Xn Phụng, nói riêng ln theo sát, giải đáp thắc mắc hỗ trợ em đưa hướng giải vấn đề khó khăn em gặp phải khoảng thời gian em thực đề tài Em thật chân thành gửi lời cảm ơn đến với thầy Cùng với em xin gửi lời cảm ơn đến bạn bè em tham gia học tập, đặt biệt bạn lớp CL2B, em cố gắng học tập để tới thời điểm Ngoài ra, em muốn gửi lời cảm ơn đến anh chị Ban Truyền thông Khoa Chất Lượng Cao, tạo điều kiện cho em tiếp xúc với nhiều vấn đề ngồi học thuật chun mơn, từ cho em nhiều góc nhìn phương pháp giải vấn đề Và cuối lời cảm ơn gửi tới gia đinh tin tưởng, đặt niềm tin vào đường học thuật mà em chọn động viên em khoản thời gian làm đề tài Em xin chân thành cảm ơn IV TÓM TẮT Hiện phát triển nhanh chóng mạng Internet, đặt biệt sau lần bùng phát dịch COVID2019 vào hai quí cuối năm 2021, số lượt truy cập vào mạng xã hội từ tiếng tên xa lạ tăng nhanh, ta dễ dàng thấy điều thông qua việc trang tin, báo đài thời gian đề cập tới mạng xã hội Việt Lotus, Butta, Gapo, …Tuy có tăng trưởng lại tương đối, thời điểm Tiktok tên bùng nổ, với danh hiệu mạng xã hội chia video lớn giới vượt qua Youtube Như Isaac Newton nói “Nếu tơi nhìn xa tơi đứng vai người khổng lồ”, thay tạo mạng xã hội chen chút với ơng lớn ngành em hướng tới công cụ bổ trợ cho họ ý tưởng “Web Application chỉnh sửa video” đời Web Application hướng tới đối tượng người dùng bắt đầu, với cách thức làm việc tối giản để đạt hiệu hiệu tốt V MỤC LỤC NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP I NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN II NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN III LỜI CẢM ƠN IV TÓM TẮT V MỤC LỤC VI DANH MỤC BẢNG X DANH MỤC HÌNH XII DANH MỤC TỪ VIẾT TẮT XIII CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 LÝ DO CHỌN ĐỀ TÀI 1.2 MỤC TIÊU 1.3 CÔNG NGHỆ SỬ DỤNG CHƯƠNG 2.1 CƠ SỞ LÝ THUYẾT NODEJS (BACK-END) 2.1.1 Giới thiệu 2.1.2 Ưu điểm 2.1.3 Nhược điểm 2.1.4 Lý sử dụng 2.1.5 Các thư viện sử dụng 2.2 ANGULAR (FRONT-END) 2.2.1 Giới thiệu 2.2.2 Ưu điểm 2.2.3 Nhược điểm 2.2.4 Lý sử dụng 2.2.5 Các thư viện sử dụng 2.3 FFMPEG 2.3.1 Giới thiệu 2.3.2 Ưu điểm VI 2.3.3 Nhược điểm 2.3.4 Lý sử dụng CHƯƠNG 3.1 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU KHẢO SÁT HIỆN TRẠNG 3.1.1 Trang web Clipchamp.com 3.1.2 Phần mềm DaVinci Resolve 3.2 XÁC ĐỊNH YÊU CẦU 3.2.1 3.3 Nghiệp vụ 3.2.1.1 Đối tượng sử dụng 3.2.1.2 Chức ĐÁNH GIÁ VÀ LỰA CHỌN CÔNG NGHỆ 3.3.1 Mục tiêu đề tài 3.3.2 Nội dung 3.3.3 Mơi trường lập trình 10 3.3.4 Phương pháp nghiên cứu 10 3.3.5 Ý nghĩa khoa học, thực tiễn 10 CHƯƠNG 4.1 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 11 PHÂN TÍCH HỆ THỐNG 11 4.1.1 Sơ đồ lớp 11 4.1.2 Sơ đồ usecase 12 4.1.3 Mô tả sơ đồ usecase 15 4.1.4 Đặc tả Usecase 18 4.1.4.1 Usecase đăng ký 18 4.1.4.2 Usecase đăng nhập 18 4.1.4.3 Usecase đăng tải video 19 4.1.4.4 Usecase tạo điểm cắt video 20 4.1.4.5 Usecase gửi yêu cầu render 22 4.1.4.6 Usecase nhận video từ client 22 4.1.4.7 Usecase ghép video 23 4.1.4.8 Usecase render video 24 VII 4.1.4.9 Usecase addLUTFilter 26 4.1.4.10 Usecase send video to e-mail 26 4.1.4.11 Usecase xóa liệu cũ 27 4.2 THIẾT KẾ HỆ THỐNG 28 4.2.1 Tổng quát chương trình 30 4.2.2 Tổng quan Database 31 4.3 THIẾT KẾ GIAO DIỆN 33 4.3.1 Danh sách giao diện người dùng 33 4.3.1.1 4.3.2 4.4 Mô tả chi tiết giao diện 33 Danh sách giao diện chương trình 38 4.3.2.1 Giao diện chung 38 4.3.2.2 Mô tả chi tiết giao diện 40 THIẾT KẾ XỬ LÝ DỮ LIỆU ĐOẠN VIDEO 49 4.4.1 Thiết kế cách thức cắt video 49 4.4.2 Thiết kế cách thức ghép video 50 4.4.3 Thiết kê phương thức tăng tốc video 51 4.4.4 Thiết kế phương thức thay đổi màu sắc video 52 CHƯƠNG 5.1 CÀI ĐẶT VÀ KIỂM THỬ 53 CÀI ĐẶT 53 5.1.1 Cài đặt môi trường 53 5.1.2 Cài đặt phần mềm 53 5.2 KIỂM THỬ 54 5.2.1 Kiểm thử chức login 54 5.2.2 Kiểm thử chức sign up 55 5.2.3 Kiểm thử chức upload 55 5.2.4 Kiểm thử chức send request render video 57 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 58 6.1 TỔNG KẾT 58 6.2 KẾT LUẬN 58 6.2.1 Về mặt lý thuyết 58 VIII