谷歌致力于推进种族平等的黑人社区。 怎么看。
此页面由 Cloud Translation API 翻译。
Switch to English

火力地堡+的WebRTC程式码实验室

1.简介

在本程式码实验室中,您将学习如何建立使用浏览器和云公司的FireStore为信令的WebRTC API一个简单的视频聊天应用。该应用程序被称为FirebaseRTC和作品作为一个简单的例子,将教你建立的WebRTC功能的应用程序的基础知识。

你将学习

  • 在使用WebRTC技术的Web应用程序启动视频通话
  • 信令使用云公司的FireStore远程方

你需要什么

开始本程式码实验室之前,请确保您已安装:

  • NPM通常自带的Node.js - 节点LTS推荐

2.创建并设置了火力地堡项目

创建一个火力地堡项目

  1. 在火力地堡控制台 ,单击添加项目,然后命名火力地堡项目FirebaseRTC。

还记得项目ID为您的火力地堡项目。

  1. 点击创建项目。

那你要构建的应用程序使用提供了两个火力地堡服务网站:

  • 云公司的FireStore保存在云上的结构化数据,并得到即时通知当数据被更新
  • 火力地堡托管到主机并为您的静态资产

对于这个特定的程式码实验室中,你已经配置火力地堡中你会被克隆的项目托管。然而,对于云计算公司的FireStore,我们会引导您完成配置和启用使用火力地堡控制台的服务。

启用云公司的FireStore

应用程序使用云计算公司的FireStore保存聊天消息和接收新的聊天消息。

你将需要启用云计算公司的FireStore:

  1. 在火力地堡控制台菜单的开发部分,单击数据库。
  2. 单击云公司的FireStore窗格中创建数据库
  3. 在测试模式选项选择开始 ,然后单击阅读安全规则的免责条款后启用。

测试模式,确保您可以在开发过程中自由写入到数据库中。我们将让我们的数据库更本程式码实验室今后的安全上。

3.获取示例代码

克隆命令行GitHub的库:

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

示例代码应该已经克隆到火力-RTC-web目录。确保您的命令行从该目录从现在开始运行:

 cd firebase-rtc-web
 

导入启动应用程序

打开火力-RTC-网上所有文件在编辑器中,并按照下面的说明更改。该目录包含了它由一个尚未功能的WebRTC应用程序的代码实验室的启动代码。我们会让整个本程式码实验室它的功能。

4.安装火力地堡的命令行界面

在火力地堡命令行界面(CLI),可以在本地提供您的网络应用和部署Web应用火力地堡托管。

  1. 通过运行以下命令故宫安装CLI: sh npm -g install firebase-tools
  1. 核实运行以下命令,该命令行已正确安装: sh firebase --version

确保火力地堡CLI的版本是v6.7.1或更高版本。

  1. 通过运行以下命令授权火力地堡CLI: sh firebase login

你已经设置了Web应用程序模板来拉你的应用程序的配置,以火力地堡从您的应用程序的本地目录和文件的托管。但要做到这一点,你需要你的应用程序与你的火力地堡项目相关联。

  1. 与你的火力地堡项目通过运行以下命令关联您的应用程序: sh firebase use --add

  2. 提示时,选择您的项目编号,然后给你的火力地堡项目的别名。

如果您有多个环境(生产,分期等)的别名是非常有用的。然而,对于本程式码实验室,就让我们用的别名default

  1. 按照您的命令行的其余指令。

5.运行本地服务器

你准备好真正的我们的应用程序开始工作!让我们在本地运行的应用程序!

  1. 运行以下火力地堡CLI命令: sh firebase serve --only hosting

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

我们使用的火力地堡主机模拟器在本地提供我们的应用程序。 Web应用程序现在应该可以从http://本地主机:5000。

  1. 在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信号,以及如何利用它来创建一个简单的视频聊天应用。

要了解更多信息,请访问以下资源:

  1. FirebaseRTC源代码
  2. 的WebRTC样本
  3. 云公司的FireStore