Google cam kết thúc đẩy bình đẳng chủng tộc đối với cộng đồng đen. Xem cách.
Trang này được dịch bởi Cloud Translation API.
Switch to English

Căn cứ hỏa lực + WebRTC của Codelab

1. Giới thiệu

Trong codelab này, bạn sẽ học cách để xây dựng một ứng dụng video chat đơn giản bằng cách sử dụng API WebRTC trong trình duyệt của bạn và Cloud FireStore cho hệ thống báo. Ứng dụng này được gọi là FirebaseRTC và hoạt động như một ví dụ đơn giản mà sẽ dạy cho bạn những điều cơ bản của việc xây dựng WebRTC được kích hoạt ứng dụng.

Những gì bạn sẽ học

  • Bắt đầu một cuộc gọi video trong một ứng dụng web sử dụng WebRTC của
  • Tín hiệu để các bên từ xa sử dụng đám mây FireStore

Những gì bạn cần

Trước khi bắt đầu codelab này, hãy chắc chắn rằng bạn đã cài đặt:

  • NPM mà thường đi kèm với Node.js - Node LTS được khuyến khích

2. Tạo và thiết lập một dự án căn cứ hỏa lực

Tạo một dự án căn cứ hỏa lực

  1. Trong căn cứ hỏa lực console , bấm Add dự án, sau đó đặt tên cho căn cứ hỏa lực dự án FirebaseRTC.

Ghi ID dự án cho dự án căn cứ hỏa lực của bạn.

  1. Nhấp vào Tạo dự án.

Các ứng dụng mà bạn đang đi để xây dựng sử dụng hai dịch vụ căn cứ hỏa lực có sẵn trên web:

  • Đám mây FireStore để lưu dữ liệu cấu trúc trên đám mây và nhận được thông báo ngay lập tức khi dữ liệu được cập nhật
  • Căn cứ hỏa lực Hosting để lưu trữ và phục vụ tài sản tĩnh của bạn

Đối với codelab cụ này, bạn đã cấu hình căn cứ hỏa lực Hosting trong dự án bạn sẽ được nhân bản. Tuy nhiên, cho Cloud FireStore, chúng tôi sẽ hướng dẫn bạn thông qua việc cấu hình và tạo điều kiện cho các dịch vụ sử dụng các căn cứ hỏa lực console.

Kích hoạt tính năng đám mây FireStore

Ứng dụng sử dụng đám mây FireStore để lưu các tin nhắn chat và nhận tin nhắn trò chuyện mới.

Bạn sẽ cần phải kích hoạt Mây FireStore:

  1. Trong căn cứ hỏa lực console đơn là phần Xây dựng, nhấp vào Cơ sở dữ liệu.
  2. Nhấp vào Tạo cơ sở dữ liệu trong cửa sổ Mây FireStore.
  3. Chọn Start trong tùy chọn chế độ kiểm tra, sau đó kích Enable sau khi đọc từ chối trách nhiệm về các quy tắc an ninh.

chế độ kiểm tra đảm bảo rằng bạn có thể tự do viết thư cho cơ sở dữ liệu trong phát triển. Chúng tôi sẽ làm cho cơ sở dữ liệu của chúng tôi an toàn hơn ở phần sau của codelab này.

3. Lấy mẫu mã

Clone kho GitHub từ dòng lệnh:

 git clone https://github.com/webrtc/FirebaseRTC
 

Mẫu mã nên đã được nhân bản vào thư mục căn cứ hỏa lực-rtc-web. Hãy chắc chắn rằng dòng lệnh của bạn được chạy từ thư mục này từ bây giờ:

 cd firebase-rtc-web
 

Nhập khẩu các ứng dụng khởi động

Mở các tập tin trong căn cứ hỏa lực-rtc-web trong trình soạn thảo của bạn và thay đổi chúng theo hướng dẫn dưới đây. Thư mục này chứa mã bắt đầu cho codelab trong đó bao gồm một ứng dụng WebRTC của không-nhưng chức năng. Chúng tôi sẽ làm cho nó chức năng suốt codelab này.

4. Cài đặt căn cứ hỏa lực Command Line Interface

