1. Trang chủ
  2. » Luận Văn - Báo Cáo

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

58 4 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây Dựng WebRTC OC (Online Conference)
Tác giả Nguyễn Trung Hiếu, Trần Thị Kim Oanh
Người hướng dẫn Ths. Lê Viết Trương
Trường học Trường Đại học Công nghệ Thông tin và Truyền thông Việt - Hàn, Đại học Đà Nẵng
Chuyên ngành Khoa học máy tính
Thể loại Báo cáo đồ án cơ sở 4
Năm xuất bản 2021
Thành phố Đà Nẵng
Định dạng
Số trang 58
Dung lượng 8,54 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

Do vậy mà trong việc phát triển ứng dụng, sự đòi hỏi không chỉ là sự chính xác, xử lý được nhiều nghiệp vụ thực tế mà còn phải đáp ứng các yêu cầu khác như về tốc độ, giaodiện thân thiện

Trang 1

ĐẠI HỌC ĐÀ NẴNGTRƯỜ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Ở 4

ĐỀ 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

Trang 2

ĐẠI HỌC ĐÀ NẴNGTRƯỜ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Ở 4

ĐỀ 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

Trang 3

LỜI CẢM ƠN

Trong suốt thời gian làm đồ án, nhóm chúng em nhận được rất nhiều sự 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ệtHàn - ĐHĐN đã tạo điều kiện thuận lợi cho em thực hiện đề tài đồ án cơ sở 4 này Xin cảm

ơn quý Thầy Cô bộ môn của 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 những kiến thức quý báu trong nămhọ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ậntình hướng dẫn em trong suốt quá trình thực hiện làm đồ án này

Cảm ơn các bạn trong lớp, trong trường, trong Khoa khoa học máy tính - Trường ĐHCNTT & TT Việt Hàn - ĐHĐN đã hỗ trợ, giúp đỡ, chia sẻ kinh nghiệm và kiến thức chonhóm trong quá trình thực hiện đề tài

Trong quá trình làm đồ án, do kiến thức về lập trình mạng chưa thực sự sâu sắc nên

đồ án của chúng em không thể tránh khỏi những sai sót Mong thầy cô thông cảm và góp ýthêm cho chúng em để đồ án được hoàn chỉnh hơn

Chúng em xin chân thành cảm ơn!

Trang 4

LỜI NÓI ĐẦU

Cùng với sự phát triển không ngừng của các ngành khoa học kỹ thuật, các ngànhcông nghiệp cũng phát triển nhanh chóng Việc áp dụng những công nghệ hiện đại vàonhiều lĩnh vực trong cuộc sống đó là điều tất yếu Song song với sự phát triển đó là sự pháttriển về văn hóa, về các phương thức truyền thông mạng

Sự ra đời của công nghệ thông tin là sự tích hợp đồng thời các tiến bộ về công nghệ

và tổ chức thông tin, đem đến nhiều ảnh hưởng tích cực cho sự phát triển của xã hội Côngnghệ thông tin và đặc biệt là sự phát triển của internet mở ra một kho kiến thức vô cùng đadạng và phong phú cho mọi người, giúp cho việc tìm hiểu kiến thức đơn giản hơn rất nhiều.Hiện nay 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ể cả học tậplẫn công việc của mọi người Nỗi lo lớn nhất lúc này là làm sao để học tập, giảng dạy tốtcũng như thực hiện tốt các công việc mà không cần ra ngoài Giải pháp tốt nhất cho vấn đềnày chính là xây dựng nên một hệ thống hỗ trợ hoạt động học tập và làm việc trực tuyến

Do đó, nhóm chúng em quyết để thực hiện đề tài: “XÂY DỰNG WEBRTC OC (ONLINE CONFERENCE)” Ứng dụng sẽ giúp người dùng có một cái nhìn tốt hơn về mạng xã hội cũng như biết cách chọn lọc thông tin khi dùng mạng xã hội

Bằng sự cố gắng nỗ lực và đặc biệt là sự giúp đỡ tận tình, chu đáo của giảng viên hướngdẫn ThS Lê Viết Trương, em đã hoàn thành đồ án môn học đúng thời hạn Do thời gian làm

đồ án có hạn và trình độ còn nhiều hạn chế nên không thể tránh khỏi những thiếu sót Emrất mong nhận được sự đóng góp ý kiến của các thầy cô cũng như là của các bạn sinh viên

để bài đồ án này hoàn thiện hơn nữa

Đ Nng, ngy 5 tháng 11 năm 2021

Trang 5

NHẬN XÉT

………

………

………

………

………

………

………

………

Đ nng, ngy … tháng … năm 2021

Chữ ký của giảng viên hướng dẫn

Trang 6

MỤC LỤC

LỜI CẢM ƠN 3

LỜI NÓI ĐẦU 4

NHẬN XÉT 5

MỤC LỤC 6

DANH MỤC HÌNH 9

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 3

Nhiệm vụ nghiên cứu 4

Phương pháp và phạm vi nghiên cứu 4

Phương tiện nghiên cứu 4

Kết quả đề tài 4

Bố cục báo cáo 5

CHƯƠNG 1 TỔNG QUAN 6

1.1 Hệ thống WEBRTC 6

1.1.1 Khái niệm 6

1.1.2 Quá trình phát triển 6

1.1.3 Một số giao thức trong WebRTC 8

1.1.4 Cách thức hoạt động 11

Trang 7

1.1.5 Cấu trúc liên kết WebRTC 13

