1.简介
在此 Codelab 中,您将学习如何使用在浏览器中使用 WebRTC API 和 Cloud Firestore 进行信令来构建简单的视频聊天应用。该应用名为 FirebaseRTC,它作为一个简单的示例,将向您介绍构建支持 WebRTC 的应用的基础知识。
{101. }
学习内容
- 使用 WebRTC 在 Web 应用中发起视频通话
- 使用 Cloud Firestore 向远程第三方发送信号
所需条件
在开始此 Codelab 之前,请确保您已安装:
- npm(通常随 Node.js 一起提供)- 建议使用 Node LTS
2. 创建并设置 Firebase 项目
创建 Firebase 项目
- 在 Firebase 控制台中,点击“添加项目”,然后将 Firebase 项目命名为 FirebaseRTC。
记住您的 Firebase 项目的 ID。
- 点击“创建项目”。
您要构建的应用可以使用网络上可用的两项 Firebase 服务:
- Cloud Firestore 可将结构化数据保存在云端,并在数据更新时即时获取通知
- 使用 Firebase Hosting 托管和提供您的静态资源
对于此特定 Codelab,您已在要克隆的项目中配置了 Firebase Hosting。但是,对于 Cloud Firestore,我们将引导您使用 Firebase 控制台配置和启用服务。
启用 Cloud Firestore
该应用使用 Cloud Firestore 保存聊天消息并接收新的聊天消息。
您需要启用 Cloud Firestore:
- 在 Firebase 控制台菜单的“开发”部分,点击“数据库”。
- 在 Cloud Firestore 窗格中点击创建数据库。
- 选择以测试模式开始选项,并在阅读有关安全规则的免责声明后点击“启用”。
测试模式可确保您在开发过程中可以随意向数据库写入数据。我们稍后会在此 Codelab 中提高数据库的安全性。
3.获取示例代码
从命令行克隆 GitHub 代码库:
git clone https://github.com/webrtc/FirebaseRTC
示例代码应该已克隆到 FirebaseRTC
目录中。确保从现在起从此目录运行命令行:
cd FirebaseRTC
导入入门版应用
在编辑器中打开 FirebaseRTC
中的文件,并按照以下说明进行更改。此目录包含此 Codelab 的起始代码,其中包含一个尚未正常运行的 WebRTC 应用。在本 Codelab 中,我们将让它正常运行。
4.安装 Firebase 命令行界面
借助 Firebase 命令行界面 (CLI),您可以在本地提供 Web 应用,并将您的 Web 应用部署到 Firebase Hosting。
- 通过运行以下 npm 命令来安装 CLI:
sh npm -g install firebase-tools
- 通过运行以下命令来验证 CLI 是否已正确安装:
sh firebase --version
确保 Firebase CLI 版本为 6.7.1 或更高版本。
- 通过运行以下命令向 Firebase CLI 授权:
sh firebase login
您已设置 Web 应用模板,以从应用的本地目录和文件中提取应用的 Firebase Hosting 配置。但为此,您需要将应用与您的 Firebase 项目相关联。
通过运行以下命令,将您的应用与 Firebase 项目相关联:
sh firebase use --add
出现提示时,选择您的项目 ID,然后为您的 Firebase 项目指定一个别名。
如果您有多个环境(生产、预演等),别名会非常有用。
不过,在此 Codelab 中,我们直接使用 default
这个别名。
请按照命令行中的其余说明操作。
5. 运行本地服务器
您现在可以开始实际工作了!让我们在本地运行应用!
运行以下 Firebase CLI 命令:
sh firebase serve --only hosting
命令行应显示以下响应:
hosting: Local server: http://localhost:5000
我们使用 Firebase Hosting 模拟器在本地提供应用。现在,可以从 http://localhost:5000 访问 Web 应用。
- 通过 http://localhost:5000 打开您的应用。
您应该会看到已与 Firebase 项目关联的 FirebaseRTC 副本。
该应用已自动连接到您的 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());
peerConneciton.addIceCandidate(candidate);
}
});
})
}
此函数会执行两项操作。它通过 WebRTC API 收集 ICE 候选对象并将其添加到数据库中,并通过远程对等方监听已添加的 ICE 候选对象并将其添加到其 RTCPeerConnection
实例中。在监听数据库更改以滤除任何新增内容时,这一点非常重要,因为我们原本会反复添加同一组 ICE 候选对象。
9. 总结
在此 Codelab 中,您学习了如何使用 Cloud Firestore 实现 WebRTC 的信号处理,以及如何使用它创建简单的视频聊天应用。
要了解详情,请访问以下资源: