WebRTC là gì? Tìm hiểu về WebRTC A-Z

Posted on by adminChuyên mục:Kiến thức Internet

“WebRTC là khả năng giao tiếp trực tiếp với một ai đó hoặc một cái gì đó như thể bạn đang ở ngay bên cạnh vậy. WebRTC lấp đầy khoảng trống tới hạn trong nền tảng web khi bạn có thể giao tiếp trong thời gian thực chỉ bằng việc tải một trang web,” Justin Uberti, Trưởng Bộ phận kỹ thuật về WebRTC, Google cho hay.

WebRTC là gì? 

Đây là chữ viết tắt của cụm từ “Web Real-Time Communication”, tạm dịch là “Giao tiếp với website theo thời gian thực”.

WebRTC là một tập hợp những hàm lập trình ( web API ) được viết bằng JavaScript giúp tiếp xúc theo thời hạn thực mà không cần đến plugin hay ứng dụng tương hỗ. Hình thức tiếp xúc là trải qua Video Call, Voice Call hay transfer data P2P ( peer-to-peer ) .
webrtc-la-gi

Lịch sử của WebRTC

WebRTC là một sản phẩm của World Wide Web Consortium (W3C).

Từ những năm 2009, nhóm kỹ sư chịu nghĩa vụ và trách nhiệm cho Google Hangout đã “ thai nghén ” ý tưởng sáng tạo hình thành WebRTC. Lúc bấy giờ, Flash là lựa chọn số 1 khi muốn truyền tải video, hình ảnh trên web .
Là người “ trong ngành ”, họ ấp ủ sáng tạo độc đáo về một chuẩn riêng thay vì sử dụng công nghệ tiên tiến sắp lỗi thời này. Và WebRTC sinh ra từ đây .
Năm 2010, Google tóm gọn hai công ty On2 và Global IP Solutions ( GIPS ) để chiếm hữu bản quyền công nghệ tiên tiến truyền tài liệu thời hạn thực làm nền tảng cho WebRTC về sau .
Tháng 5/2011, dự án Bất Động Sản nguồn mở tương hỗ tiếp xúc thời hạn thực giữa trình duyệt WebRTC có những bước tiến tiên phong .
Trong khi đó, Thương Hội World Wide Web ( W3C ) và Thương Hội Kỹ sư quốc tế ( IETF ) cũng tăng trưởng những giao thức liên kết thời hạn thực. Vì thế, họ đã quyết định hành động bắt tay để chung sức hoàn thành xong mẫu sản phẩm này .
Tháng 10/2011, cùng nhau thiết kế xây dựng mẫu sản phẩm này. 27/10/2011, bản nháp tiên phong của WebRTC chính thức được “ trình làng ” .
WebRTC là gì? Tìm hiểu về WebRTC A-Z 2
ADVERTISEMENTTháng 11, Chrome 23 sinh ra và trở thành trình duyệt tiên phong tích hợp sẵn WebRTC .
Cho đến thời gian này, WebRTC vẫn còn đang liên tục được tăng trưởng chứ chưa triển khai xong một cách chính thức .

Công dụng của WebRTC

  • Truyền tải video, âm thanh, gửi tài liệu “ Peer-to-Peer ” ( P2P ) theo thời hạn 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 .
  • Phát triển game chơi trực tiếp trong trình duyệt. Người chơi chỉ cần sử dụng trình duyệt có tương hỗ WebRTC để chơi, không cần setup rườm rà .
  • Ứng dụng khác .

Ưu – nhược điểm của WebRTC

Ưu điểm

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

WebRTC là một dự án Bất Động Sản mã nguồn mở không lấy phí. Google cho biết đây là một công cụ tiếp thị quảng cáo 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 .

webrtc-la-gi

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

Bất kì trình trình duyệt nào với hệ quản lý bất kể cũng hoàn toàn có thể tạo trực tiếp một real-time voice hoặc video liên kết tới thiết bị WebRTC khác. Trình duyệt web, những PC, máy tính, MacBook, điện thoại cảm ứng những phiên bản HĐH ( Windows, Linux, MacOS … ), những thiết bị mưu trí khác .
Lập trình viên hoàn toàn có thể 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

