WebRTC là gì? Cách viết ứng dụng gọi video bằng WebRTC và Firebase – Trung tâm hỗ trợ kỹ thuật | MATBAO.NET

WebRTC là gì?

WebRTC là các API viết bằng javascript giúp giao tiếp theo thời gian thực mà không cần cài plugin hay phần mềm hỗ trợ. WebRTC có khả năng hỗ trợ trình duyệt giao tiếp thời gian thực thông qua Video Call, Voice Call hay transfer data P2P(peer-to-peer), không cần đến plugin, phần mềm khác. Vậy ý nghĩa viết tắt của chữ WebRTC là gì?

WebRTC là gì? Là tập hợp các API và được viết bằng javascriptWebRTC là tập hợp các API và được viết bằng javascript

WebRTC là viết tắt của cụm từ Web Real-Time Communication rất được các lập trình viên ưa chuộng. WebRTC cho phép các trình duyệt giao tiếp với nhau theo thời gian thực .Ví dụ như: gọi điện, video, chơi game,… Ngoài ra, WebRTC là một sản phẩm của World Wide Web Consortium (W3C).

Lịch sử của WebRTC

webrtc là gì? Là dự án mã nguồn mở miễn phí của GoogleLà dự án mã nguồn mở miễn phí của Google

WebRTC đã được hình thành ý tưởng từ những năm 2009 bởi nhóm kỹ sư Google Hangouts. Thay vì sử dụng Flash để truyền video, hình ảnh trên web, họ quyết định tự tạo ra một sản phẩm của riêng mình.

Năm 2010, khi hai công ty On2 và Global IP Solutions(GIPS) chính thức bị Google thâu tóm, công nghệ truyền dữ liệu thời gian thực cũng được lấy làm nền tảng cho WebRTC. Đến tháng 5 năm 2011, dự án nguồn mở hỗ trợ giao tiếp thời gian thực giữa trình duyệt mang tên WebRTC mới chính thức được ra mắt.

Cùng lúc đó, W3C và Hiệp Hội Kỹ Sư Quốc Tế(IETF) cũng phát triển các giao thức kết nối thời gian thực. Vì thế, họ đã quyết định bắt tay để cùng nhau xây dựng sản phẩm này. Tháng 10 năm 2011, phiên bản đầu tiên của WebRTC chính thức ra mắt, đến tháng 11, Chrome 23 ra đời và trở thành trình duyệt đầu tiên tích hợp sẵn WebRTC.

WebRTC dùng để làm gì?

WebRTC được ứng dụng trong nhiều lĩnh vựcWebRTC được ứng dụng trong nhiều lĩnh vực

Tính năng nổi bật nhất của WebRTC chắc chắn chính là khả năng truyền tải video, âm thanh, gửi dữ liệu theo thời gian thực giữa hai hay nhiều thiết bị mà không qua trung gian, không cần cài thêm plugin.

Trang web Appear. in từng là một trong những website sử dụng WebRTC khá nổi tiếng. Trang này phân phối dịch vụ tạo phòng chat video nhanh gọn mà không cần setup thêm bất kỳ plugin nào, không cần đăng nhập thông tin tài khoản .

Không chỉ các ứng dụng mà WebRTC còn được sử dụng cho việc tạo ra các tựa game trên trình duyệt. Người chơi chỉ cần sử dụng trình duyệt có hỗ trợ WebRTC để chơi, không cần cài đặt rườm rà.

Lợi ích của WebRTC là gì?

