# WebRTC là gì? Phương thức hoạt động và Ứng dụng > **WebRTC là gì?** Tại sao WebRTC lại được ứng dụng nhiều trong giới lập trình hiện nay? Là viết tắt của Web Real-Time Communication, ta có thể hiểu được đây là một công cụ hỗ trợ người dùng tương tác, trò chuyện trực tiếp trên website. Để tiếp tục hiểu thêm về WebRTC, cùng Locab đọc tiếp bài viết dưới đây bạn nhé! # 1. WebRTC là gì? ![webrtc.gif}](https://file-systems.s3.ap-southeast-1.amazonaws.com/6644e40e6f1c218b55daaf59/file-1739782616460-e7PWz5.gif) **WebRTC** (Web Real-Time Communication) là một tập hợp các hàm lập trình ([web API](https://en.wikipedia.org/wiki/Web_API)) được phát triển bởi World Wide Web Consortium (W3C). Khả năng hỗ trợ trình duyệt giao tiếp với nhau theo thời gian thực bằng video, âm thanh hay truyền tải dữ liệu “[Peer-to-Peer](https://en.wikipedia.org/wiki/Peer-to-peer)” (P2P) mà không cần browser phải cài thêm plugins hay phần mềm hỗ trợ nào từ bên ngoài. WebRTC có thể giúp chúng ta gọi điện video ngay trong trình duyệt mà không cần đăng kí tài khoản, ngoài ra chúng còn được xài để phát triển game chơi trực tiếp trong trình duyệt và rất nhiều loại ứng dụng khác. # 2. Lịch sử hình thành và phát triển của WebRTC. WebRTC được nhen nhóm ý tưởng từ nhóm kỹ sư công nghệ của Google vào năm 2009. Thay vì sử dụng Flash để truyền video hoặc hình ảnh trên website, họ muốn tự tạo ra sản phẩm riêng. Năm 2010, công ty On2 và Global IP Solutions (GIPS) bị thâu tóm bởi Google. Giai đoạn này cũng đánh dấu sự phát triển của công nghệ truyền dữ liệu thời gian thực và trở thành nền tảng cho WebRTC. Tháng 5 năm 2011, dự án nguồn mở hỗ trợ giao tiếp thời gian thực giữa các trình duyệt, mang tên WebRTC đã chính thức trình làng. Cũng cùng thời điểm đó, E3C và [Hiệp Hội Kỹ Sư Quốc Tế](https://vi.wikipedia.org/wiki/Hi%E1%BB%87p_h%E1%BB%99i_Qu%E1%BB%91c_t%E1%BA%BF_c%C3%A1c_K%E1%BB%B9_s%C6%B0_T%C6%B0_v%E1%BA%A5n) (IETF) cũng phát triển các giao thức kết nối thời gian thực. Do vậy, họ đã hợp tác cùng nhau để xây dựng sản phẩm công nghệ này. Tháng 10 năm 2011, một phiên bản của WebRTC ra đời. Một tháng sau, Chrome 23 ra đời và trở thành trình duyệt đầu tiên có tích hợp sẵn WebRTC. # 3. Cách thức hoạt động của WebRTC. ![image.png}](https://file-systems.s3.ap-southeast-1.amazonaws.com/6644e40e6f1c218b55daaf59/file-1739785582461-aM4PTB.png) #### Kết nối Peer-to-Peer Hầu hết các ứng dụng WebRTC dựa trên kiến trúc P2P (peer-to-peer). Trong kết nối P2P, các thành viên truyền dữ liệu trực tiếp với nhau mà không cần trung gian. Ngay cả khi một thành viên rời khỏi cuộc gọi, các thành viên còn lại vẫn có thể tiếp tục chia sẻ dữ liệu. Điều này làm cho WebRTC vượt trội so với các công nghệ truyền thông truyền thống, nơi người dùng không thể tiếp tục nếu mất kết nối với máy chủ. Ngoài ra, các peer thường gần nhau về mặt địa lý, giảm khoảng cách dữ liệu phải truyền tải. #### Máy chủ Signaling Máy chủ signaling giúp thiết lập kết nối ban đầu giữa các peer. Nó theo dõi các sự kiện như người dùng tham gia hoặc rời khỏi cuộc gọi. Máy chủ signaling cần thiết trong giai đoạn khởi tạo cuộc gọi nhưng không cần thiết trong quá trình giao tiếp liên tục. Tuy nhiên, nó có thể được sử dụng để theo dõi các sự kiện như một peer bị ngắt kết nối. Có nhiều cách để triển khai máy chủ signaling, yêu cầu duy nhất là làm cầu nối giữa các peer. #### SDP (Session Description Protocol) SDP giúp các peer trao đổi thông tin và thiết lập kết nối mà không cần biết chi tiết về hệ thống của nhau. SDP cung cấp thông tin về phần mềm, phần cứng và loại phương tiện mà peer muốn trao đổi. Khi khởi tạo kết nối, một peer đưa ra đề nghị (offer) và nhận lại câu trả lời (answer). * **Offer/Answer:** Khi khởi tạo kết nối, một peer đưa ra đề nghị và nhận lại câu trả lời. * **ICE (Interactive Connectivity Establishment) candidates:** Tìm kiếm các phương tiện giao tiếp tốt nhất cho các peer. * **NAT (Network Address Translation):** WebRTC phải vượt qua các lớp NAT để kết nối trực tiếp giữa các peer. WebRTC sử dụng các máy chủ TURN để kết nối các thiết bị qua NAT với internet công cộng, giúp truyền tải dữ liệu media giữa các trình duyệt. WebRTC được thiết kế để thiết lập kết nối trực tiếp giữa các bên, nhưng lớp NAT có thể làm phức tạp quá trình này. Các ứng dụng WebRTC sử dụng máy chủ TURN để kết nối các máy trên NAT với mạng internet công cộng, đảm bảo truyền tải dữ liệu media giữa các trình duyệt. # 4. Ưu điểm và nhược điểm của WebRTC > Những ưu và nhược điểm nổi bật của WebRTC có thể kể đến như: ## Ưu điểm của WebRTC * **Hỗ trợ trên nhiều nền tảng khác nhau** WebRTC là một mã nguồn mở, có thể sử dụng trên tất cả các hệ điều hành và ngôn ngữ lập trình. Ví dụ, với các website, JavaScript là ngôn ngữ được sử dụng phổ biến nhất. Đối với các ứng dụng di động, lập trình viên có thể lựa chọn ngôn ngữ phù hợp với nền tảng của thiết bị, chẳng hạn như Objective-C cho iOS, Java cho Android, C++ cho Windows. * **Hình thức mã nguồn mở miễn phí** WebRTC là mã nguồn mở, vì vậy việc sử dụng hoàn toàn miễn phí. Các lập trình viên có thể tải mã và phát triển ứng dụng của riêng mình mà không phải trả bất kỳ khoản phí nào. * **Không phải dùng phần mềm hỗ trợ hoặc plugin bổ sung** WebRTC có thể được sử dụng trực tuyến hoặc tải xuống mà không cần cài đặt ứng dụng hoặc plugin bổ sung. Điều này giúp tiết kiệm thời gian và công sức, cũng như tăng tính tiện lợi. * **Bảo mật âm thanh và video** WebRTC là mã nguồn mở, nhưng tính bảo mật của nó vẫn được đánh giá cao. Điều này là nhờ được phát triển bởi các ông lớn về công nghệ hàng đầu thế giới, như Google và Mozilla, và được bảo trợ bởi các nền tảng hàng đầu. Ngoài ra, WebRTC sử dụng giao thức Secure real time communication để mã hóa dữ liệu, giúp chống nghe trộm và ăn cắp tài nguyên. ## Nhược điểm của WebRTC Tuy WebRTC thể hiện nhiều ưu điểm nhưng công cụ này vẫn tồn tại một số nhược điểm * WebRTC có thể bị ngăn cản bởi NAT và tường lửa khi các bạn cố gắng thực hiện kết nối P2P * Thiếu cơ chế báo hiệu cài sẵn khi ứng dụng tạo kết nối P2P giữa các trình duyệt * WebRTC chưa có bản hoàn thiện đúng nghĩa, bao gồm có IE và Safari chưa được hỗ trợ tốt * Giữa các trình duyệt thiếu tính thống nhất và chưa được chuẩn hóa các video để sử dụng cho WebRTC * Số lượng hàm API cho các trình duyệt là khác nhau và tăng nguy cơ phát sinh các lỗi tiềm ẩn # 5. Ứng dụng của webRTC WebRTC (Web Real-Time Communication) là một công nghệ tiên tiến cho phép truyền tải âm thanh, video và dữ liệu trực tiếp giữa các trình duyệt và thiết bị mà không cần các plugin hoặc phần mềm bên ngoài. Dưới đây là các loại ứng dụng mà bạn có thể phát triển bằng WebRTC: * Ứng dụng Video Chat: Tạo cuộc gọi video một đối một hoặc nhóm như Skype, Google Meet, Zoom. * Ứng dụng Audio Chat: Thực hiện các cuộc gọi âm thanh qua internet như VoIP, Google Voice. * Truyền Hình Trực Tiếp: Phát trực tiếp sự kiện, hội nghị trên YouTube, Facebook Live. * Chia Sẻ Màn Hình: Hỗ trợ kỹ thuật từ xa, thuyết trình. * Ứng Dụng Học Trực Tuyến: Lớp học ảo, dạy kèm trực tuyến với video và âm thanh thời gian thực, chia sẻ tài liệu. * Ứng Dụng Chơi Game Nhiều Người Chơi: Truyền tải dữ liệu game giữa các người chơi. * Hệ Thống Giám Sát và An Ninh: Camera an ninh, giám sát từ xa. WebRTC mang lại nhiều cơ hội phát triển các ứng dụng thời gian thực với khả năng truyền tải dữ liệu hiệu quả và bảo mật. # 6. Sử dụng WebRTC và Firebase để viết ứng dụng gọi video WebRTC tương thích với nhiều nền tảng và ngôn ngữ, vì vậy bạn có thể sử dụng trang web có đuôi HTML hoặc PHP để phát triển ứng dụng WebRTC. ## 6.1. Cài đặt Firebase * **Bước 1:** Truy cập vào Firebase. Để cài đặt Firebase, các bạn cần truy cập vào trang firebase.google.com * **Bước 2:** Đăng nhập tài khoản Google của bạn * **Bước 3:** Chọn "Create a project" để tạo một project mới * **Bước 4:** Nếu Firebase không hiển thị ngôn ngữ tiếng Anh, thì bạn thêm ?hl=en vào cuối URL * **Bước 5:** Điền tên cho dự án và chọn "Continue" để tiếp tục * **Bước 6:** Tắt Google Analytic * **Bước 7:** Chọn "Create Project" và chờ khoảng 1 phút để chương trình tự khởi tạo * **Bước 8:** Khi hoàn thành, bạn sẽ thấy thông báo của hệ thống. Bạn nhấn "Continue" để tiếp tục. * **Bước 9:** Chọn biểu tượng "Setting" (bên cạnh "Project Overview" ) * **Bước 10:** Kéo thanh trượt xuống để chọn loại platform tương ứng (ở đây các bạn đang cần dùng web nên sẽ chọn biểu tượng web) * **Bước 11:** Điền tên app, chọn cài đặt hosting cho app. Bạn có thể cài đặt sau và chọn "Register app" . * **Bước 12:** Copy đoạn code và dán vào bên dưới thẻ ``. Bạn có thể bỏ qua bước này và nhấp chọn "Next" để thực hiện sau ở phần code. * **Bước 13:** Chọn "Next" cho đến phần cuối, bạn click "Continue to Console" * **Bước 14:** Kéo thanh trượt và tìm mục Firebase SDK snippet. Kế tiếp, bạn chọn CDN để tiếp tục phần code web * **Bước 15:** Bạn tạo Real-time database * **Bước 16:** Chọn test mode để người khác có thể điền thông tin vào dữ liệu của bạn ![image.png}](https://file-systems.s3.ap-southeast-1.amazonaws.com/6644e40e6f1c218b55daaf59/file-1739784983191-hGKHjm.png) ## 6.2. Kết nối website với Firebase Đầu tiên, bạn tạo giao diện web với 2 khung hiển thị cho camera 2 máy được kết nối. Bạn sử dụng thẻ `

