使用Simple Webrtc构建WEBRTC视频聊天应用程序

构建基于SimpleWebRTC的实时视频聊天应用

本书《6个JavaScript项目》收录了这篇文章，旨在帮助您深入了解现代JavaScript开发。借助WebRTC的兴起以及浏览器处理实时点对点通信能力的增强，构建实时应用程序比以往任何时候都更容易。本教程将探讨SimpleWebRTC，以及它如何在实现WebRTC时简化我们的工作。在整个过程中，我们将构建一个具有消息功能的WebRTC视频聊天应用程序。

如果您需要了解WebRTC和点对点通信的背景知识，建议阅读《WebRTC的黎明》和《getUserMedia API入门》。

核心要点

• SimpleWebRTC是一个JavaScript库，它简化了WebRTC的实现，使创建可在不同浏览器上运行的实时视频和音频应用程序变得更容易，无需编写特定于浏览器的代码。
• 本教程演示了如何使用SimpleWebRTC构建视频聊天应用程序，这涉及在Express服务器上设置单页应用程序，并需要Node.js和npm进行依赖项管理。
• 关键依赖项包括SimpleWebRTC、用于样式设置的Semantic UI CSS、用于DOM操作的jQuery、用于模板化的Handlebars以及用作Web服务器的Express。
• 该应用程序支持创建和加入聊天室、发送消息以及处理多个视频流，展示了SimpleWebRTC管理复杂点对点通信场景的能力。
• 可以使用Zeit的now CLI工具轻松部署应用程序，从而可以快速设置和公开共享应用程序。
• 本教程提供了关于如何使用SimpleWebRTC构建功能丰富的实时通信应用程序的全面指南，强调了该库的易用性和跨浏览器兼容性。

什么是SimpleWebRTC？

在继续之前，了解我们将使用的主要工具非常重要。SimpleWebRTC是一个JavaScript库，它简化了WebRTC点对点数据、视频和音频呼叫。

SimpleWebRTC充当浏览器WebRTC实现的包装器。您可能已经知道，浏览器厂商并不完全同意实现不同功能的单一方法，这意味着每个浏览器都有不同的WebRTC实现。作为开发者，您必须为计划支持的每个浏览器编写不同的代码。SimpleWebRT充当该代码的包装器。它公开的API易于使用和理解，这使其成为实现跨浏览器WebRTC的绝佳选择。

构建WebRTC视频聊天应用程序

现在是动手构建应用程序的时候了。我们将构建一个在Express服务器上运行的单页应用程序。

请注意，您可以从我们的GitHub仓库下载本教程的代码。要运行它或在家中跟随操作，您需要安装Node和npm。如果您不熟悉这些，或者需要安装帮助，请查看我们之前的教程：

• 使用nvm安装多个版本的Node.js
• npm入门指南——Node包管理器

您还需要一台装有网络摄像头的电脑或笔记本电脑。如果没有，您需要一台可以连接到显示器顶部的USB网络摄像头。您可能需要一位朋友或第二个设备来测试远程连接。

依赖项

我们将使用以下依赖项来构建我们的项目：

• SimpleWebRTC — WebRTC库
• Semantic UI CSS — 一个优雅的CSS框架
• jQuery — 用于选择页面上的元素和事件处理。
• Handlebars — 一个JavaScript模板库，我们将使用它来生成消息的HTML
• Express — NodeJS服务器。

项目设置

转到您的工作区并创建一个名为simplewebrtc-messenger的文件夹。在VSCode或您喜欢的编辑器中打开该文件夹，并创建以下文件和文件夹结构：

<code>simplewebrtc-messenger
├── public
│   ├── images
│   │   └── image.png
│   ├── index.html
│   └── js
│       └── app.js
├── README.md
└── server.js</code>

或者，如果您愿意，也可以通过命令行执行相同的操作：

<code>mkdir -p simplewebrtc-messenger/public/{images,js}
cd simplewebrtc-messenger
touch public/js/app.js public/index.html .gitignore README.md server.js</code>

打开README.md并复制以下内容：

<code># Simple WebRTC Messenger

A tutorial on building a WebRTC video chat app using SimpleWebRTC.</code>

如果您计划使用git仓库，请将node_modules添加到.gitignore文件中。使用以下命令生成package.json文件：

<code>npm init -y</code>

您应该得到以下输出：

{
  "name": "simplewebrtc-messenger",
  "version": "1.0.0",
  "description": "A tutorial on building a WebRTC video chat app using SimpleWebRTC.",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

现在让我们安装我们的依赖项：

<code>npm install express handlebars jquery semantic-ui-css simplewebrtc</code>

在安装过程中，将此代码复制到server.js：

const express = require('express');

const app = express();
const port = 3000;

// 设置公共文件夹为根目录
app.use(express.static('public'));

// 从客户端提供对node_modules文件夹的访问
app.use('/scripts', express.static(`${__dirname}/node_modules/`));

// 将所有流量重定向到index.html
app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`));

app.listen(port, () => {
  console.info('listening on %d', port);
});

服务器代码非常标准。只需阅读注释即可了解正在发生的事情。

接下来，让我们设置public/index.html文件：

(此处应插入index.html代码，由于篇幅限制，此处省略。请参考原文获取完整代码)

接下来，让我们设置基本的客户端JavaScript代码。将此代码复制到public/js/app.js：

window.addEventListener('load', () => {
  // 将所有客户端代码放在这里
});

最后，从我们的GitHub存储库下载此图像，并将其保存到public/images文件夹中。

现在我们可以运行我们的应用程序了：

<code>npm start</code>

在浏览器中打开URL localhost:3000，您应该看到以下内容：

(此处应插入图片，由于篇幅限制，此处省略。请参考原文获取图片)

(以下内容继续按照原文结构，对代码段进行类似的处理，由于篇幅限制，此处省略后续所有代码段和图片。请参考原文获取完整代码和图片。)

结论

在本教程中，您学习了SimpleWebRTC以及如何使用它来创建实时应用程序。具体来说，我们创建了一个消息应用程序，允许用户发送文本并向远程对等方进行视频通话。SimpleWebRTC是一个非常棒的跨浏览器库，可以轻松地在Web应用程序中实现WebRTC。

不要忘记本教程中使用的代码可在GitHub上找到。克隆它，创建一些很酷的东西，并玩得开心！

(此处省略FAQ部分，由于篇幅限制，此处省略。请参考原文获取完整FAQ内容。)

以上是使用Simple Webrtc构建WEBRTC视频聊天应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！