Google cam kết thúc đẩy công bằng chủng tộc cho Cộng đồng người da đen. Xem cách thực hiện.

Lớp học Firebase + WebRTC

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách xây dựng một ứng dụng trò chuyện video đơn giản bằng API WebRTC trong trình duyệt và Cloud Firestore để báo hiệu. Ứng dụng có tên là FirebaseRTC và hoạt động như một ví dụ đơn giản sẽ hướng dẫn cho bạn những kiến thức cơ bản về cách tạo ứng dụng hỗ trợ WebRTC.

Nội dung bạn sẽ tìm hiểu

  • Bắt đầu cuộc gọi video trong ứng dụng web bằng WebRTC
  • Báo hiệu cho bên từ xa bằng Cloud Firestore

Những gì bạn cần có

Trước khi bắt đầu lớp học lập trình này, hãy đảm bảo rằng bạn đã cài đặt:

  • npm thường đi kèm với Node.js

2. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

  1. Trong bảng điều khiển của Firebase, hãy nhấp vào Thêm dự án, sau đó đặt tên cho dự án Firebase Firebase.

Hãy nhớ mã dự án cho dự án Firebase của bạn.

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

Ứng dụng mà bạn sẽ tạo sử dụng hai dịch vụ Firebase có sẵn trên web:

  • Cloud Firestore để lưu dữ liệu có cấu trúc trên Cloud và nhận thông báo nhanh khi dữ liệu được cập nhật
  • Lưu trữ Firebase để lưu trữ và phân phát các tài sản tĩnh của bạn

Đối với lớp học mã cụ thể này, bạn đã định cấu hình tính năng Lưu trữ Firebase trong dự án mà bạn đang sao chép. Tuy nhiên, đối với Cloud Firestore, chúng tôi sẽ hướng dẫn bạn cách định cấu hình và bật các dịch vụ bằng bảng điều khiển của Firebase.

Bật Cloud Firestore

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

Bạn sẽ cần phải bật Cloud Firestore:

  1. Trong phần Phát triển của trình đơn bảng điều khiển Firebase, hãy nhấp vào Cơ sở dữ liệu.
  2. Nhấp vào Tạo cơ sở dữ liệu trong ngăn Cloud Firestore.
  3. Chọn tùy chọn Bắt đầu ở chế độ thử nghiệm, sau đó nhấp vào Bật sau khi đọc thông báo xác nhận quyền sở hữu về các quy tắc bảo mật.

Chế độ thử nghiệm đảm bảo rằng bạn có thể tự do ghi vào cơ sở dữ liệu trong quá trình phát triển. Chúng tôi sẽ tăng cường bảo mật cho cơ sở dữ liệu của mình sau này trong lớp học lập trình này.

3. Nhận mã mẫu

Sao chép kho lưu trữ GitHub từ dòng lệnh:

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

Bạn nên sao chép mã mẫu vào thư mục FirebaseRTC. Đảm bảo dòng lệnh của bạn chạy từ thư mục này kể từ bây giờ:

cd FirebaseRTC

Nhập ứng dụng khởi động

Mở tệp trong FirebaseRTC trong trình chỉnh sửa và thay đổi các tệp đó theo hướng dẫn bên dưới. Thư mục này chứa mã bắt đầu dành cho lớp học mã chứa một ứng dụng WebRTC chưa hoạt động. Chúng tôi sẽ cung cấp chức năng này trong suốt lớp học lập trình này.

4. Cài đặt Giao diện dòng lệnh của Firebase

Giao diện dòng lệnh của Firebase (CLI) cho phép bạn phân phát ứng dụng web tại địa phương và triển khai ứng dụng web đến dịch vụ Lưu trữ Firebase.

  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 đúng cách bằng cách chạy lệnh sau: sh firebase --version

Đảm bảo phiên bản CLI của Firebase là phiên bản 6.7.1 trở lên.

  1. Cấp phép CLI của Firebase bằng cách chạy lệnh sau: sh firebase login

Bạn đã thiết lập mẫu ứng dụng web để lấy cấu hình của ứng dụng cho Firebase Lưu trữ từ thư mục và tệp cục bộ của ứng dụng. Tuy nhiên, để làm việc này, bạn cần liên kết ứng dụng của mình với dự án Firebase.

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

  2. Khi được nhắc, hãy chọn mã dự án, sau đó cung cấp email đại diện cho dự án Firebase của bạn.

Một biệt hiệu sẽ hữu ích nếu bạn có nhiều môi trường (sản xuất, thử nghiệm, v.v.). Tuy nhiên, đối với lớp học lập trình này, hãy sử dụng bí danh của default.

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