Dữ liệu truyền thông sẽ được mã hóa và xác nhận nhờ giao thức SRTP ( Secure Real-Time Transport Protocol ). Nhờ vậy, trong quy trình thực thi tác vụ video hay voice, bạn hoàn toàn có thể yên tâm, không bị nghe trộm .

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

Đây là điểm mạnh quan trọng của WebRTC. Hoạt động 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 chi phí ngân sách, …

Khá dễ sử dụng

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

Thích ứng với các điều kiện mạng khác nhau 

WebRTC tương hỗ việc tích hợp với nhiều kiểu truyền thông và những thiết bị đầu cuối khác nhau. Nhờ vậy, những ứng dụng tương tác video hoặc gọi thoại của người dùng sử dụng băng thông hiệu quả hơn. Các APIs WebRTC và signaling hoàn toàn có thể thỏa thuận hợp tác kích cỡ và định dạng cho mỗi thiết bị đầu cuối .

Tiết kiệm chi phí

Nhờ tính năng video call, người dùng không phải tốn cước điện thoại cảm ứng cho mỗi cuộc gọi nữa .

Nhược điểm

  • Bị cản trở khi tạo liên kết peer-to-peer bởi tường lửa và NAT .
  • WebRTC tạo ra liên kết peer-to-peer giữa những trình duyệt mà không có một chính sách báo hiệu ( signaling ) nào được thiết lập sẵn .

Doanh nghiệp được gì khi sử dụng WebRTC?

WebRTC giúp doanh nghiệp :

  • Giảm độ trễ trong việc truyền tải
  • Giảm độ phức tạp khi tăng trưởng ứng dụng
  • Giảm ngân sách quản lý và vận hành ( vì không phải trả tiền thuê server, tiền điện, tiền bảo trì … ) ,
  • Những doanh thu bên trên sẽ dẫn đến giá cả dịch vụ ( nếu có ) sẽ thấp hơn, tương thích với nhiều đối tượng người dùng người mua hơn .

Kiến trúc của WebRTC

Sơ đồ kết nối giữa Client 

Kiến trúc của WebRTC khá đơn thuần, nó gồm có những Client liên kết với nhau trải qua Server Signalling. Cụ thể sơ hồ được trình diễn ngay hình bên dưới đây :
webrtc-la-gi

Các phần chính của WebRTC 

MediaStream

Đây là một stream tài liệu âm thanh và hình ảnh, bằng cách gọi hàm getUserMedia để khởi tạo khi thao tác cục bộ. GetUserMedia sẽ được cho phép trình duyệt web truy vấn vào camera và / hoặc microphone để lấy tài liệu hình ảnh âm thanh cho việc truyền tải .
Sau khi một liên kết WebRTC được thiết lập với một máy tính, MediaStream sẽ được cho phép truy vấn vào stream của một máy tính khác .

RTCDataChannel

Hiểu đơn thuần, RTCDataChannel được cho phép trình duyệt san sẻ tài liệu peer-to-peer .
Đây là một kênh hai chiều chịu nghĩa vụ và trách nhiệm trao đổi tài liệu thời hạn thực. RTCDataChannel sẽ trao đổi những tài liệu dạng text, san sẻ tệp P2P và những loại khác mà không chứa những tài liệu nghe nhìn ( âm thanh, hình ảnh ) .
RTCDataChannel trao đổi thông tin nhanh gọn, bảo đảm an toàn, đáng tin .

RTCPeerConnection

Hiểu đơn thuần, RTCPeerConnection được dùng để setup videocall / voicecall dùng cho việc truyền tải .
Đây là phần quan trọng giúp liên kết MediaStream và RTCDataChannel trở thành WebRTC. RTCPeerConnection là API giúp liên kết giữa hai trình duyệt, cung ứng những phương pháp để liên kết, duy trì liên kết và đóng liên kết khi không còn nhu yếu sử dụng .
webrtc-la-gi

Hướng dẫn viết ứng dụng gọi video giữa 2 người bằng WebRTC và Firebase đơn giản

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