1.1.6 Một số ứng dụng của WebRTC 16

1.2 Các nền 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 những yêu cầu hệ thống 20

1.3.1 Yêu cầu chức năng 20

1.3.2 Yêu cầu phi chức năng 20

CHƯƠNG 2 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 và 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 hiện chức năng 23

2.3 Biểu đồ hoạt động 24

2.3.1 Biểu đồ hoạt động thực hiện chức năng Chat text 25

2.3.2 Biểu đồ thực hiện chức năng Chia sẻ màn hình 25

CHƯƠNG 3 XÂY DỤNG WEBRTC OC 26

3.1 Kiến trúc tổng thể của 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 và 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

Trang 8

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 quả đạt được 43

Hạn chế 44

Hướng phát triển 44

TÀI LIỆU THAM KHẢO 45

Trang 9

DANH MỤC HÌNH

Hình 1 1 Mô hình WebRTC 9

Hình 1 2 Mô tả cách thức hoạt dộng của TURN 10

Hình 1 3 Mô hình tam giác WebRTC 12

Hình 1 4 Peer-to-peer 14

Hình 1 5 SFU 14

Hình 1 6 Điều khiển đa điểm 15

Hình 1 7 Logo Google Meet 18

Hình 1 8 Logo Zoom 19

Hình 2 1 Biểu đồ Usecase 21

Hình 2 2 Biểu đồ trình tự đăng nhập 22

Hình 2 3 Biểu đồ trình tự người dùng thực hiện các chức năng 23

Hình 2 4 Biểu đồ hoạt động tổng quát của người dùng 24

Hình 2 5 Biểu đồ hoạt động thực hiện chức năng Chat Text 25

Hình 2 6 Biểu đồ hoạt động thực hiện chức năng Chia sẻ màn hình 25

Hình 3 1 Kiến trúc tổng thể 27

Hình 3 2 Mô hình nền tẳng nodejs 29

Hình 3 3 Blocking I/O (trái) và Non-Blocking I/O (phải) 30

Hình 3 4 Mô hình socket 31

Hình 3 5 Cấu trúc thư mục backend 34

Hình 3 6 Cấu trúc thư mục frontend 39

Hình 3 7 Giao diện khi bắt đầu 39

Hình 3 8 Tiến hành tạo phòng chat 40

Hình 3 9 Tiến hành đặt User name và setting camera và mic 40

Hình 3 10 Giao diện trang chủ khi đăng nhập vào 41

Trang 10

Hình 3 11 Giao diện chức năng nhắn tin trong phòng 41 Hình 3 12 Giao diện chức năng share màn hình 42 Hình 3 13 Giao diện chức năng sau khi share màn hình 42

DANH MỤC BẢNG

Trang 11

Bảng 2 1 Nhận diện tác nhân và UseCase 21

Trang 12

DANH MỤC VIẾT TẮT

(Giao tiếp với website theo thời gian thực)

( Môi trường phát triển tích hợp)

(Ngôn ngữ mô hình hóa thống nhất)

(Kiến trúc định hướng mô hình)

5 RDBMS Relational Database Management System

(Hệ quản trị cơ sỡ dữ liệu quan hệ)

(Giao diện lập trình ứng dụng)

Trang 13

MỞ ĐẦU

Cùng với sự phát triển không ngừng của các ngành khoa học kỹ thuật, các ngànhcông nghiệp cũng phát triển nhanh chóng Việc áp dụng những công nghệ hiện đại vàonhiều lĩnh vực trong cuộc sống đó là điều tất yếu Song song với sự phát triển đó là sự pháttriển về văn hóa, về các phương thức truyền thông mạng

Sự ra đời của công nghệ thông tin là sự tích hợp đồng thời các tiến bộ về công nghệ

và tổ chức thông tin, đem đến nhiều ảnh hưởng tích cực cho sự phát triển của xã hội Côngnghệ thông tin và đặc biệt là sự phát triển của internet mở ra một kho kiến thức vô cùng đadạng và phong phú cho mọi người, giúp cho việc tìm hiểu kiến thức đơn giản hơn rất nhiều.Hiện nay 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ể cả học tậplẫn công việc của mọi người Nỗi lo lớn nhất lúc này là làm sao để học tập, giảng dạy tốtcũng như thực hiện tốt các công việc mà không cần ra ngoài Giải pháp tốt nhất cho vấn đềnày chính là xây dựng nên một hệ thống hỗ trợ hoạt động học tập và làm việc trực tuyến

Do đó, nhóm chúng em quyết để thực hiện đề tài: “XÂY DỰNG WEBRTC OC (ONLINE CONFERENCE)” Ứng dụng sẽ giúp người dùng có một cái nhìn tốt hơn vềmạng xã hội cũng như biết cách chọn lọc thông tin khi dùng mạng xã hội

Giới thiệu đề tài

Hiện nay, công nghệ thông tin được xem là một ngành mũi nhọn của các quốc gia,đặc biệt là các quốc gia đang phát triển, tiến hành công nghiệp hóa và hiện đại hoá nhưnước ta Sự bùng nổ thông tin và sự phát triển mạnh mẽ của công nghệ kỹ thuật số, yêu cầumuốn phát triển thì phải tin học hoá vào tất cả các ngành các lĩnh vực

