Tìm hiểu cơ chế screen sharing p2p bằng webrtcxây dựng ứng dụng chat & call, nhắn tin và gọi Điện

Giới thiệu về lập trình mạngTên Đề tài : Xây dựng ứng dụng Chat & Call, nhắn tin và gọi điện.Lập trình mạng là nhiệm vụ cơ bản để phát triển các ứng dụng trong hệ thống doanh nghiệp, từ

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

ĐỒ ÁN CƠ SỞ 4BÁO CÁO LẬP TRÌNH MẠNG

Tìm hiểu cơ chế screen sharing p2p bằng WebRTCXây dựng ứng dụng

Chat & Call, nhắn tin và gọi điện

Sinh viên thực hiện: Hoàng Lê Huy

Giảng viên hướng dẫn: THS Nguyễn Thanh CẩmLương Khánh Tý

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

ĐỒ ÁN CƠ SỞ 4

Tìm hiểu cơ chế screen sharing p2p bằng WebRTCXây dựng ứng dụng

Chat & Call, nhắn tin và gọi điện

Giảng viên hướng dẫn: THS Nguyễn Thanh CẩmLương Khánh Tý

Đà Nẵng, tháng 12 năm 2022

ii

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

LỜI CẢM ƠN

Trong thời gian làm báo cáo, chúng em đã nhận được nhiều sự giúp đỡ, đónggóp ý kiến và chỉ bảo nhiệt tình của thầy cô và bạn bè Chúng em xin gửi lời

cảm ơn chân thành đến thầy ThS Nguyễn Thanh Cẩm Lương Khánh Tý

đã tận tình hướng dẫn, chỉ bảo chúng em trong suốt quá trình làm báo cáo.Chúng em cũng xin chân thành cảm ơn các thầy cô giáo trong trường Đại họccông nghệ thông tin và truyền thông Việt Hàn nói chung, các thầy cô trongKhoa công nghệ thông tin nói riêng đã dạy dỗ cho chúng em kiến thức về cácmôn đại cương cũng như các môn chuyên ngành, giúp chúng em có được cơ

sở lý thuyết vững vàng và tạo điều kiện giúp đỡ chúng em trong suốt quátrình học tập Cuối cùng, chúng em xin chân thành cảm ơn gia đình và bạn

bè, đã luôn tạo điều kiện, quan tâm, giúp đỡ, động viên em trong suốt quátrình học tập và hoàn thành báo này

Do điều kiện thời gian có hạn và kinh nghiệm làm báo cáo chưa có nhiều nên

em không thể tránh khỏi những thiếu sót trong lúc trình bày cũng như làmbáo cáo, kính mong nhận được những ý kiến đóng góp từ quý thầy cô

Em xin chân thành cảm ơn!

Sinh viên

Hoàng Lê Huy

iv

MỤC LỤC

Chương 1 TỔNG QUAN VỀ SẢN PHẨM 5

1 Giới thiệu về lập trình mạng: .5

2 Giới thiệu về các công nghệ: .6

2.1. WebRTC: .6

2.2. NodeJS: .7

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 8

1 Cơ chế chia sẻ màn hình p2p .8

2 Xây dựng biểu đồ .9

Chương 3 Một số hình ảnh demo sản phẩm .14

Chương 3 KẾT LUẬN 16

1 Kết quả đạt được 16

2 Hướng nghiên cứu 16

DANH MỤC CÁC TỪ VIẾT TẮT vi

DANH MỤC HÌNH VẼ .vii

No table of figures entries found vii

1 Đặc tả yêu cầu .4

2 Xây dựng các biểu đồ .4

3 Kết chương 2 .4

Chương 3 XÂY DỰNG … 5

1 AAAAA .5

2 BBBBBBB .5

3 Kết chương 3 .5

KẾT LUẬN .6

1 Kết quả đạt được .6

2 Hướng nghiên cứu .6

Với những hạn chế và tồn tại nêu trên, hướng nghiên cứu …dự kiến như sau: .6

PHỤ LỤC i

vii

DANH MỤC CÁC TỪ VIẾT TẮT

5E Engagement, Exploration, Explanation, Elaboration,

Evaluation

STEM Science Technology Engineering Mathematics

DANH MỤC HÌNH VẼ

No table of figures entries found.

ix

CChươnhươn g 1 TỔNG QUAN VỀ SẢN PHẨM

1 Giới thiệu về lập trình mạngTên Đề tài :

Xây dựng ứng dụng Chat & Call, nhắn tin và gọi điện.Lập trình mạng là nhiệm vụ cơ bản để phát triển các ứng dụng trong hệ thống doanh nghiệp, từ chương trình phần mềm quản lý như kế toán, nhân sự,… cho đến ứng dụng giải trí là trò chơi, điều khiển…

