什么是 @detox/simple-peer?
@detox/simple-peer 是基于 simple-peer 的一款轻量级 WebRTC 库，旨在提供简单易用、高性能的点对点通信功能。
特性
- 快速建立点对点连接
- 低延迟的实时通信
- 支持音频、视频和数据通信
- 基于浏览器内置的 WebRTC 技术
安装
在项目根目录下使用 npm 安装：
npm install @detox/simple-peer
使用示例
连接两个端点
在两个端点中引入库：
import { SimplePeer } from '@detox/simple-peer';然后在端点 A 中创建一个 SimplePeer 对象，并在回调函数中将连接信息提供给端点 B。
-- -------------------- ---- ------- -- -- - --- ----- - --- ------------ ---------- ---- --- -- -- --------- -- ------------------ ---- -- - -- - ---- ----- - --- -- ------ - --------- ----- ----- ---------- - ------------------------- -- --- - ------- -------------------------
在端点 B 中创建一个 SimplePeer 对象，同样将信号数据提供给 peerB 进行协商：
-- -------------------- ---- ------- -- -- - --- ----- - --- ------------ ---------- ----- --- -- --- --------- -- ------------------ ---- -- - -- - ---- ----- - --- -- ------ - --------- ----- ----- ---------- - ------------------------- -- --- - ------- -------------------------
发送数据
在建立连接后，可以使用 send 方法发送数据：
const message = 'Hello, World!'; peerA.send(message);
使用 on('data', callback) 接收数据：
peerB.on('data', data => {
console.log(data.toString()); // => 'Hello, World!'
});视频通信
使用 addStream 方法将本地视频流添加至 SimplePeer 对象，并使用 on('stream', callback) 监听远端视频流：
// 端点 A
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
peerA.addStream(stream);
});
// 端点 B
peerB.on('stream', stream => {
videoElement.srcObject = stream;
});音频通信
使用 addStream 方法将本地音频流添加至 SimplePeer 对象，并使用 on('stream', callback) 监听远端音频流：
// 端点 A
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
peerA.addStream(stream);
});
// 端点 B
peerB.on('stream', stream => {
audioElement.srcObject = stream;
});总结
这篇文章介绍了 @detox/simple-peer 的基本使用方法，包括建立连接、发送数据、视频通信和音频通信。通过对示例代码的详细解读和实践，可以轻松掌握该库的使用方法。在实际开发中，我们也可以应用这个库来提高应用程序中点对点通讯的性能和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155904