|
Post by account_disabled on Jan 25, 2024 1:26:19 GMT -6
这篇文章收录在我们的书《6 个 JavaScript 项目》中。构建让您熟悉现代 JavaScript 开发的项目。 随着 WebRTC 的出现以及浏览器实时处理点对点通信的能力不断增强,构建实时应用程序比以往任何时候都更加容易。在本教程中,我们将了解SimpleWebRTC以及它如何让我们在实现 WebRTC 时变得更轻松。在整篇文章中,我们将构建一个具有消息传递功能的 WebRTC 视频聊天应用程序。 如果您需要一些有关 WebRTC 和点对点通信的背景知识,我建议您阅读WebRTC 的黎明和getUserMedia API 简介。 什么是 SimpleWebRT个 JavaScript 库,可简化 WebRTC 点对点数据、视频和音频呼叫。 SimpleWebRTC 充当浏览器 WebRTC 实现的包装器。 您可能已经知道,浏览器供应商对于实现不同功能的单一方法并不完全一致,这意味着对于每个浏览器,WebRTC 都有不同的实现。作为开发人员,您必须为您计划支持的每个浏览器编写 WhatsApp 号码数据 不同的代码。SimpleWebRT 充当该代码的包装器。它公开的 API 易于使用和理解,这使其成为实现跨浏览器 WebRTC 的绝佳候选者。视频聊天应用程序 现在是时候亲自动手构建应用程序了。我们将构建一个在 Express 服务器上运行的单页应用程序。 请注意,vm 安装多个版本的 Node.js npm 初学者指南——节点包管理器 您还需要一台带有网络摄像头的 PC 或笔记本电脑。如果没有,您需要为自己准备一个 USB 网络摄像头,将其连接到显示器顶部。您可能需要一个朋友或第二台设备来测试远程连接。 依赖关系 我们将使用以下依赖项来构建我们的项目: SimpleWebRTC — WebRTC 库 Semantic UI CSS — 一个优雅的 CSS 框架 jQuery — 用于选择页面上的元素和事件处理。 Handlebars — 一个 JavaScript 模板库,我们将使用它来生成消息的 HTML Express ——NodeJS 服务器。 项目设置 转到您的工作区并创建一个文件夹simplewebrtc-messenger。在 VSCode 或您喜欢的编辑器中打开文件夹并创建以下文件和文件夹结构如果您愿意,可以通过命令行执行相同的操作如果您计划使用 git 存储库,请将该行添加node_modules到文件中。使用以下命令.gitignore生成文件现在让我们安装我们的依赖项随着安装的进行,将此代码复制到server.js服务器代码非常标准。只需阅读评论即可了解发生了什么。
|
|