Firebase + WebRTC Codelab

1. 简介

在此 Codelab 中，您将学习如何使用 在浏览器中使用 WebRTC API 并使用 Cloud Firestore 发送信号。通过 名为 FirebaseRTC 的一个简单示例 您将了解构建支持 WebRTC 的应用的基础知识。

<ph type="x-smartling-placeholder">
</ph>

学习内容

  • 使用 WebRTC 在 Web 应用中发起视频通话
  • 使用 Cloud Firestore 向远程方发出信号

所需条件

在开始此 Codelab 之前，请确保您已安装：

  • npm（通常随 Node.js 一起提供），建议使用 Node LTS

2. 创建和设置 Firebase 项目

创建 Firebase 项目

  1. 在 Firebase 控制台中，点击“添加” 然后将 Firebase 项目命名为“FirebaseRTC”。

记住 Firebase 项目的 ID。

<ph type="x-smartling-placeholder">
</ph>
  1. 点击“创建项目”。

您要构建的应用使用两种可用的 Firebase 服务 ：

  • Cloud Firestore，用于将结构化数据保存在云端并即时完成 在数据更新时发送通知
  • 利用 Firebase Hosting 托管和提供静态资源

对于此特定 Codelab，您已经在 要克隆的项目。不过，对于 Cloud Firestore 使用 Firebase 控制台配置和启用服务。

启用 Cloud Firestore

该应用使用 Cloud Firestore 保存聊天消息并接收新的聊天内容 消息。

您需要启用 Cloud Firestore：

  1. 在 Firebase 控制台菜单的“开发”部分中，点击“数据库”。
  2. 在 Cloud Firestore 窗格中点击创建数据库。
  3. 选择以测试模式开始选项，然后在阅读 关于安全规则的免责声明。

测试模式可确保您在开发过程中可以随意向数据库写入数据。 我们稍后会在此 Codelab 中提高数据库的安全性。

3. 获取示例代码

从命令行克隆 GitHub 代码库：

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

示例代码应该已克隆到 FirebaseRTC 目录中。 确保从现在开始从此目录运行命令行：

cd FirebaseRTC

导入入门版应用

在编辑器中打开 FirebaseRTC 中的文件，然后按照 请按照以下说明操作。此目录包含 此 Codelab 包含一个尚未正常运行的 WebRTC 应用。我们要做到 功能。

4. 安装 Firebase 命令行界面

借助 Firebase 命令行界面 (CLI)，您可以提供您的 Web 应用 并将您的 Web 应用部署到 Firebase Hosting。

<ph type="x-smartling-placeholder">
</ph>
  1. 运行以下 npm 命令来安装 CLI： sh npm -g install firebase-tools
。 <ph type="x-smartling-placeholder">
</ph>
  1. 运行以下命令，验证 CLI 是否已正确安装 命令： sh firebase --version

确保 Firebase CLI 的版本为 v6.7.1 或更高版本。

  1. 运行以下命令来授权 Firebase CLI： sh firebase login

您已设置 Web 应用模板来提取您的应用配置以用于 Firebase 从应用的本地目录和文件托管。但要实现这一目的 将应用与 Firebase 项目相关联。

  1. 运行以下命令，将您的应用与 Firebase 项目相关联 命令： sh firebase use --add

  2. 出现提示时，选择您的项目 ID，然后为您的 Firebase 项目指定一个 别名。

如果您有多个环境（生产、预演等），别名会非常有用。 不过，对于此 Codelab，我们仅使用 default 的别名。

  1. 按照命令行中的其余说明操作。

5. 运行本地服务器

您可以开始构建我们的应用了！让我们在本地运行应用！

  1. 运行以下 Firebase CLI 命令： sh firebase serve --only hosting

  2. 您的命令行应显示以下响应： hosting: Local server: http://localhost:5000

我们使用 Firebase Hosting 模拟器在本地提供应用。Web 应用 现在可以通过 http://localhost:5000 访问。

  1. 通过 http://localhost:5000 打开您的应用。

您应该会看到 FirebaseRTC 的副本，该副本已连接到您的 Firebase 项目。

应用已自动关联到您的 Firebase 项目。

6. 正在创建新房间

在此应用中，每个视频聊天会话称为一个聊天室。用户可以创建 新聊天室。这会生成一个 ID 供远程方用于加入同一房间的会议室该 ID 用作键 Cloud Firestore 中的每个房间。

每个房间将包含优惠和RTCSessionDescriptions 以及两个单独的集合，其中包含来自每方的 ICE 候选对象。

您的第一项任务是实现缺少的代码，以便使用 来电者最初提供的优惠。打开 public/app.js 并找到 // Add code for creating a room here 注释并添加以下代码：

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!`

第一行会创建一个 RTCSessionDescription，用于表示相应优惠。 。然后，将此设置为本地描述 到 Cloud Firestore 中新建的 Room 对象。

接下来，我们将监听对数据库的更改，并检测何时 已被添加。

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

这将等到被调用方写入RTCSessionDescription 接听来电，并将其设为对来电者的远程说明 RTCPeerConnection。

7. 加入聊天室

下一步是实现用于加入现有聊天室的逻辑。用户 只需点击加入聊天室按钮并输入聊天室的 ID 即可 即可加入。您的任务是创建 RTCSessionDescription 以获取答案，并更新数据库中的会议室 。

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

在上面的代码中，我们首先从调用方提取优惠，然后创建 RTCSessionDescription，我们设为远程说明。接下来，我们创建 设置本地描述并更新数据库。更新 将在调用方端触发 onSnapshot 回调，这使得 从而根据被呼叫者的回答设置远程说明。 这样，RTCSessionDescription 对象的交换就完成了 调用方和被调用方之间。

8. 收集 ICE 候选对象

来电者和被呼叫者还需要 交换 ICE 候选对象，告知 WebRTC 如何连接到远程对等方。 您的下一个任务是实现代码，用于监听 ICE 候选对象并添加 添加到数据库中的某个集合。查找函数 collectIceCandidates 并添加以下代码：

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());
                peerConnection.addIceCandidate(candidate);
            }
        });
    })
}

此函数会执行两项操作。它会从 WebRTC API 收集 ICE 候选对象， 将其添加到数据库，并监听来自遥控器的新增 ICE 候选对象 并将它们添加到其 RTCPeerConnection 实例中。请务必注意 监听数据库更改以过滤掉并非新增内容 否则就会反复添加相同的 ICE 候选对象 。

9. 总结

在此 Codelab 中，您学习了如何使用 Cloud Firestore，以及如何使用它创建简单的视频聊天 应用。

要了解详情，请访问以下资源：

  1. FirebaseRTC 源代码
  2. WebRTC 示例
  3. Cloud Firestore