简介
@cutii/simple-peer 是一个基于 WebRTC 技术的前端实现，可以提供点对点的音视频及数据通信功能。
安装
你可以使用 npm 安装该包：
npm install @cutii/simple-peer --save
使用
import SimplePeer from '@cutii/simple-peer' const peer = new SimplePeer(options)
选项
在实例化 SimplePeer 时，可以传入一些选项，其中重要的包括：
initiator是否是本地的初始请求方，默认为false。stream用于传输的媒体流，默认为null，如果未传入，建立连接后可以通过peer.addStream(stream)方法添加。
其他选项可以参见官方文档
事件
SimplePeer 实例暴露了一些事件，用于监听通信过程的不同状态：
connect
两端成功建立连接时触发。
peer.on('connect', () => {
console.log('连接成功')
})stream
收到对方的媒体流时触发。
peer.on('stream', (stream) => {
console.log('收到对方媒体流')
// 显示对方的视频
const video = document.querySelector('video')
video.srcObject = stream
video.play()
})data
收到对方的数据时触发。
peer.on('data', (data) => {
console.log('收到对方数据')
})close
连接关闭时触发。
peer.on('close', () => {
console.log('连接已关闭')
})error
连接发生错误时触发。
peer.on('error', (err) => {
console.error('出错了', err)
})方法
SimplePeer 实例也提供了一些方法，用于控制通信的过程：
addStream(stream)
添加本地媒体流。
-- -------------------- ---- -------
------------------------------------- ------ ----- ------ ---- --
------------ -- -
-- ------
----- ---------- - --------------------------------------
-------------------- - ------
-----------------
-- ------- ---------- ---
----------------------
--send(data)
发送数据给对方。
peer.on('connect', () => {
peer.send('你好，我是客户端')
})
peer.on('data', (data) => {
console.log('收到服务器数据：', data)
})示例代码
下面是一个简单的代码示例，演示了如何使用 @cutii/simple-peer 来进行点对点通信。
客户端
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ---- - -----------
-------
------
-------------- ---- - --------
------ ---------------- ----------- ---------------------
------ ----------------- ----------- ---------------------
------- ---------------------------
-------
--------- -------------------- ---- -------
-- ---------
------ ---------- ---- --------------------
-- -- ---------- --
----- ---- - --- ------------
---------- -----
-- --------
------- ----
--
------------------------------------- ------ ----- ------ ---- --
------------ -- -
-- ------
----- ---------- - --------------------------------------
-------------------- - ------
-----------------
-- ------- ---------- ---
----------------------
--
------------------ -- -- -
-------------------
--
----------------- -------- -- -
----------------------
-- -------
----- ----------- - ---------------------------------------
--------------------- - ------
------------------
--
--------------- ------ -- -
----------------------- -----
--
---------------- -- -- -
--------------------
--
---------------- ----- -- -
-------------------- ----
--服务器端
-- -------------------- ---- -------
-- ---------
----- ---- - ---------------
----- -- - -------------
----- ---- - ---------------
----- -------- - --------------------
----- ------ - ------------------------------- ---- -
----- -------- - -------------------- --------------
--------------------- ------------- ----- -
-- ----- -
------------------
------ ------------------
-
------------------
-------------
--
--
----- -- - ----------------
---------------- -------- -- -
------------------------
-- --------
-------------- -- -
--------------------------- --------------------------
-- -----
-- ----------
-------------------- -------------- -
----------------------- -----
-- ------------------
-------------------------------- -----
--
-- ---------
----------------------- ---------- -
------------------------
--
--
------------------- ---------- -
----------------------
--总结
@cutii/simple-peer 为我们提供了一个简单易用的点对点通信方案，可以方便地用于开发多种应用，比如实时音视频、游戏互动等。我们需要注意的是，由于 WebRTC 技术尚未广泛普及，一些浏览器可能不支持该技术，因此我们需要提供兼容性处理，以确保用户可以正常使用我们的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ce481e8991b448e6968