Các căn cứ hỏa lực Command Line Interface (CLI) cho phép bạn để phục vụ ứng dụng web của bạn tại địa phương và triển khai các ứng dụng web của bạn để căn cứ hỏa lực Hosting.

  1. Cài đặt CLI bằng cách chạy lệnh NPM sau: sh npm -g install firebase-tools
  1. Xác minh rằng CLI đã được cài đặt một cách chính xác bằng cách chạy lệnh sau: sh firebase --version

Hãy chắc chắn rằng phiên bản của căn cứ hỏa lực CLI là v6.7.1 hay muộn.

  1. Ủy quyền cho căn cứ hỏa lực CLI bằng cách chạy lệnh sau: sh firebase login

Bạn đã thiết lập các mẫu ứng dụng web để kéo cấu hình của ứng dụng của bạn cho căn cứ hỏa lực Hosting từ thư mục và các tập tin địa phương của ứng dụng. Tuy nhiên, để làm được điều này, bạn cần phải kết hợp ứng dụng của bạn với dự án căn cứ hỏa lực của bạn.

  1. Liên kết ứng dụng của bạn với dự án căn cứ hỏa lực của bạn bằng cách chạy lệnh sau: sh firebase use --add

  2. Khi được nhắc, chọn ID dự án của bạn, sau đó cung cấp cho dự án căn cứ hỏa lực của bạn một bí danh.

Bí danh là hữu ích nếu bạn có nhiều môi trường (sản xuất, dàn dựng, vv). Tuy nhiên, đối codelab này, chúng ta hãy chỉ sử dụng bí danh của default .

  1. Làm theo hướng dẫn còn lại trong dòng lệnh của bạn.

5. Chạy máy chủ địa phương

Bạn đã sẵn sàng để thực sự bắt đầu làm việc trên ứng dụng của chúng tôi! Hãy chạy ứng dụng tại địa phương!

  1. Chạy sau lệnh căn cứ hỏa lực CLI: sh firebase serve --only hosting

  2. Dòng lệnh của bạn sẽ hiển thị các phản ứng sau: hosting: Local server: http://localhost:5000

Chúng tôi đang sử dụng căn cứ hỏa lực Hosting giả lập để phục vụ ứng dụng của chúng tôi tại địa phương. Các ứng dụng web sẽ hiện hữu từ http: // localhost: 5000.

  1. Mở ứng dụng của bạn tại http: // localhost: 5000.

Bạn sẽ thấy bản sao của FirebaseRTC đã được kết nối với dự án căn cứ hỏa lực của bạn.

Các ứng dụng đã tự động kết nối với dự án căn cứ hỏa lực của bạn.

6. Tạo ra một phòng mới

Trong ứng dụng này, mỗi phiên chat video được gọi là một căn phòng. Người dùng có thể tạo ra một phòng mới bằng cách nhấp chuột vào một nút trong ứng dụng của họ. Điều này sẽ tạo một ID mà đảng từ xa có thể sử dụng để tham gia cùng một phòng. ID được sử dụng như là chìa khóa trong Cloud FireStore cho mỗi phòng.

Mỗi phòng đều sẽ chứa RTCSessionDescriptions cho cả lời đề nghị và câu trả lời, cũng như hai bộ sưu tập riêng biệt với các ứng cử viên ICE từ mỗi bên.

Nhiệm vụ đầu tiên của bạn là thực hiện mã mất tích để tạo một căn phòng mới với lời đề nghị ban đầu từ người gọi. Mở public/app.js và tìm ra lời nhận xét // Add code for creating a room here và thêm đoạn mã sau:

 const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

const roomWithOffer = {
    offer: {
        type: offer.type,
        sdp: offer.sdp
    }
}
const roomRef = await db.collection('rooms').add(roomWithOffer);
const roomId = roomRef.id;
document.querySelector('#currentRoom').innerText = `Current room is ${roomId} - You are the caller!`
 

Dòng đầu tiên tạo ra một RTCSessionDescription sẽ đại diện cho lời đề nghị từ người gọi. Điều này sau đó được thiết lập như mô tả địa phương, và cuối cùng bằng văn bản cho các đối tượng phòng mới trong Cloud FireStore.