Firebase là một dịch vụ cơ sở tài liệu thời hạn thực hoạt động giải trí trên nền tảng đám mây được phân phối bởi Google. Tính năng của Firebase là đơn giản hóa những thao tác với cơ sở tài liệu để giúp những lập trình viên tăng trưởng nhanh những ứng dụng .
Quá trình setup Firebase như sau :

  • Bạn truy cập trang firebase.google.com
  • Đăng nhập tài khoản Google của bạn
  • Chọn “Create a project” để tạo mới một project.
  • Thêm ?hl=en vào cuối URL vì Firebase không hiển thị ngôn ngữ tiếng Anh.
    Điền tên cho project và chọn “Continue” để tiếp tục.
  • Tắt Google Analytic cho project
    Chọn “Create Project”, chờ một lúc để chương trình khởi tạo. Sau đó, bạn nhấn “Continue” để tiếp tục.
  • Chọn biểu tượng Setting bên cạnh “Project Overview”
    Kéo thanh trượt xuống để chọn loại platform, chọn biểu tượng Web vì chúng ta viết ứng dụng cho web.
  • Điền tên App, chọn cài đặt Hosting cho app hoặc bạn có thể cài đặt sau và chọn “Register app”.
  • Sao chép và dán đoạn code này vào bên dưới thẻ
  • 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.
  • Bạn cần thực hiện thêm một bước nữa, đó là tạo Realtime Database.
  • Chọn test mode để người khác có thể ghi vào database của bạn.

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.

Đây là một code web hoàn hảo :





 src=" https://www.gstatic.com/firebasejs/5.0.4/firebase.js ">

href=” https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css ” rel=” stylesheet “>

type=” text / css “>video{background-color: # ddd ;border-radius: 7 px;margin: 10 px 0 px 0 px 10 px;width: 320 px;height: 240 px;
}button{margin: 5 px 0 px 0 px 10 px !important

;

width: 654 px;
}

onload=”showMyFace( )”>

id=” yourVideo ” autoplay muted>

id=” friendsVideo ” autoplay>

/ >

onclick=”showFriendsFace( )” type=” button ” class=” btn btn-primary btn-lg “

> class=” glyphicon glyphicon-facetime-video ” aria-hidden=” true “>

Call

type=” text / javascript “>var config = { apiKey : “

“, authDomain : “

. firebaseapp.com “, databaseURL : ” https : / /

. firebaseio.com “, projectId : “

“, storageBucket : “

. appspot.com “, messagingSenderId : “

” } ; firebase. initializeApp ( config ) ; var database = firebase.database ( ). ref ( ) ; var yourVideo = document. getElementById ( ” yourVideo ” ) ; var friendsVideo = document. getElementById ( ” friendsVideo ” ) ; var yourId = Math. floor ( Math. random ( ) * 1000000000 ) ; var servers = { ‘ iceServers ‘ : [ { ‘ urls ‘ : ‘ stun : stun.services.mozilla.com ‘ }, { ‘ urls ‘ : ‘ stun : stun.l.google.com : 19302 ‘ }, { ‘ urls ‘ : ‘ turn : numb.viagenie.ca ‘, ‘ credential ‘ : ‘ webrtc ‘, ‘ username ‘ : ‘ [email protected] ‘ } ] } ; var pc = new RTCPeerConnection ( servers ) ; pc. onicecandidate = ( sự kiện => event.candidate ? sendMessage ( yourId, JSON.stringify ( { ‘ ice ‘ : event.candidate } ) ) : console.log ( ” Sent All Ice ” ) ) ; pc.onaddstream = ( sự kiện => friendsVideo. srcObject = event.stream ) ; function sendMessage ( senderId, data ) { var msg = database.push ( { sender : senderId, message : data } ) ; msg.remove ( ) ; } 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 ” ) { var r = confirm ( ” Answer call ? ” ) ; if ( r = = true ) { pc. setRemoteDescription ( new RTCSessionDescription ( msg.sdp ) ). then ( ( ) => pc. createAnswer ( ) ). then ( answer => pc. setLocalDescription ( answer ) ). then ( ( ) => sendMessage ( yourId, JSON.stringify ( { ‘ sdp ‘ : pc. localDescription } ) ) ) ; } else { alert ( ” Rejected the call ” ) ; } } else if ( msg.sdp.type = = ” answer ” ) { pc. setRemoteDescription ( new RTCSessionDescription ( msg.sdp ) ) ; } } } ; database.on ( ‘ child_added ‘, readMessage ) ; function showMyFace ( ) { navigator. mediaDevices. getUserMedia ( { audio : true, video : true } ). then ( stream => yourVideo. srcObject = stream ). then ( stream => pc. addStream ( stream ) ) ; } function showFriendsFace ( ) { pc. createOffer ( ). then ( offer => pc. setLocalDescription ( offer ) ). then ( ( ) => sendMessage ( yourId, JSON.stringify ( { ‘ sdp ‘ : pc. localDescription } ) ) ) ; } / script >