Lập trình mạng được xây dựng dựa trên công thức:

Lập trình mạng (LTM) = Kiến thức mạng truyền thông + Mô hình LTM + Ngôn ngữ LTM

Dựa theo công thức trên, ta có thể thấy có ba vấn đề chính cốt lõi là kiến thứcmạng truyền thông, mô hình lập trình mạng và ngôn ngữ lập trình mạng.Kiến thức mạng truyền thông là những kiến thức về mạng điện thoại di động,PSTN, hệ thống GPS, mạng như BlueTooth, WUSB, mạng sensor… Nhất là cách sử dụng cũng như khai thác chúng

Mô hình lập trình mạng là những kiến thức về cách xây dựng hệ thống mạng,

mô hình xây dựng chương trình ứng dụng mạng, kiến thức về cơ sở dữ liệu…Cuối cùng là ngôn ngữ lập trình mạng, đây là yếu tố quyết định xem các chương trình mạng của bạn sẽ hoạt động như thế nào Có rất nhiều ngôn ngữ lập trình mạng khác nhau, tùy theo mục đích sử dụng

2 Giới thiệu về các công nghệ:

2.1 WebRTC:

WebRTC (Web Real-Time Communication) là một tiêu chuẩn định nghĩatập hợp các giao thức truyền thông và các giao diện lập trình ứng dụng chophép truyền tải thời gian thực trên các kết nối peer to peer Điều này chophép các trình duyệt web không chỉ yêu cầu tài nguyên từ máy chủ mà còntruyền thông tin thời gian thực với trình duyệt khác Về bản chất, WebRTC

là tập hợp các chuẩn và giao thức cho phép trình duyệt web thực hiện trựctiếp các tính năng truyền thông đa phương tiện thời gian thực như gọi điện,truyền hình, truyền dữ liệu, gửi tin nhắn bằng các APIs Javascripts

3

2.2 NodeJS:

Node.js là một nền tảng JavaScript cực kì mạnh mẽ được sử dụng để pháttriển ác ứng dụng chat online, các trang phát video trực tiếp, các ứng dụngmột trang, và rất nhiều ứng dụng web khác Được xây dựng trênJavaScript V8 Engine của Google Chrome, nó được sử dụng rộng rãi bởi

cả các công ty lớn và các startup mới nổi.Node.js có mã nguồn mở, hoàn toàn miễn phí và được hàng ngàn lập trìnhviên trên thế giới sử dụng Nó mang lại rất nhiều lợi ích so với các nềntảng phía máy chủ khác như Java hoặc PHP

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG

1 Đặc tả yêu cầuCơ chế chia sẻ màn hình p2p

Chia sẻ màn hình p2p, hay còn gọi là chia sẻ màn hình máy tính p2p, là việcbạn chia sẻ các nội dung trên màn hình thiết bị của bạn với một hoặc nhiều thiết

bị khác Bạn có thể lựa chọn trình chiếu toàn bộ nội dung trên màn hình hoặc chỉmột cửa sổ, từ đó có thể hoàn toàn kiểm soát thông tin hay hình ảnh được chia

sẻ và đảm bảo tính riêng tư Với Screen Share của TeamViewer, bạn có thể chia

sẻ cho bạn bè, đồng nghiệp hoặc khách hàng bất kỳ dữ liệu nào có trên thiết bịcủa bạn mà không phải gửi bất kỳ tập tin nào, bao gồm các bài thuyết trình,tài liệu, hình ảnh và video Ngoài ra, phần mềm chia sẻ màn hình này chophép người nhận không chỉ xem tài liệu trên thiết bị được chia sẻ, mà còn có thểquan sát trong thời gian thực khi người dùng tương tác với các tài liệu, điềuhướng giao diện và thực hiện các thay đổi

Chia sẻ màn hình trực tuyến hoạt động dựa trên cơ chế chia nhỏ thông tin được

mô tả trên màn hình của thiết bị thành các gói thông tin được mã hóa và gửichúng đến một thiết bị khác qua mạng internet Sau đó, thiết bị của người nhậnxây dựng lại hình ảnh nhận được từ màn hình kia Screen Share củaTeamViewer có thể nén dữ liệu để giảm thiểu các yêu cầu về băng thông, đồngthời theo dõi cẩn thận các hoạt động của người dùng trên màn hình: phần mềm

sẽ chỉ truyền thông tin khi có thay đổi hoặc chuyển động trên màn hình Do đó,

TeamViewer mang lại trải nghiệm kết nối ổn định và chất lượng hình ảnh sắc

nét trong phiên chia sẻ màn hình.Chat & Call là một ứng dụng web sử dụng để