5. Chạy máy chủ cục bộ

Bạn đã sẵn sàng 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 này trên máy!

  1. Chạy lệnh CLI Firebase sau: sh firebase serve --only hosting

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

Chúng tôi đang sử dụng trình mô phỏng Lưu trữ Firebase để phân phát ứng dụng tại địa phương. Ứng dụng web giờ đây sẽ có sẵn tại 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 FirebaseRTC mà bạn đã kết nối với dự án Firebase.

Ứng dụng này đã tự động kết nối với dự án Firebase của bạn.

6. Đang tạo một phòng mới

Trong ứng dụng này, mỗi phiên trò chuyện video được gọi là một phòng. Người dùng có thể tạo một phòng mới bằng cách nhấp vào một nút trong ứng dụng của họ. Thao tác này sẽ tạo một mã nhận dạng mà bên từ xa có thể dùng để tham gia vào cùng một phòng. Mã này được dùng làm khóa trong Cloud Firestore cho từng phòng.

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

Nhiệm vụ đầu tiên của bạn là triển khai mã còn thiếu để tạo phòng mới với ưu đãi ban đầu của người gọi. Hãy mở public/app.js rồi tìm nhận xét // Add code for creating a room here rồi thêm 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 một RTCSessionDescription đại diện cho ưu đãi từ người gọi. Sau đó, hệ thống sẽ đặt nội dung này làm nội dung mô tả trên máy và cuối cùng là ghi vào đối tượng phòng mới trong Cloud Firestore.

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

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);
    }
});

Thao tác này sẽ chờ cho đến khi người gọi ghi RTCSessionDescription câu trả lời và đặt đó là phần mô tả từ xa trên người gọi RTCPeerConnection.

7. Tham gia một phòng

Bước tiếp theo là triển khai logic tham gia phòng hiện có. Người dùng làm việc này bằng cách nhấp vào nút Tham gia phòng rồi nhập mã nhận dạng của phòng để tham gia. Nhiệm vụ của bạn ở đây là triển khai RTCSessionDescription để tìm câu trả lời và cập nhật phòng trong cơ sở dữ liệu theo đó.

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 mã ở trên, chúng tôi bắt đầu bằng cách trích xuất ưu đãi từ người gọi và tạo RTCSessionDescription mà chúng tôi đã đặt làm nội dung mô tả từ xa. Tiếp theo, chúng tôi tạo câu trả lời, đặt câu trả lời là mô tả cục bộ và cập nhật cơ sở dữ liệu. Việc cập nhật cơ sở dữ liệu sẽ kích hoạt lệnh gọi lại onSnapshot bên phía người gọi. Thao tác này sẽ đặt mô tả từ xa dựa trên câu trả lời từ người gọi. Việc này sẽ hoàn thành việc trao đổi các đối tượng RTCSessionDescription giữa người gọi và người gọi.

8. Tập hợp các ứng cử viên của ICE

Trước khi người gọi và người gọi có thể kết nối với nhau, họ cũng cần trao đổi các ứng cử viên ICE để cho WebRTC biết cách kết nối với ứng dụng ngang hàng từ xa. Nhiệm vụ tiếp theo của bạn là triển khai mã xử lý các ứng viên ICE và thêm các bộ sưu tập đó vào cơ sở dữ liệu. Tìm hàm collectIceCandidates và thêm mã sau:

async function collectIceCandidates(roomRef, peerConnection,
                                    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);
            }
        });
    })
}

Hàm này thực hiện hai việc. Tiện ích này thu thập các ứng viên của ICE từ API WebRTC và thêm các ứng viên đó vào cơ sở dữ liệu, đồng thời lắng nghe các ứng viên ICE được thêm từ cửa hàng ngang hàng và thêm các ứng viên đó vào bản sao RTCPeerConnection của ứng dụng đó. Điều quan trọng là khi lắng nghe các thay đổi đối với cơ sở dữ liệu để lọc ra bất kỳ nội dung nào không phải là nội dung bổ sung mới, vì chúng tôi sẽ thêm cùng một nhóm ứng viên ICE nhiều lần.

9. Kết luận

Trong lớp học mã này, bạn đã tìm hiểu cách triển khai tín hiệu cho WebRTC bằng Cloud Firestore, cũng như cách sử dụng tín hiệu đó để tạo một ứng dụng trò chuyện video đơn giản.

Để tìm hiểu thêm, hãy truy cập vào các tài nguyên sau:

  1. Mã nguồn FirebaseRTC
  2. Mẫu WebRTC
  3. Cloud Firestore