WebRTC mang đến nhiều lợi ích cho cả người dùng và lập trình viênWebRTC mang đến nhiều lợi ích cho cả người dùng và lập trình viên

  • Mã nguồn mở miễn phí

    : WebRTC là một dự án Bất Động Sản mã nguồn mở không tính tiền. Google cho biết đây là một công cụ truyền thông online thời hạn thực trọn vẹn không lấy phí và có sẵn trên mọi trình duyệt .

  • Hỗ trợ đa nền tảng

    : Mặc dùWebRTCvẫn trong quy trình tiến độ tăng trưởng nhưng nó đã hoạt động giải trí tốt trên hầu hết mọi trình duyệt của những hệ điều hành quản lý bất kể. Cho phép lập trình viên viết những đoạn mã HTML thao tác với máy tính hoặc thiết bị di động .

  • Bảo mật voice và video

    :

    Giao thức SRTP (Secure Real-Time Transport Protocol) được dùng để mã hóa và xác thực dữ liệu media. Chống lại các khả năng bị nghe trộm trong quá trình thực hiện tác vụ video hay voice.

  • Không cần plugin hay phần mềm hỗ trợ

    : Yếu tố quan trọng giúpWebRTCđược nhìn nhận rất cao chính là năng lực hoạt động giải trí không cần đến plugin bên thứ ba mang đến sự tiện nghi, tối ưu vận tốc, tiết kiệm ngân sách và chi phí ngân sách, …

  • Tương đối dễ sử dụng

    : WebRTC

    có thể được tích hợp trong các dịch vụ web bằng cách dùng JavaScript APIs, các Framework có sẵn.

  • Sử dụng bằng thông hiệu quả: Hỗ trợ nhiều kiểu truyền thông và những thiết bị đầu cuối khác nhau ,WebRTCsử dụng băng thông hiệu quả hơn, hoạt động giải trí tốt trong mọi điều kiện kèm theo đường truyền mạng .

Ưu và nhược điểm của WebRTC là gì?

WebRTC có khá nhiều những ưu điểm. Tuy nhiên nó vẫn tồn tại một số những nhược điểm. Hãy cùng Mắt Bão tìm hiểu chi tiết về ưu và nhược điểm của WebRTC bên dưới đây!

Ưu điểm của WebRTC là gì?

Hỗ trợ đa nền tảng, đa trình duyệt trên các thiết bịHỗ trợ đa nền tảng, đa trình duyệt trên các thiết bị

  • Được viết bằng ngôn từ javascript nên thuận tiện tiếp cận và sử dụng .
  • Hoàn toàn không lấy phí .
  • Có thể tương hỗ đa nền tảng, đa trình duyệt web trên máy tính, PC, những thiết bị di động … .
  • Tính bảo mật thông tin cao .
  • Không cần setup, không cần plugin, ứng dụng tương hỗ .
  • Dùng được trong nhiều điều kiện kèm theo đường truyền mạng .

Nhược điểm của WebRTC là gì?

WebRTC chưa hỗ trợ toàn diện tất cả trình duyệtWebRTC chưa hỗ trợ toàn diện tất cả trình duyệt

  • WebRTC bị cản bởi NAT và tường lửa khi nỗ lực thực thi liên kết P2P .
  • Không có chính sách báo hiệu cài sẵn khi WebRTCtạo liên kết P2P giữa những trình duyệt .
  • WebRTC vẫn chưa chính thức triển khai xong, một số ít trình duyệt như IE, Safari chưa thực sự được tương hỗ tốt nhất .
  • Các hãng trình duyệt chưa thống nhất được chuẩn video sử dụng cho WebRTC .
  • Số lượng hàm API WebRTC tương hỗ cho mỗi trình duyệt là khác nhau, tăng rủi ro đáng tiếc phát sinh lỗi khi sử dụng trên những trình duyệt khác nhau .

Các phần chính của WebRTC và chức năng của WebRTC API là gì?

Cung cấp tính năng truyền dữ liệu thời gian thựcCung cấp tính năng truyền dữ liệu thời gian thực

MediaStream

MediaStream là một stream dữ liệu âm thanh và hình ảnh, bằng cách gọi hàm getUserMedia để khởi tạo khi làm việc cục bộ. MediaStream sẽ cho phép truy cập vào stream của một máy tính sau khi một kết nối WebRTC được thiết lập với một máy tính khác.

Một MediaStream sẽ có input và output với input dùng để lấy dữ liệu hình ảnh và âm thanh của local trong khi output dùng để hiển thị các dữ liệu này lên view hoặc được RTCPeerConnection sử dụng.

RTCDataChannel

Đúng với cái tên của mình, RTCDataChannel là một kênh hai chiều chịu trách nhiệm trao đổi dữ liệu thời gian thực. RTCDataChannel sẽ trao đổi các dữ liệu dạng text, chia sẻ tệp P2P và các loại khác mà không chứa các dữ liệu nghe nhìn(âm thanh, hình ảnh). Khả năng trao đổi thông tin nhanh chóng, an toàn, đáng tin khiến RTCDataChannel được khai thác để xây dựng các giải pháp mới và hiệu quả về chi phí.

RTCPeerConnection