phục vụ mục đích giao tiếp từ xa giữa người và người thông qua các thiết bị cókết nối với internet

5

Ứng dụng sẽ yêu cầu hầu hết tất cả người dùng phải thực hiện bước xác thựcngười dùng nếu muốn sử dụng các dịch vụ của ứng dụng chủ yếu là việc nhắntin và gọi điện Nếu chưa có tài khoản, người dùng sẽ phải tạo một tài khoảnmới.

Người dùng khi đã vượt qua bước xác thực sẽ được sử dụng các chức năng từviệc tìm người dùng muốn liên lạc và nhắn tin, nhắn tin với người dùng đã tìmthấy, call audio, video 1 – 1, xóa các cuộc trò chuyện không mong muốn

2 Xây dựng các biểu đồ

3 Xây dựng biểu đồBiểu đồ cơ sở dữ liệu:

3.1 Biểu đồ Use – Case

Kết chương 2

Quy trình …

7

- Đặc tả một số use – case cơ bản:

- Use – case join server:

o Đối tượng sử dụng: Người dùng.

o Tác dụng: Cho phép người dùng tham gia vào hệ thống và thực

hiện các chức năng của hệ thống

o Tiền điều kiện: Người dùng chưa tham gia

o Hậu điều kiện: Người dùng đã tham gia

o Các bước thực hiện:

 Bước 1: Người dùng truy cập trang hệ thống

 Bước 2: Nhập tên người dùng

 Bước 3: Nhấp vào “join server”

 Bước 4: Người dùng được tham gia vào hệ thống

- Use – case share screen:

o Đối tượng sử dụng: Người dùng.

o Tác dụng: Cho phép người dùng có thể chia sẻ màn hình

o Tiền điều kiện: Người dùng chưa chia sẻ màn hình

o Hậu điều kiện: Người dùng đã chia sẻ màn hình

o C ác bước thực hiện:

 Bước 1: Người dùng phải tham gia vào hệ thống để sử dụng

chức năng này

 Bước 2: Nhấn nút “Share screen”.

 Bước 3: Chọn màn hình muốn chia sẻ và chia sẻ màn hình.

- Use – case: Call remote user

o Đối tượng sử dụng: Người dùng.

o Tác dụng: Cho phép người dùng chia sẻ màn hình tới peer từ xa.

o Tiền điều kiện: Người dùng chưa chia sẻ màn hình tới peer từ xa

o Hậu điều kiện: Người dùng đã chia sẻ màn hình tới peer từ xa

o Các bước thực hiện:

 Bước 1: Người dùng chia sẻ màn hình trên máy tính của

mình

 Bước 2: Tìm người dùng để thực hiện chia sẻ.

 Bước 3: Nhấn nút call với người dùng muốn chia sẻ Bước 4: Chia sẻ màn hình peer từ xa

3.2 Biểu đồ hoạt động.

- Biểu đồ hoạt động join server

9

- Biểu đồ hoạt dộng chia sẻ màn hinh

- Biểu đồ hoạt động chia sẻ màn hình tới máy từ xa

11

Chương 3 Một số hình ảnh demo sản phẩm XÂY DỰNG …

- Người dùng tham gia vào server

phía người dùng & về phía người quản trị, giao diện…

- Chia sẻ màn hình phía local

- Phía remote nhận được màn hình local

13

- Sản phẩm đã thực hiện được nhiệm vụ cơ bản đó là chia sẻ màn hình tới người dùng từ xa.Nêu những gì mình học được, đạt được qua quá trình làm đồ án về mặt lý thuyết, về mặt thực nghiệm, trải nghiệm…

Tuy nhiện sản phẩm vẫn còn có một số hạn chế về việc kết nối, giao diện còn quá cơ bản

2 Hướng nghiên cứu

Với những hạn chế và tồn tại nêu trên, hướng nghiên cứu …dự kiến nhưsau:

- Tìm hiểuTăng cường tính ổn định giữa việc kết nối

- Phát triển giao diện

- Không chỉ chia sẻ giao diện để nghe nhìn mà còn có thể điều khiểnđược máy từ xa

- Khai thác…

15

TÀI LIỆU THAM KHẢO

[1].[1

]

[2].T C f S Exploration, "Why STEM Topics are Interrelated: The Importance of Interdisciplinary Studies in K-12 Education," 2008.[3].[2

"http://thoibaotaichinhvietnam.vn/pages/quoc-te/2015-12-08/10-[15] [

8]

[16] "http://truonghocketnoi.edu.vn/data/thuvien/DongPhD/hoclieu_3650611_1446867073.pdf"

[36]. Error! Hyperlink reference not

valid.https://cs231n.github.io/python-numpy-tutorial/

- WebRTC documentation: https://webrtc.org/

ii

PHỤ LỤC