Tiếp theo, chúng tôi sẽ lắng nghe các thay đổi đối với cơ sở dữ liệu và phát hiện khi một câu trả lời từ callee đã được thêm vào.

 roomRef.onSnapshot(async snapshot -> {
    console.log('Got updated room:', snapshot.data());
    const data = snapshot.data();
    if (!peerConnection.currentRemoteDescription && data.answer) {
        console.log('Set remote description: ', data.answer);
        const answer = new RTCSessionDescription(data.answer)
        await peerConnection.setRemoteDescription(answer);
    }
});
 

Điều này sẽ đợi cho đến khi callee viết các RTCSessionDescription cho câu trả lời, và bộ đó như mô tả từ xa trên người gọi RTCPeerConnection .

7. Tham gia một phòng

Bước tiếp theo là thực hiện logic cho tham gia một phòng hiện có. Người dùng thực hiện điều này bằng cách nhấn vào nút phòng Tham gia và nhập ID cho phòng để tham gia. Nhiệm vụ của bạn ở đây là để thực hiện việc tạo ra các RTCSessionDescription cho câu trả lời và cập nhật các phòng trong cơ sở dữ liệu cho phù hợp.

 const offer = roomSnapshot.data().offer;
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);

const roomWithAnswer = {
    answer: {
        type: answer.type,
        sdp: answer.sdp
    }
}
await roomRef.update(roomWithAnswer);
 

Trong đoạn mã trên, chúng tôi bắt đầu bằng cách trích lời đề nghị từ người gọi và tạo ra một RTCSessionDescription mà chúng ta thiết lập như mô tả từ xa. Tiếp theo, chúng ta tạo ra các câu trả lời, thiết lập nó như mô tả địa phương, và cập nhật cơ sở dữ liệu. Bản cập nhật cơ sở dữ liệu sẽ kích hoạt onSnapshot callback ở phía người gọi, do đó sẽ thiết lập các mô tả từ xa dựa trên câu trả lời từ callee. Điều này hoàn thành việc trao đổi các RTCSessionDescription đối tượng giữa người gọi và callee.

8. ứng viên ICE Thu

Trước khi người gọi và callee có thể kết nối với nhau, họ cũng cần phải thí sinh trao đổi ICE mà nói WebRTC được làm thế nào để kết nối với các đồng đẳng từ xa. Nhiệm vụ tiếp theo của bạn là thực hiện mã mà lắng nghe cho các ứng cử viên ICE và thêm chúng vào một bộ sưu tập trong cơ sở dữ liệu. Tìm chức năng collectIceCandidates và thêm đoạn mã sau:

 async function collectIceCandidates(roomRef, peerConneciton,    
                                    localName, remoteName) {
    const candidatesCollection = roomRef.collection(localName);

    peerConnection.addEventListener('icecandidate', event -> {
        if (event.candidate) {
            const json = event.candidate.toJSON();
            candidatesCollection.add(json);
        }
    });

    roomRef.collection(remoteName).onSnapshot(snapshot -> {
        snapshot.docChanges().forEach(change -> {
            if (change.type === "added") {
                const candidate = new RTCIceCandidate(change.doc.data());
                peerConneciton.addIceCandidate(candidate);
            }
        });
    })
}
 

Chức năng này thực hiện hai điều. Nó thu thập các ứng cử viên ICE từ API WebRTC và thêm chúng vào cơ sở dữ liệu, và lắng nghe cho các ứng cử viên ICE thêm từ các đồng đẳng từ xa và thêm chúng vào nó RTCPeerConnection dụ. Điều quan trọng là khi nghe cơ sở dữ liệu thay đổi để lọc ra bất cứ điều gì đó không phải là một bổ sung mới, vì chúng ta nếu không sẽ có thêm cùng một tập hợp các ứng cử viên ICE hơn và hơn nữa.

9. Kết luận

Trong codelab này bạn đã học như thế nào để thực hiện hiệu cho WebRTC được sử dụng đám mây FireStore, cũng như làm thế nào để sử dụng cho việc tạo ra một ứng dụng video chat đơn giản.

Để tìm hiểu thêm, hãy truy cập các nguồn sau:

  1. FirebaseRTC Mã Nguồn
  2. mẫu WebRT
  3. đám mây FireStore