Là phần quan trọng giúp kết nối MediaStream và RTCDataChannel trở thành WebRTC. RTCPeerConnection là API giúp kết nối giữa hai trình duyệt, cung cấp các phương thức để kết nối, duy trì kết nối và đóng kết nối khi không còn nhu cầu sử dụng.

Cách viết ứng dụng gọi video bằng WebRTC và Firebase

WebRTC cho phép gọi video không cần pluginWebRTC cho phép gọi video không cần pluginCác kỹ năng và kiến thức tương quan mà fan hâm mộ cần nắm trước khi xem phần này :

Firebase là một nền tảng để phát triển ứng dụng di động và trang web, bao gồm các API đơn giản và mạnh mẽ mà không cần backend hay server.

WebRTC hỗ trợ đa nền tảng và đa ngôn ngữ vì vậy bạn có thể dùng nó cho trang web có đuôi HTML hoặc PHP đều được.

Bước 1: Cài đặt Firebase

webrtc là gì? Chọn Create a project để tạo một dự án mớiChọn Create a project để tạo một dự án mới

  • Nếu Firebase không hiển thị ngôn từ tiếng Anh, hãy thêm? hl = envào cuối URL .
  • Điền tên cho project và chọn “Continue” để liên tục .

webrtc là gì? Chọn tên cho project của bạnChọn tên cho project của bạn

  • Tắt Google Analytic cho project

  • Chọn “Create Project”, chờ một lúc để chương trình khởi tạo .

webrtc là gì? Bạn có thể sử dụng Analytic để theo dõi projectBạn có thể sử dụng Analytic để theo dõi project

  • Khi đã hoàn tất, bạn sẽ nhận được thông tin tựa như, nhấn “Continue” để liên tục .

webrtc là gì? Tạo project mới thành côngTạo project mới thành công

  • Chọn hình tượngSettingbên cạnh “Project Overview
  • Kéo thanh trượt xuống để chọn loại platform, ở đây tất cả chúng ta viết ứng dụng cho Web nên sẽ chọn hình tượng Web .

webrtc là gì? Chọn loại platform cho ứng dụngChọn loại platform cho ứng dụng

  • Điền tên App, chọn thiết lậpHostingcho app hoặc bạn hoàn toàn có thể setup sau và chọn “Register app”.

webrtc là gì? Đặt tên ứng dụng và tạo ứng dụng mớiĐặt tên ứng dụng và tạo ứng dụng mới

  • Copy đoạn code này và dán vào bên dưới thẻ

  • Bạn hoàn toàn có thể bỏ lỡ bước này và chọn “Next” tất cả chúng ta sẽ triển khai sau ở phần code .

webrtc là gì? Code được cung cấp để chèn vào trang web của bạnCode được cung cấp để chèn vào trang web của bạn

  • Tiếp tục chọn “Next” cho đến phần cuối bạn chọn“Continue to Console” .
  • Kéo thanh trượt xuống mục Firebase SDK snippet và chọn CDN, chúng ta sẽ tiếp tục đến phần code web.

webrtc là gì? Đoạn code sử dụng cho trang web cần cấu hìnhĐoạn code sử dụng cho trang web cần cấu hình

  • Bạn cần thực thi thêm một bước nữa, đó là tạoRealtime Database.

webrtc là gì? Chọn thẻ Database để tạo mới Database cho projectChọn thẻ Database để tạo mới Database cho project

  • Chọn test mode để người khác hoàn toàn có thể ghi vào database của bạn .

webrtc là gì? Chọn test-mode cho phép mọi người ghi databaseChọn test-mode cho phép mọi người ghi database

Bước 2: Code web để kết nối Firebase

Tạo ra một giao diện website với 2 khung hiển thị cho camera 2 máy được kết nối. Sử dụng thẻ và thêm CSS để giao diện thêm rõ ràng.

Định nghĩa những dòng code :

var database = firebase.database().ref();

Cấp quyền truy vấn vào thư mục gốc của cơ sở tài liệu Firebase

sendMessage database.on('child_added', readMessage);

Hàm được sử dụng để thêm cơ sở tài liệu vào Firebase

var yourId = Math.floor(Math.random()*1000000000);

Dùng để tạo yourId random (ngẫu nhiên)

var servers = {'iceServers': [

{'urls': 'stun:stun.services.mozilla.com'},

{'urls': 'stun:stun.l.google.com:19302'}

]};