` và thêm CSS để giao diện rõ ràng hơn. Dòng code khi đó sẽ thế này: ``` var database = firebase.database().ref(); ``` **Cấp quyền truy cập vào thư mục gốc của cơ sở dữ liệu Firebase** ``` sendMessage database.on('child_added', readMessage); ``` **Bạn dùng hàm dưới đây để thêm cơ sở dữ liệu vào Firebase** ``` var yourId = Math.floor(Math.random()*1000000000); ``` **Tạo yourId random (ngẫu nhiên)** Bạn có thể dùng câu lệnh sau để tạo yourID random: ``` var servers = {'iceServers': [ {'urls': 'stun:stun.services.mozilla.com'}, {'urls': 'stun:stun.l.google.com:19302'} ]}; ``` Khi các bạn khai báo máy chủ sử dụng, bạn lưu ý chúng là 2 máy chủ STUN của Google và Firefox. Tùy vào nhu cầu thực tế, bạn có thể tăng hoặc giảm. ![image.png}](https://file-systems.s3.ap-southeast-1.amazonaws.com/6644e40e6f1c218b55daaf59/file-1739785221913-mG5kFc.png) Khi khai báo máy chủ sử dụng, bạn lưu ý chúng là 2 máy chủ STUN của Google và Firefox **Hàm sendMessage** Hàm sendMessage có vai trò là thêm dữ liệu vào cơ sở dữ liệu Firebase. Bạn thực hiện các dòng lệnh sau: ``` function showMyFace() { navigator.mediaDevices.getUserMedia({audio:true, video:true}) .then(stream => yourVideo.srcObject = stream) .then(stream => pc.addStream(stream)); } ``` **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ên thiết bị của bạn. Bạn trả về một đối tượng MediaStream (bạn có thể đặt bằng yourVideo.srcObject). Chức năng đoạn này thường là hiển thị mặt của bạn trên chính máy tính. Tiếp theo, bạn có thể thêm MediaStream vào PeerConnection. Trên máy tính của đối phương có thể thực hiện cuộc gọi tương tự. ``` function showFriendsFace() { pc.createOffer() .then(offer => pc.setLocalDescription(offer) ) .then(() => sendMessage(yourId, JSON.stringify({'sdp': pc.localDescription})) ); } ``` **Cách tạo đối tượng Offer** Để tạo đối tượng Offer, bạn gọi hàm pc.createOffer(). Bạn đặt local description cho offer này bằng cách gọi pc.setLocalDescription(offer). Tiếp theo, bạn 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** Để đối phương đọc được tin nhắn dạng offer, bạn cần gọi hàm readMessage. Khi bạn gửi offer cho bạn bè, đối phương sẽ thiết lập mô tả từ xa của họ cho offer đó bằng cách gọi hàm setRemoteDescription. ``` 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(). Sau đó, người nhận thiết lập mô tả local của họ bằng cách gọi hàm pc.setLocalDescription(answer). Cuối cùng, người nhận gửi đối tượng Answer cho bạn bằng cách gọi hàm sendMessage. ## 6.3. Chỉnh sửa code web hoàn chỉnh Code web hoàn chỉnh sẽ có dạng như sau: ```

webrtc

webtrc

video

webrtc

WebRTC là gì?

Tổng hợp thông tin về WebRTC, từ cách hoạt động đến ứng dụng thực tiễn.