前言
现在，越来越多的工程师开始受到 WebRTC 技术的吸引，这是一项可以实现浏览器对浏览器直接通信的技术，并越来越多地应用在实时音视频通信中。webrtcshitblt 是一种基于 WebRTC 技术实现的开源 Javascript 库，可以在浏览器中实现音视频通信，而不需要使用插件或其他软件。本文主要介绍如何使用 webrtcshitblt 前端包，实现简单的音视频通信。
安装 webrtcshitblt
我们可以使用 npm 安装 webrtcshitblt 包。首先要确保您的机器上已安装了 npm。然后，可以在终端里输入以下命令：
npm install webrtcshitblt --save
初始化 webrtcshitblt
首先，我们先引用 webrtcshitblt 库：
import WRTC from 'webrtcshitblt';
接下来，我们需要指定需要使用的本地音视频设备。下面代码片段中的 audio 和 video 标签将用于展示音视频。
const wrtc = new WRTC({
media: {
audio: document.getElementById('localAudio'),
video: document.getElementById('localVideo')
}
});在我们实现的示例代码中，使用了页面的元素来作为音视频输出和输入组件。注意，在调用 new WRTC() 时，您也需要为自己的网络应用程序指定信令服务器，并使用 setSignalingServer(url) 方法设置它。
const wrtc = new WRTC({
signalingServer: 'wss://my-signaling-server.com',
media: {
audio: document.getElementById('localAudio'),
video: document.getElementById('localVideo')
}
});使用 setSignalingServer(url)方法指定信令服务器。例如：
wrtc.setSignalingServer('wss://my-signaling-server.com');连接
连接远程对等体（peer）需要一些额外的步骤。我们需要注意的是，此连接过程包括将本地媒体流发送到远程对等体，并从对方获取其对等体的媒体流并在本地呈现。连接前，我们需要一些附加逻辑。
由于连接是异步的，可以监听连接事件是否成功创建和连接，以及是否该连接发送或接收数据：
-- -------------------- ---- -------
-------------------- -------- -- -
---------------------- -- --------
---
------------------------ -------- ------ -
--------------------- ----- -- ------
---
------------------------ -------- ------ -
--------------------- ----- -- ------
---现在，我们可以在 wrtc 实例上调用 connectTo(peerId, media) 方法来尝试使用给定的媒体发送到指定的对等体。
-- -------------------- ---- -------
----------------------------- -
------ -----
------ ----
--
-------------- -- -
---------------------- -- ------ --------
--
--------------- ------- -
-------------------- ---------- -- ------ ------- -------
---发送数据
我们可以使用 sendTestMessage(message) 方法来向对等体发送任意数据。为此，我们必须在对等体和本地应用程序之间实现一个共享协议。
发送一个简单的字符串：
wrtc.sendTestMessage('Hello from local peer!');要从远程对等体接收数据，可以使用 on('incoming_test', callback) 事件。
wrtc.on('incoming_test', function (data) {
console.log('Incoming data: ', data);
});示例代码
这是一个简单的示例，将 webrtcshitblt 库用于实现音视频通信：
-- -------------------- ---- -------
------ ---- ---- ----------------
----- ---- - --- ------
---------------- --------------------------------
------ -
------ --------------------------------------
------ -------------------------------------
-
---
---------------------------------------------------------
-------------------- -------- -- -
---------------------- -- --------
---
------------------------ -------- ------ -
--------------------- ----- -- ------
---
------------------------ -------- ------ -
--------------------- ----- -- ------
---
----------------------------- -
------ -----
------ ----
--
-------------- -- -
---------------------- -- ------ --------
--
--------------- ------- -
-------------------- ---------- -- ------ ------- -------
---
--------------------------- ---- ----- --------总结
webrtcshitblt 是一个用于实现 WebRTC 技术的轻量级 Javascript 库。在本文中，我们介绍了如何使用 webrtcshitblt 前端包，实现基于浏览器的音视频通信。此外，我们还介绍了一些常用的使用示例，帮助您快速上手。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005746381e8991b448ea080