1.简介
在本程式码实验室中，您将学习如何建立使用浏览器和云公司的FireStore为信令的WebRTC API一个简单的视频聊天应用。该应用程序被称为FirebaseRTC和作品作为一个简单的例子，将教你建立的WebRTC功能的应用程序的基础知识。
你将学习
- 在使用WebRTC技术的Web应用程序启动视频通话
- 信令使用云公司的FireStore远程方
你需要什么
开始本程式码实验室之前，请确保您已安装：
- NPM通常自带的Node.js - 节点LTS推荐
2.创建并设置了火力地堡项目
创建一个火力地堡项目
- 在火力地堡控制台 ，单击添加项目，然后命名火力地堡项目FirebaseRTC。
还记得项目ID为您的火力地堡项目。
- 点击创建项目。
那你要构建的应用程序使用提供了两个火力地堡服务网站：
- 云公司的FireStore保存在云上的结构化数据，并得到即时通知当数据被更新
- 火力地堡托管到主机并为您的静态资产
对于这个特定的程式码实验室中，你已经配置火力地堡中你会被克隆的项目托管。然而，对于云计算公司的FireStore，我们会引导您完成配置和启用使用火力地堡控制台的服务。
启用云公司的FireStore
应用程序使用云计算公司的FireStore保存聊天消息和接收新的聊天消息。
你将需要启用云计算公司的FireStore：
- 在火力地堡控制台菜单的开发部分，单击数据库。
- 单击云公司的FireStore窗格中创建数据库 。
- 在测试模式选项选择开始 ，然后单击阅读安全规则的免责条款后启用。
测试模式，确保您可以在开发过程中自由写入到数据库中。我们将让我们的数据库更本程式码实验室今后的安全上。
3.获取示例代码
克隆命令行GitHub的库：
git clone https://github.com/webrtc/FirebaseRTC
示例代码应该已经克隆到火力-RTC-web目录。确保您的命令行从该目录从现在开始运行：
cd firebase-rtc-web
导入启动应用程序
打开火力-RTC-网上的所有文件在编辑器中，并按照下面的说明更改。该目录包含了它由一个尚未功能的WebRTC应用程序的代码实验室的启动代码。我们会让整个本程式码实验室它的功能。
4.安装火力地堡的命令行界面
在火力地堡命令行界面（CLI），可以在本地提供您的网络应用和部署Web应用火力地堡托管。
- 通过运行以下命令故宫安装CLI：
sh npm -g install firebase-tools
- 核实运行以下命令，该命令行已正确安装：
sh firebase --version
确保火力地堡CLI的版本是v6.7.1或更高版本。
- 通过运行以下命令授权火力地堡CLI：
sh firebase login
你已经设置了Web应用程序模板来拉你的应用程序的配置，以火力地堡从您的应用程序的本地目录和文件的托管。但要做到这一点，你需要你的应用程序与你的火力地堡项目相关联。
与你的火力地堡项目通过运行以下命令关联您的应用程序：
sh firebase use --add提示时，选择您的项目编号，然后给你的火力地堡项目的别名。
如果您有多个环境（生产，分期等）的别名是非常有用的。然而，对于本程式码实验室，就让我们用的别名default 。
按照您的命令行的其余指令。
5.运行本地服务器
你准备好真正的我们的应用程序开始工作！让我们在本地运行的应用程序！
运行以下火力地堡CLI命令：
sh firebase serve --only hosting您的命令行应显示以下回应：
hosting: Local server: http://localhost:5000
我们使用的火力地堡主机模拟器在本地提供我们的应用程序。 Web应用程序现在应该可以从http：//本地主机：5000。
- 在HTTP打开你的应用程序：//本地主机：5000。
您应该看到您已连接到您的火力地堡项目FirebaseRTC的副本。
该应用程序已经自动连接到您的火力地堡项目。
6.创建一个新的房间
在这种应用中，每个视频聊天会话被称为一个房间。用户可以通过点击在他们的应用程序的按钮创建一个新的空间。这将生成一个ID，远程方可以使用它来加入同一个房间。的ID被用作在云中的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将代表来自来电的报价。这则设置为本地的描述，最后写入到云公司的FireStore新的房间对象。
接下来，我们会听取更改到数据库并在已添加了来自被叫应答检测。
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, 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);
}
});
})
}
这个函数做两件事情。它收集来自API的WebRTC ICE候选人，并将它们添加到数据库中，并从远程节点添加ICE候选监听，并将它们添加到其RTCPeerConnection实例。听的时候更改数据库筛选出任何不属于新增加的，因为我们本来会加入同一套ICE候选人的一遍又一遍是很重要的。
9.结论
在本程式码实验室学习了如何实现使用云公司的FireStore实现WebRTC信号，以及如何利用它来创建一个简单的视频聊天应用。
要了解更多信息，请访问以下资源：