Cùng với sự phát triển nhanh chóng về phần cứng máy tính, các ứng dụng ngày càng trởnên đa dạng, phong phú, hoàn thiện hơn và hỗ trợ hiệu quả cho con người Các ứng dụnghiện nay ngày càng mô phỏng được rất nhiều nghiệp vụ khó khăn, hỗ trợ cho người dùngthuận tiện sử dụng, thời gian xử lý nhanh chóng, và một số nghiệp vụ được tự động hoá cao

Do vậy mà trong việc phát triển ứng dụng, sự đòi hỏi không chỉ là sự chính xác, xử

lý được nhiều nghiệp vụ thực tế mà còn phải đáp ứng các yêu cầu khác như về tốc độ, giaodiện thân thiện, mô hình hoá được thực tế vào máy tính để người sử dụng tiện lợi, quen

13

Trang 14

thuộc, tính tương thích cao, bảo mật cao (đối với các dữ liệu nhạy cảm), … Các ứng dụnggiúp tiết kiệm một lượng lớn thời gian, công sức của con người, và tăng độ chính xác vàhiệu quả trong công việc (nhất là việc sửa lỗi và tự động đồng bộ hoá).

Một ví dụ cụ thể, ngày nay sự phát triển của cuộc cách mạng công nghiệp 4.0 cùng với sựphổ biến rộng rải của điện thoại di động và internet Nhu cầu trao đổi thông tin, làm việcgiữa mọi người ngày càng lớn nhất là trong tình hình dịch bệnh như hiện nay thì hệ thốnghội nghị trực tuyến là lựa chọn tối ưu nhất Nó giúp người dùng mùa dịch vẫn có thể họp,làm việc và học tập Hỗ trợ nhiều tính năng như camera, mic, chatbox, note, painting, chia

sẽ màn hình…

Áp dụng kiến thức đã học để phát triển các nền tảng như trên là cần thiết Bởi vì điềunày cho phép học thêm các công nghệ mới, rèn luyện kỹ năng lập trình, đồng thời nâng caokinh nghiệm và học thêm các kỹ năng quan trọng khác.Xây dựng một ứng dụng hội nghịtrực có thể giúp mọi người dễ dàng làm việc và bàn luận cùng nhau dù họ ở đâu trên thếgiới này chỉ cần một thiết bị như laptop hoặc điện thoại có kết nối internet thì khoảng cáchkhông là vấn đề Không chỉ vậy, ứng dụng còn phải giúp người dùng tìm kiếm và kết nốivới nhau để có thể trao đổi liên lạc và chia sẽ thông tin với nhau Thiết lập bảo mật cho cáctin nhắn truyền đi Hạn chế một số rủi ro khi làm việc

Báo cáo tiến độ đề tài cho giảng viên hướng dẫn

Tuần thứ 2

(27/9 – 3/10)

Nghiên cứu tiếp cận các công nghệ và chức năng của những ứngdụng, web, webRTC hội nghị trực tuyến Từ đó đưa ra ý tưởng vềgiao diện, chức năng webRTC mà nhóm muốn thực hiện

Báo cáo tiến độ đề tài cho giảng viên hướng dẫn

Trang 15

Báo cáo tiến độ đề tài cho giảng viên hướng dẫn

Tiến hành viết báo cáo đồ án

Báo cáo tiến độ đề tài cho giảng viên hướng dẫn

Tuần thứ 10

(22/11 - 28/11)

Hoàn thiện back – end sử dụng Javascript, Nodejs…

Viết báo cáo đồ án

Báo cáo tiến độ đề tài cho giảng viên hướng dẫn

Các tuần còn lại

(29/11 – 5/12)

Hoàn thiện WebRTC với những chức năng như tương tác: Screensharing, chat, video call, Painting… và một số tính năng khác nhưđăng nhập bằng nhận diện khuôn mặt, bảo mật thông tin tránh bị tấncông hoặc bị hacker xâm nhập

Hoàn thiện báo cáo và slide báo cáo

Nôp báo cáo và sản phẩm hoàn thiện lên hệ thống đào tạo

Mục tiêu nghiên cứu

Xây dựng một ứng dụng hoàn thiện về giao diện và tối ưu về chức năng Ứng dụng

sẽ giúp người dùng dễ dàng truy cập và thực hiện họp mặt trực tuyến Tại đây người dùng

có thể thỏa sức bày tỏ cảm xúc, những mong muốn, những tâm sự cần được bày tỏ Trên hệthống của chúng tôi người dùng có thể nhắn tin, gửi tệp, gửi hình ảnh cũng như video call,gọi âm thanh… Chúng tôi đang dự định tích hợp đăng nhập bằng khuôn mặt và hệ thốngbảo mật mã hóa thông tin tệp khi tải về

- Xây dựng một hệ thống mới phù hợp, dể hiểu, dể sử dụng cho người dùng hệ thốngmạng xã hội CO Hiểu được hệ thống mạng xã hội, cần quản lý những mảng nào để xâydựng hệ thống cho phù hợp nhu cầu thực tiễn

- Giúp người dùng có nhiều sự lựa chọn hơn trong việc sử dụng hệ thống hội nghịtrực tuyến, tôi tin rằng hệ thống của chúng tôi nếu hoàn thiện nó sẽ là một sự lựa chọnkhông tồi cho người dùng vì sự tối ưu, dễ dàng và tiện lợi

15

Trang 16

- Giúp bản thân có thêm khả năng sáng tạo, tư duy thông qua thiết kế giao diện tươngtác với người dùng, vận dụng kiến thức bản thân vào thực tiễn.

Nhiệm vụ nghiên cứu