Khai báo sever sử dụng ở đây là hai sever STUN của Google và Firefox, tùy nhu yếu mà bạn hoàn toàn có thể thêm hoặc bớt .

Giao thức STUN

STUN viết tắt của cụm từ Session Traversal Utilities for NAT là một giao thức mạng cho phép các máy khách tìm ra địa chỉ công khai của mình, loại NAT mà chúng đang đứng sau và cổng phía Internet được NAT gắn liền với cổng nội bộ nào đó. Từ đó, thiết lập giao tiếp UDP giữa 2 host mà đều nằm sau NAT router, giao thức STUN được định nghĩa trong RFC 5389.

var pc = new RTCPeerConnection(servers);

Tạo mới một đối tượng người dùng PeerConnection

pc.onicecandidate = (event => event.candidate ? sendMessage(yourId, JSON.stringify({'ice': event.candidate})) : console.log('Sent All Ice') );

Chờ ICE Candidate được tạo trên máy tính của bạn.

pc.onaddstream = (event => friendsVideo.srcObject = event.stream);

Chờ các đối tượng Offer, Answer, ICE Candidates được gửi. Sự kiện onaddstream được gọi và đặt friendsVideo.srcObject thành đối tượng MediaStream. Thao tác này sẽ hiển thị video người kia trên máy tính của bạn và ngược lại.

function sendMessage(senderId, data) {

var msg = database.push({ sender: senderId, message: data });

msg.remove();

}

Hàm sendMessage

Hàm sendMessage thêm dữ liệu vào cơ sở dữ liệu Firebase

function showMyFace() {

navigator.mediaDevices.getUserMedia({audio:true, video:true})

.then(stream => yourVideo.srcObject = stream)

.then(stream => pc.addStream(stream));

}

Hàm showMyFace

Hàm showMyFace, khi bạn gọi đến getUserMedia, trình duyệt của bạn sẽ yêu cầu quyền truy cập camera. Trả về một đối tượng MediaStream cái mà bạn có thể đặt bằng yourVideo.srcObject. Chức năng đoạn này là hiển thị mặt của bạn trên chính máy tính của bạn. Sau đó, ta cần thêm MediaStream vào PeerConnection. Trên máy tính đối phương thực hiện cuộc gọi cũng thực hiện tương tự.

function showFriendsFace() {

pc.createOffer()

.then(offer => pc.setLocalDescription(offer) )

.then(() => sendMessage(yourId, JSON.stringify({'sdp': pc.localDescription})) );

}

Tạo đối tượng Offer

Tạo đối tượng Offer bằng cách gọi hàm pc.createOffer(). Đặt local description cho offer này bằng cách gọi pc.setLocalDescription(offer). Cuối cùng gửi đối tượng Offer cho đối phương bằng cách gọi sendMessage.

function readMessage(data) {

var msg = JSON.parse(data.val().message);

var sender = data.val().sender;

if (sender != yourId) {

if (msg.ice != undefined) {

pc.addIceCandidate(new RTCIceCandidate(msg.ice));

} else if (msg.sdp.type == "offer") {

pc.setRemoteDescription(new RTCSessionDescription(msg.sdp))

.then(() => pc.createAnswer())

.then(answer => pc.setLocalDescription(answer))

.then(() => sendMessage(yourId, JSON.stringify({'sdp': pc.localDescription})));

} else if (msg.sdp.type == "answer") {

pc.setRemoteDescription(new RTCSessionDescription(msg.sdp));

}

}

};

Hàm readMessage

Hàm readMessage cho phép đối phương đọc tin nhắn, với tin nhắn dạng offer thì khi bạn gửi cho bạn bè một Offer bạn đã tạo, đối phương sẽ thiết lập mô tả từ xa (remote description) của họ cho đối tượng Offer mà bạn đã gửi cho họ bằng cách gọi:

pc.setRemoteDescription(new RTCSessionDescription(msg.sdp))

Người nhận sẽ tạo một đối tượng Answer bằng cách gọi hàm pc.createAnswer(). Kết quả trả về một đối tượng Answer mà bạn sẽ thiết lập ở mô tả local. Người nhận làm được điều này bằng cách gọi đến pc.setLocalDescription(answer). Sau đó, người nhận lấy đối tượng Answer và gửi nó cho bạn bằng cách gọi sendMessage.

Code web hoàn chỉnh sẽ có dạng như sau