随着 web 技术的发展，现在越来越多的应用都不局限于网页和服务器，而是需要运行在各种不同的设备上。由于 web 技术因其广泛的适用性和可访问性而备受欢迎，因此前端开发人员需要寻找更多的方式来构建更加具有互动性和实时性的 web 应用。
Spray-wrtc 正是 WebRTC 技术的一个 npm 包，提供了一种在浏览器和 Node.js 之间建立点对点连接的方式。本篇文章将介绍如何使用 npm 包 Spray-wrtc 来实现点对点视频/音频通话以及数据传输。
安装 npm 包 Spray-wrtc
安装 Spray-wrtc 是非常简单的，只需要运行以下命令即可：
npm install spray-wrtc
实现视频/音频通话
Spray-wrtc 使得建立点对点视频/音频通道变得极其容易。你可以在浏览器端和 Node.js 环境中使用该库，这对于监控、实时通信和视频聊天等应用将非常有用。
浏览器端使用 Spray-wrtc
首先，我们需要在浏览器中加载 Spray-wrtc 库。在浏览器中使用 Spray-wrtc 需要使用一个 JavaScript 库，例如 browserify 或 webpack。你可以按照以下步骤来使用 Spray-wrtc 进行视频/音频通话：
- 在 HTML 页面中添加一个
<video>和一个<audio>元素，用于显示媒体流：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ----- ------------
-------
------
------ ------------------------
------ -------------------------
------ ------------------------
------ -------------------------
------- -------------------------
-------
-------- 在 JavaScript 中实例化一个
spray-wrtc对象。这个对象将帮助我们与另一个视频聊天的用户建立连接。
-- -------------------- ---- -------
--- ---- - --- ------------
------- - ----------- - -- -- ---- ----- --- -----
------ --------------------------------
------ ---------------------------------
------ ---------------------------------
------ ---------------------------------
------ --------------------------------
- -
---- 使用
getUserMedia()方法获取本地视频/音频流，并将流存储在一个变量中。然后，将本地视频/音频流传递给所实例化的spray-wrtc对象：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function (stream) {
var localVideo = document.querySelector('#localVideo');
var localAudio = document.querySelector('#localAudio');
localVideo.srcObject = stream;
localAudio.srcObject = stream;
node.addStream(stream);
})- 通过调用
node.connect()方法和远端的视频聊天用户建立点对点连接：
node.connect(remotePeerId); // 此处 remotePeerId 表示远程视频聊天用户的 ID
- 在成功连接到远程用户的节点之后，会触发
'connect'事件。此时我们可以通过node.send()方法来发送信息：
node.send('Hello!');- 当收到远程视频聊天用户发来的信息时，会触发
'data'事件。你可以使用data.toString()方法来获取文本信息：
node.on('data', function (data) {
console.log(data.toString());
});- 处理所有的错误和异常情况。
Node.js 环境下使用 Spray-wrtc
在 Node.js 中使用 Spray-wrtc 同样也是非常容易的。你可以按照以下步骤来使用 Spray-wrtc 进行视频/音频通话：
- 在你的脚本中加载必要的 npm 包：
var wrtc = require('wrtc');
var SimplePeer = require('simple-peer');- 实例化一个
SimplePeer对象，并通过调用node.addStream()方法将本地视频/音频流添加到 peer 中：
-- -------------------- ---- -------
--- ---- - --- ------------
---------- -----
----- -----
------- - ----------- - -- -- ---- ----- --- -----
------ --------------------------------
------ ---------------------------------
------ ---------------------------------
------ ---------------------------------
------ --------------------------------
- -
---
--- ----------- - --- -- ------------
----------------------------- 通过调用
node.signal()方法，将包含本地流的信号发送给远程视频聊天用户：
node.signal(remoteSignal); // 此处 remoteSignal 为远程视频聊天用户的信号
- 处理所有的错误和异常情况。
实现数据传输
Spray-wrtc 也可以用来在两个浏览器之间、浏览器与 Node.js 之间以及 Node.js 与 Node.js 之间进行数据传输。
在浏览器之间传输数据
Spray-wrtc 可以用来在两个浏览器之间传输数据。你可以按照以下步骤来使用 Spray-wrtc 实现浏览器之间的数据传输：
- 实例化一个
spray-wrtc对象：
-- -------------------- ---- -------
--- ---- - --- ------------
------- - ----------- - -- -- ---- ----- --- -----
------ --------------------------------
------ ---------------------------------
------ ---------------------------------
------ ---------------------------------
------ --------------------------------
- -
---- 通过调用
node.send()方法，可以在浏览器之间发送数据：
node.send('Hello, browser!');- 当接收到另一个浏览器发送的数据时，会通过
'data'事件来接收到该数据：
node.on('data', function (data) {
console.log(data.toString());
});- 处理所有的错误和异常情况。
在浏览器与 Node.js 之间传输数据
要在浏览器和 Node.js 之间传输数据，需要在两个设备上都安装 Spray-wrtc。在 Node.js 环境下使用 Spray-wrtc 的步骤已经介绍过了，这里只介绍如何在浏览器环境下使用 Spray-wrtc。
- 在 HTML 页面中引入
bundle.js文件：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ---- ----------------
-------
------
------- -------------------------
-------
-------- 实例化一个
spray-wrtc对象：
-- -------------------- ---- -------
--- ---- - --- ------------
---------- -----
----- -----
------- - ----------- - -- -- ---- ----- --- -----
------ --------------------------------
------ ---------------------------------
------ ---------------------------------
------ ---------------------------------
------ --------------------------------
- -
---- 通过调用
node.send()方法，在浏览器和 Node.js 之间发送数据：
node.send('Hello, Node.js!');- 当接收到 Node.js 发送的数据时，会通过
'data'事件来接收到该数据：
node.on('data', function (data) {
console.log(data.toString());
});- 处理所有的错误和异常情况。
总结
Spray-wrtc 是连接浏览器和 Node.js 的一种强大的工具，可以实现点对点的音视频通话和数据传输。本文介绍了如何安装和使用 Spray-wrtc 来实现这些功能，并且给出了示例代码。希望本文对您理解 Spray-wrtc 和如何使用其实现前端开发中的实时互动有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a68ccae46eb111f1ff