Phần mềm này được tạo ra nhằm đem đến sự thuận tiện cho người dùng cũng như giúpcho các trường học có thể thực hiện dạy học trực tuyến mùa dịch

Phương pháp và phạm vi nghiên cứu

Phương pháp nghiên cứu:

- Tham khảo, nghiên cứu thêm các tài liệu trên trang web, trang báo, tìm hiểu tình hìnhthực trạng của đề tài

- Tìm hiểu các đề tài của các anh chị khóa trước đã làm hoặc tìm hiểu qua sách báo,trang mạng liên quan đến đề tài nghiên cứu

- Quan sát việc xây dựng một hệ thống hội nghị trực tuyến rồi tổng hợp, phân tích vàthống kê số liệu

Phạm vi nghiên cứu: Xoay quanh mọi người dùng có nhu cầu từ học tập, làm việc, cho

đến gọi điện nói chuyện nhóm…

Phương tiện nghiên cứu

- Nghiên cứu cơ sở lý thuyết về phân tích và thiết kế hệ thống thông tin

- Hệ thống WebRTC, API trong WebRTC…

- Sử dụng các công cụ Visual studio code, Sublime Text 3… để lập trình, thiết kế giaodiện và hoàn thiện chức năng

Kết quả đề tài

Hoàn thiện ứng dụng về mặt giao diện và một số chức năng cơ bản Ứng dụng hoànthiện tạo nên một mối liên hệ mới giữa các học sinh với nhau hay giữa các cộng sự vớinhau Ứng dụng với một số chức năng chính sau dành cho người dùng:

- Video call ( bật/tắt camera)

- Gọi âm thanh Microphone ( bật/tắt microphone)

- Chia sẻ màn hình

- Chat box ( Khung chat hiển thị với mọi người trong cuộc họp)

16

Trang 17

Sau khi kết thúc một dự án thứ không thể thiếu chính là báo cáo viết về đề tài của mình vàslide trình bày dự án Báo cáo chi tiết trình bày bố cục mục lục hợp lý

Trang 18

1.1.2 Quá trình phát triển

WebRTC được bắt đầu từ Google nhằm xây dựng một chuẩn dựa trên máy phươngtiện thời gian thực (Real time Media Engine) trong tất cả các trình duyệt Ý tưởng này đượcđưa ra bởi nhóm phát triển Google Hangouts từ năm 2009 Sau khi mua lại công ty Global

IP Solutions (GIPS) năm 2010 (Công ty hỗ trợ những ứng dụng điện thoại trên nền PC chocác Công ty lớn như Nortel(Avaya), Webex(Cisco), Yahoo, IBM…) và Công ty On2 năm

2011 (Công ty tạo ra chuẩn video codec VP8), Google đã phát hành WebRTC như là dự án

mã nguồn mở dựa trên các công nghệ đạt được của GIPS và On2, chứa những thành phầnnền tảng cho việc truyền thông chất lượng cao trên môi trường Web Những thành phần nàykhi được thực hiện trong trình duyệt, có thể được truy cập qua các JavaScripts APIs, chophép những nhà lập trình xây dựng những ứng dụng web đa phương tiện Những công ty hỗtrợ phát triển WebRTC tích cực nhất gồm có Google, Mozilla, Opera

Sự phát triển của WebRTC qua các năm gần đây trên các trình duyệt thể hiện ở các mốc thời gian:

 27/10/2011: Bản dự thảo WebRTC đầu tiên được W3C công bố

 Tháng 11/2011, WebRTC được hỗ trợ một phần trên Chrome 23 (chưa hỗ trợ DataChannel API)

6

Trang 19

 Tháng 1/2013: WebRTC được hỗ trợ một phần trên Firefox 20 (hỗ trợ APIGetUserMedia - API cho phép truy cập media trên máy).

 Tháng 6/2013: Firefox 22 phát hành, hỗ trợ khả năng tạo cuộc gọi video cũng như sửdụng Data Channel API

 Tháng 7/2013: Phiên bản beta của Chrome 29 trên Android hỗ trợ WebRTC

 Tháng 8/2013: Chrome 29 trên Android hỗ trợ đầy đủ WebRTC

 Tháng 10/2013: Phiên bản beta Opera 18 giới thiệu hỗ trợ WebRTC

 Tháng 3/2014: Phiên bản Opera 20 cho Android hỗ trợ WebRTC

10/02/2015: WebRTC 1.0 working draft chính thức được công bố, đến nay đã được hỗ trợbởi các trình duyệt Chrome (version 23 trở lên), Firefox (version 22 trở lên), Opera (version

18 trở lên) và được hỗ trợ trình duyệt trên nền tảng Android (Chrome 29 trở lên, Firefox 24trở lên, Opera Mobile 12 trở lên, Google Chrome OS)

Tuy chưa được Microsoft, Apple tuyên bố hỗ trợ nhưng WebRTC vẫn tiếp tục được nghiêncứu mở rộng và hoàn thiện, bản cập nhật mới nhất được thực hiện vào 16/09/2016.WebRTC được phát triển dưới sự phối hợp chặt chẽ của tổ chức W3C và InternetEngineering Task Force – Lực lượng quản lý kỹ thuật mạng Internet (IETF) Tổ chức W3C,chủ yếu là nhóm Web Real-Time Communications Working Group, có nhiệm vụ định nghĩacác APIs phía client (client-side) để cho phép truyền thông thời gian thực trên trình duyệtWeb Những APIs giúp xây dựng ứng dụng chạy trong trình duyệt, không yêu cầu thêmdownload hay cài đặt plugin, cho phép truyền thông giữa các bên sử dụng audio, video theothời gian thực không qua các máy chủ trung gian (trừ một số trường hợp cần thiết khi vượtNAT, tường lửa Tổ chức IETF, chủ yếu là nhóm RTC in WEB-Browser Working Group, cónhiệm vụ định nghĩa các giao thức, định dạng dữ liệu, bảo mật … sử dụng trong WebRTC

để thiết lập, điều khiển, quản lý việc truyền thông giữa trình duyệt

Trước khi WebRTC xuất hiện, khi muốn xây dựng một ứng dụng web đa phương tiện đanền tảng, người ta thường sử dụng Flash, Java Applet và tích hợp plugins các nhà cung cấpthứ ba để thực hiện Giải pháp như vậy được coi là “nặng” và khó triển khai cũng như hỗtrợ về sau Điều này thúc giục việc nghiên cứu giải pháp đơn giản, hiệu quả hơn cho cácứng dụng đa phương tiện, đặc biệt trên cơ sở người dùng hiện nay có thể truy cập được

7

Trang 20

Internet mọi lúc mọi nơi WebRTC ra đời để giải quyết vấn đề này, khi nó được tích hợp vớicác Voice Engine, Video Engine tốt nhất và được triển khai trên hàng triệu thiết bị đầu cuốihàng năm.

Những lợi ích của WebRTC:

 Giảm giá thành: chi phí triển khai và hỗ trợ IT thấp vì không cần cài đặt phần mềmclient đặc biệt nào phía client

 Không Plugins: trước đây phải sử dụng Flash, Java Applets và các giải pháp khác đểxây dựng ứng dụng web tương tác đa phương tiện, phải download và cài đặt cácplugin của bên thứ ba để có thể sử dụng nội dung đa phương tiện, ngoài ra còn phảilưu ý đến những giải pháp/plugin cho các hệ điều hành và nền tảng (platform) khácnhau Với WebRTC thì không cần quan tâm đến vấn đề này nữa

 Truyền thông P2P: trong đa phần các trường hợp, truyền thông được thiết lập trựctiếp giữa trình duyệt, không cần có những điểm trung gian

 Dễ sử dụng: có thể dễ dàng tích hợp tính năng WebRTC trong dịch vụ web/trang webbằng cách sử dụng JavaScript APIs, những framework đã có sẵn

 Một giải pháp cho mọi nền tảng: không cần phát triển những phiên bản dịch vụ webcho những nền tảng khác nhau (Windows, Android, IOS…)

 Mã mở và miễn phí: WebRTC được Google đưa thành dự án mã nguồn mở, và được

hỗ trợ bởi những công ty quốc tế như Mozilla, Google và Opera, thêm cộng đồngtrên thế giới có thể phát hiện những lỗi mới và giải quyết nhanh chóng hoàn toànmiễn phí

 Built-in security: WebRTC quy định mọi dữ liệu truyền P2P đều được bảo mật và mãhóa

1.1.3 Một số giao thức trong WebRTC

Giao thức UDP được sử dụng trong WebRTC là giao thức vận chuyển.Nhưng để thỏamãn yêu cầu của trình duyệt phải hỗ trợ giao thức và dịch vụ ở lớp khác nữa.Về cơ bản cácgiao thức chính sử dụng trong WebRTC được thể hiện ở hình dưới:

8

Trang 21

Hình 1 1 Mô hình WebRTC SRTP

SRTP (Secure Real Time Protocol) được sử dụng để mã hóa và chuyển các gói tin mediagiữa các WebRTC client.Sau khi thiết lập thành công PeerConnection,kết nối SRTP sẽ đượcthiết lập giữa các trình duyệt và máy chủ.Với dữ liệu non-audio hay video, SRTP khôngđược sử dụng, thay vào đó là SCTP

SCTP

WebRTC sử dụng SCTP (Stream Control Tranmission Protocol) để truyền dữ liệu media giữa các peer Giao thức SCTP là giao thức vận chuyển tương tự như TCP và UDP,cóthể chạy trực tiếp trên giao thức IP SCTP được lựa chọn do có những tính năng tốt của TCP

non-và UDP như message-oriented transmission, khả năng cấu hình tùy biến tính tin cậy non-và thứ

tự gói tin, có cơ chế quản lý lưu lượng và chống nghẽn

DTLS

Datagram Transport Layer Security- DTLS giao thức này cung cấp tính năng bảo mật vàtoàn vẹn dữ liệu Tất cả các dữ liệu truyền P2P đều được bảo mật sử dụng DTLS

NAT

NAT cung cấp một địa chỉ IP để sử dụng trong mạng nội bộ Nhưng địa chỉ này không được

sử dụng bên ngoài mạng Không biết địa chỉ công khai sẽ không có cách nào để hai Peer có

9

Trang 22

thể tương tác Để giải quyết vấn đề đó WebRTC sử dụng STUN (Session Traversal Utilitiesfor NAT) [8] STUN server tồn tại trên mạng internet và chỉ có nhiệm vụ duy nhất là kiểmtra địa chỉ IP và cổng của yêu cầu vừa đến và gửi trở lại IP và cổng đó.Các ứng dụng sử dụngSTUN server để cung cấp IP và cổng công khai từ internet Từ đó một WebRTC peer có thể

tự lấy được địa chỉ IP và cổng công khai và đưa nó cho các peer khác thông qua cơ chếsignaling

TURN

Traversal Using Relays around NAT (TURN) Được xây dựng nhằm vượt qua symmetricNAT bằng cách mở một kết nối tới TURN server và đáp lại tất cả thông tin thông qua servernày (dữ liệu audio/video/data streaming giữa các peer, không phải signaling data).Turnserver làm được điều này vì nó có một public địa chỉ, vì thế nó có thể liên lạc với các peerthậm chí peer có tường lửa hoặc proxy đứng sau Hình dưới mô tả hoạt động của TURNserver

Hình 1 2 Mô tả cách thức hoạt dộng của TURN

SDP

Session Description Protocol là một chuẩn mô tả các thông số của mỗi kết nối như là độphân giải, định dạng, codecs, mã hóa… Điều này làm cho mỗi peer có thể hiểu nhau khi dữ

10

Trang 23

liệu được truyền Đây thực chất là meta-data miêu tả nội dung chứ không phải là dữ liệumedia.

ICE

Interactive Connectivity Establishment là một chuẩn được sử dụng để thiết lập kết nốigiữa các các peer trên internet.Mặc dù WebRTC là kết nối trực tiếp Peer-to-Peer, nhưng thực

tế nó vẫn gặp phải vấn đề NAT (Network Address Translation) gây khó khăn khi kết nối.ICE

sẽ cố gắng thiết lập kết nối bằng cách tìm đường đi tốt nhất cho kết nối.Bằng cách thử hếtcác khả năng song song nhau, ICE có thể chọn ra được lựa chọn hiệu quả nhất cho kết nối.Đầu tiên ICE cố gắng kết nối sử dụng địa chỉ host lấy được từ hệ điều hành hoặc card mạng.Nếu thất bại nó sẽ lấy địa chỉ IP public thông qua STUN server.Nếu vẫn thất bại, lưu lượngđược gửi thông qua TURN server Các cách để kết nối này được gọi là “candidate”, cáchthức trao đổi sẽ được mô tả ở các phần bên sau

1.1.4 Cách thức hoạt động

WebRTC về cơ bản là giao tiếp web thời gian thực thông qua các trình duyệt Nó chophép giao tiếp giữa các trình duyệt Ứng dụng web WEBRTC được lập trình như một hỗnhợp của HTML và JavaScript Người dùng cũng có thể sử dụng CSS để tùy chỉnh giao diệncủa giao tiếp Nó hoạt động và giao tiếp với các trình duyệt web thông qua API WebRTCđược tiêu chuẩn hóa Do đó, API WebRTC phải cung cấp một loạt các tiện ích Một số trong

số chúng giống như quản lý kết nối (theo cách ngang hàng), khả năng mã hóa / giải mã đàmphán, lựa chọn và điều khiển, điều khiển phương tiện, tường lửa, v.v Để hiểu giao tiếpWEBRTC trong trình duyệt, bạn phải xem qua các thành phần và kiến trúc khác nhau Phạm vi triển khai trong WebRTC rất cao vì nó có khả năng tùy biến cao Hoạt động của

WEBRTC có thể được chia thành ba thành phần :

MediaStream : Bước đầu tiên là có dữ liệu mà người dùng muốn chia sẻ Trong

trường hợp này, luồng mà người dùng muốn (âm thanh / video), phương thức giaotiếp để thiết lập được ghi lại Luồng phương tiện cục bộ cấp cho trình duyệt quyềntruy cập vào các thiết bị phát trực tuyến như máy ảnh, micrô trên web Nó cũng chophép trình duyệt nắm bắt phương tiện Người dùng có thể sửdụng getUserMedia()chức năng để có quyền truy cập từ trình duyệt

11

Trang 24

RTCPeerConnection : Khi người dùng đã quyết định luồng giao tiếp thì bước tiếp

theo là kết nối nó với hệ thống của đối tác Nó cho phép trình duyệt của bạn trao đổi

dữ liệu trực tiếp với các trình duyệt đối tác (ngang hàng) cho các cuộc gọi thoại vàvideo Nó cho phép liên kết giữa người gửi và người nhận thông qua các máychủ STUNTURN

RTCDataChannel : Nó cho phép các trình duyệt trao đổi dữ liệu hai chiều ngang

hàng CreateDataChannel()hàm được gọi lần đầu tiên trên một đối tượngPeerConnection được khởi tạo

Tam giác WebRTC:

Hình 1 3 Mô hình tam giác WebRTC

- WEBRTC chứa ba lớp API khác nhau dành cho các nhà phát triển web Lớp đầu tiênchứa tất cả các yêu cầu của nhà phát triển web API, bao gồm RTCPeerConnection,RTCDataChannel và các đối tượng luồng phương tiện và các chức năng củachúng Thứ hai là API dành cho các nhà sản xuất trình duyệt Thứ ba là API có thểghi đè, mà các nhà sản xuất trình duyệt có thể móc vào

- Nếu bạn nhìn vào kiến trúc WebRTC từ phía máy khách-máy chủ thì bạn có thể thấyrằng một trong những mô hình được sử dụng phổ biến nhất được lấy cảm hứng từHình thang SIP (Session Initiation Protocol)

12

Trang 25

- Hãy tưởng tượng bạn và bạn của bạn đang chạy ứng dụng WEBRTC Bạn muốn giaotiếp với bạn bè của mình Sau đó, các bản tin báo hiệu được sử dụng mà công việccủa chúng là thiết lập và kết thúc liên lạc.

- Các thông báo này được chuyển đến máy chủ web bằng giao thức HTTP hoặcWebSocket có thể sửa đổi, dịch hoặc quản lý chúng nếu cần

- Đối với đường dẫn dữ liệu, một PeerConnection cho phép phương tiện truyền trựctiếp giữa các trình duyệt mà không cần bất kỳ máy chủ nào can thiệp Hai máy chủweb có thể giao tiếp bằng giao thức tín hiệu tiêu chuẩn và giao tiếp được thiết lậpgiữa bạn và bạn của bạn

Hạn chế của WebRTC:

- Người ta phải có kết nối internet nhanh để giao tiếp với WEBRTC

- Nó không cung cấp bất kỳ dịch vụ ngoại tuyến nào

- Nó không có sẵn trong tất cả các trình duyệt

- Không có dịch vụ cố định cung cấp cơ sở cho mọi trình duyệt Nó liên tục cập nhật

và một số phần mềm có thể cung cấp các dịch vụ phức tạp hơn những phần mềmkhác với khả năng truy cập dễ dàng và các tiện ích khác

Tương lai của WebRTC:

Trong thế giới truyền thông xã hội, có hơn 5 tỷ người dùng đang sử dụng giao tiếptrực tuyến Bạn có thể quan sát tính năng gọi điện video một chạm trên thiết bị di động hoặc

hệ thống của mình mà không cần cài đặt bất kỳ plugin và tải xuống nào WebRTC hiện đangcải thiện chất lượng cuộc gọi video trong trường hợp kết nối kém hoặc truy cập internetchậm Chẳng bao lâu nữa WebRTC sẽ trở thành tiêu chuẩn cho các công ty cung cấp dịch vụkhách hàng Nó sẽ là tương lai của giao tiếp kinh doanh

1.1.5 Cấu trúc liên kết WebRTC

Cấu trúc liên kết ngang hàng (lưới) là kiểu kết nối duy nhất được đề cập trong đặc tảWebRTC Tuy nhiên, có nhiều trường hợp sử dụng mà cấu trúc liên kết lưới không đủ Cấutrúc liên kết dựa trên máy chủ có thể giúp giải quyết những nhược điểm này và thường được

sử dụng trong thế giới của WebRTC để truyền phương tiện Cấu trúc liên kết tốt nhất cho

13

Trang 26

bất kỳ ứng dụng nhất định nào phụ thuộc phần lớn vào các trường hợp sử dụng dự kiến, vìmỗi một cấu trúc đều có bộ lợi ích và nhược điểm riêng.

Peer-to-peer (Mesh)

Hình 1 4 Peer-to-peer

Trong cấu trúc liên kết ngang hàng hoặc mạng lưới, mỗi người tham gia trong một phiên kếtnối trực tiếp với tất cả những người tham gia khác mà không cần sử dụng máy chủ Loại kếtnối này hoàn hảo cho các hội nghị truyền hình nhỏ vì nó có chi phí thấp nhất và dễ thiết lậpnhất Tuy nhiên, khi các hội nghị phát triển, việc duy trì kết nối trực tiếp giữa tất cả nhữngngười tham gia trở nên không bền vững vì nó có thể trở nên quá tốn CPU Vì các kết nối làtrực tiếp giữa các đồng nghiệp, cấu trúc liên kết lưới không cho phép ghi lại tốt

Vì những lý do này, cấu trúc liên kết lưới là tốt nhất cho các ứng dụng đơn giản kết nối 2-3người cùng tham gia, như thế sẽ đảm bảo về tình trạng trễ trang hay tình trạng nghẽn mạng

Ví dụ về các trường hợp sử dụng tiềm năng bao gồm:

Chuyển tiếp có chọn lọc (SFU)

14

Trang 27

Hình 1 5 SFU

Trong cấu trúc liên kết chuyển tiếp chọn lọc, mỗi người tham gia trong một phiên kết nốivới một máy chủ hoạt động như một đơn vị chuyển tiếp chọn lọc (SFU) Mỗi người thamgia tải luồng video được mã hóa của họ lên máy chủ một lần Sau đó, máy chủ sẽ chuyểntiếp các luồng đó tới từng người tham gia khác Điều này làm giảm độ trễ và cũng cho phépnhững thứ như chuyển mã, ghi và tích hợp phía máy chủ khác như SIP, điều này sẽ khó hơnnhiều trong kết nối ngang hàng

Cấu trúc liên kết không phải là không có giới hạn của nó Mặc dù có một kết nối ngượcdòng duy nhất làm cho nó tải lên hiệu quả hơn so với cấu trúc liên kết lưới, nhưng việc cónhiều kết nối xuôi dòng có nghĩa là mỗi máy khách cuối cùng sẽ hết tài nguyên khi một sốlượng người tham gia nhất định hoạt động trong phiên

Vì những lý do này, cấu trúc liên kết chuyển tiếp chọn lọc là tốt nhất cho các ứng dụng kếtnối 4 đến 10 người tham gia, nơi độ trễ thấp là quan trọng hoặc nơi yêu cầu ghi và tính toànvẹn là rất quan trọng Cấu trúc liên kết này thường được coi là cân bằng nhất

Ví dụ về các trường hợp sử dụng tiềm năng bao gồm:

Điều khiển đa điểm (Trộn)

15

Trang 28

Hình 1 6 Điều khiển đa điểm

Trong cấu trúc liên kết điều khiển đa điểm, mỗi người tham gia trong một phiên kết nối vớimột máy chủ hoạt động như một đơn vị điều khiển đa điểm (MCU) MCU nhận phương tiện

từ mỗi người tham gia và giải mã nó, trộn âm thanh và video từ những người tham gia vớinhau thành một luồng duy nhất, lần lượt được mã hóa và gửi đến từng người tham gia Điềunày yêu cầu sử dụng ít băng thông hơn và CPU thiết bị nhưng nó yêu cầu CPU máy chủ bổsung để trộn âm thanh / video thành các luồng đơn MCU cũng là một lựa chọn tuyệt vời đểgiải quyết các điều kiện mạng kém vì nó cung cấp mức sử dụng băng thông thấp nhất có thểcho mỗi người tham gia riêng lẻ

Vì những lý do này, cấu trúc liên kết điều khiển đa điểm là tốt nhất cho các ứng dụng quy

mô lớn kết nối số lượng lớn người tham gia hoặc điều kiện mạng kém hoặc nơi yêu cầu ghi

và tính toàn vẹn là rất quan trọng

Ví dụ về các trường hợp sử dụng tiềm năng bao gồm:

- Phát sóng quy mô lớn của nhiều luồng đầu vào

Trang 29

thể thay đổi khi số lượng người tham gia tăng và giảm Ví dụ: nếu việc ghi là quan trọng,bắt đầu với cấu trúc liên kết chuyển tiếp chọn lọc và sau đó chuyển sang cấu trúc liên kếtđiều khiển đa điểm xung quanh số lượng 10 người tham gia có thể có ý nghĩa nhất Nếu chiphí quan trọng hơn tính toàn vẹn của việc ghi, ứng dụng của bạn có thể bắt đầu với cấu trúcliên kết lưới và chuyển đổi khi cần thiết Ngăn xếp Máy chủ LiveSwitch của chúng tôi làmột ví dụ tuyệt vời về cấu trúc liên kết kết hợp và là một trong số ít Máy chủ đa phươngtiện kết hợp trên thị trường hiện nay.

- WebRTC kết hợp với một bộ hàm nữa là WebGL có thể dùng xử lý đồ họa

- WebRTC có thể được sử dụng cho việc truyền tải video, âm thanh cho đến gửi dữliệu theo thời gian thực giữa hai hoặc nhiều thiết bị với nhau mà không nhất thiếtphải đi qua server trung gian Điều này giúp giảm độ trễ trong việc truyền tải, giảm

độ phức tạp khi phát triển ứng dụng cũng như giảm chi phí vận hành (vì không phảitrả tiền thuê server, tiền điện, tiền bảo dưỡng ), kéo theo đó giá bán dịch vụ nếu cóthì cũng sẽ thấp hơn

17

Ngày đăng: 24/08/2023, 10:21

HÌNH ẢNH LIÊN QUAN

Hình 1. 1. Mô hình WebRTC - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 1. 1. Mô hình WebRTC (Trang 21)
Hình 1. 2. Mô tả cách thức hoạt dộng của TURN - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 1. 2. Mô tả cách thức hoạt dộng của TURN (Trang 22)
Hình 1. 8. Logo Zoom - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 1. 8. Logo Zoom (Trang 31)
Bảng 2. 1. Nhận diện tác nhân và UseCase - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Bảng 2. 1. Nhận diện tác nhân và UseCase (Trang 33)
Hình 2. 3. Biểu đồ trình tự người dùng thực hiện các chức năng - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 2. 3. Biểu đồ trình tự người dùng thực hiện các chức năng (Trang 35)
Hình 2. 4. Biểu đồ hoạt động tổng quát của người dùng - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 2. 4. Biểu đồ hoạt động tổng quát của người dùng (Trang 36)
Hình 2. 6. Biểu đồ hoạt động thực hiện chức năng Chia sẻ màn hình - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 2. 6. Biểu đồ hoạt động thực hiện chức năng Chia sẻ màn hình (Trang 37)
Hình 2. 5. Biểu đồ hoạt động thực hiện chức năng Chat Text 2.3.2. Biểu đồ thực hiện chức năng Chia sẻ màn hình - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 2. 5. Biểu đồ hoạt động thực hiện chức năng Chat Text 2.3.2. Biểu đồ thực hiện chức năng Chia sẻ màn hình (Trang 37)
Hình 3. 1. Kiến trúc tổng thể - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 3. 1. Kiến trúc tổng thể (Trang 39)
Hình 3. 4. Mô hình socket - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 3. 4. Mô hình socket (Trang 44)
Hình 3. 7. Giao diện khi bắt đầu - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 3. 7. Giao diện khi bắt đầu (Trang 52)
Hình 3. 10. Giao diện trang chủ khi đăng nhập vào - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 3. 10. Giao diện trang chủ khi đăng nhập vào (Trang 53)
Hình 3. 12. Giao diện chức năng share màn hình - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 3. 12. Giao diện chức năng share màn hình (Trang 54)
Hình 3. 11. Giao diện chức năng nhắn tin trong phòng - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 3. 11. Giao diện chức năng nhắn tin trong phòng (Trang 54)
Hình 3. 13. Giao diện chức năng sau khi share màn hình - Báo cáo đồ án cơ sở 4 đề tài xây dựng webrtc oc (online conference)
Hình 3. 13. Giao diện chức năng sau khi share màn hình (Trang 55)

TỪ KHÓA LIÊN QUAN

TRÍCH ĐOẠN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm

w