Những câu hỏi thường gặp về WebRTC

WebRTC dùng cho trang web có đuôi HTML hay PHP?

Với năng lực tương hỗ đa nền tảng và đa ngôn ngữ, WebRTC hoàn toàn có thể tương hỗ cho website có đuôi HTML lẫn PHP .

Xem Thêm :  Retrofit trong Android là gì ? Tìm hiểu cụ thể về Retrofit

WebRTC có hỗ trợ cho native app hay không?

Câu vấn đáp là : Có !
Bạn hoàn toàn có thể kiến thiết xây dựng library cho những nền tảng Windows, Mac OS X, Linux, Android và iOS .

WebRTC có an toàn không?

WebRTC được xem là bước tiếp nối cho Adobe Flash và sử dụng để tiếp xúc theo thời hạn thực trên trình duyệt. May mắn thay, WebRTC không phải là một ứng dụng cài thêm từ bên ngoài, nó sở hữu tính năng bảo mật thông tin tốt. Do đó, WebRTC không gặp những trường hợp bị tiến công bởi hacker hay malware. WebRTC không phải là một Plugin như Flash. Nó là một tập hợp những hàm API được lập trình viên sử dụng nên khó bị khai thác hơn rất nhiều so với Flash .

WebRTC có cho phép người dùng chia sẻ màn hình, nhắn tin lúc gọi video không?

WebRTC có được cho phép bạn san sẻ màn hình hiển thị. Người dùng trọn vẹn hoàn toàn có thể tích hợp tính năng này trong ứng dụng khi dùng công nghệ tiên tiến WebRTC .
Hơn nữa, WebRTC cũng được cho phép bạn gửi tin nhắn trong lúc gọi video trực tuyến .

Những trở ngại của WebRTC là gì?

Hiện tại, WebRTC chỉ mới tăng trưởng ở tiến trình nháp chứ chưa hoàn tất. Do đó việc tương hỗ cho những trình lập viên khi cần giúp sức còn nhiều khó khăn vất vả, trong khi tài liệu thì chưa thật sự vừa đủ .
Bên cạnh đó, những hãng trình duyệt chưa thống nhất với nhau là chuẩn video nào sẽ được dùng cho WebRTC. Google và Mozilla thì muốn xài VP8 hoặc VP9, một codec video do chính Google tăng trưởng theo quy mô mã nguồn mở và ai cũng hoàn toàn có thể xài được mà không tốn ngân sách. Trong khi đó, Microsoft và 1 số ít công ty khác thì muốn đề xuất kiến nghị xài H. 264 hoặc H. 265 cho WebRTC, hiện đang là codec được xài phổ cập nhất lúc bấy giờ trên quốc tế Internet. Tuy nhiên, H. 264 lại thuộc quyền sở hữu của hiệp hội MPEG LA và phải trả phí bản quyền để sử dụng .
Số lượng hàm API WebRTC được tương hỗ trong những trình duyệt rất khác nhau. Điều này làm giảm đi năng lực hoạt động giải trí của những ứng dụng WebRTC, lập trình phải tốn nhiều công sức của con người để điều khiển và tinh chỉnh lại website hoặc ứng dụng của mình cho tương thích với trình duyệt. Vì thế, nó làm giảm đi phần nào quyền lợi cốt lõi của WebRTC .
Mọi vướng mắc và góp ý tương quan, xin vui mừng liên hệ ngay TinoHost để được tư vấn chi tiết cụ thể hoặc Fanpage để update những thông tin mới nhất nhé !
Với bề dày kinh nghiệm tay nghề hơn 5 năm cung ứng hosting, dịch vụ cho thuê sever, những dịch vụ tương quan đến tên miền và bảo mật thông tin website, hãy để TinoHost sát cánh cùng bạn trên con đường khẳng định chắc chắn tên thương hiệu trên map công nghệ tiên tiến toàn thế giới !

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí Minh
    Văn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333
    Tổng đài miễn phí: 1800 6734
  • Email: [email protected]
  • Website: www.tino.org

5/5 – ( 1 bầu chọn )

admin