简介
observ-remotemedia 是一个基于 WebRTC 的 npm 包，用于实现浏览器端的音视频通话功能。使用 observ-remotemedia，你可以轻松实现多人视频通话、屏幕共享等功能。
安装
使用 npm 安装 observ-remotemedia ：
npm install observ-remotemedia
使用
初始化
在引入 observ-remotemedia 后，可以通过以下代码进行初始化：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
----- -- - --- -------------
----- -
----- ------------------------------
--
----- -
----- -----------------------------
--------- -----------
----------- ----------
-
--其中，在初始化时传入了一个配置对象，其中包含了 STUN / TURN 服务器的地址和凭证信息。在初始化时，observ-remotemedia 会自动连接 STUN 和 TURN 服务器。
添加本地流
要实现音视频通话，首先需要通过 getUserMedia() 方法获取本地音视频流，并将其添加到 observ-remotemedia 中。可以通过以下代码实现：
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then((stream) => {
rm.addLocalStream(stream);
}).catch((error) => {
console.error('getUserMedia error: ', error)
})建立连接
使用 observ-remotemedia 建立连接非常简单，只需要调用 connectTo() 方法并传入对方的 ID 即可：
rm.connectTo('peer_id');接收远程流
当建立连接后，可以通过以下代码接收远程音视频流：
rm.on('add_remote_stream', (remoteStream) => {
const video = document.getElementById('remote-video');
video.srcObject = remoteStream;
})发送本地流
要发送本地音视频流给对方，可以通过以下代码实现：
rm.broadcastLocalStream();
示例代码
下面是一个完整的音视频通话示例：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
----- -- - --- -------------
----- -
----- ------------------------------
--
----- -
----- -----------------------------
--------- -----------
----------- ----------
-
---
-------------------------------------
------ -----
------ ----
---------------- -- -
----- ----- - ---------------------------------------
--------------- - -------
--------------------------
---------------- -- -
--------------------------- ------ -- ------
--
---
-------------------------- -------------- -- -
----- ----- - ----------------------------------------
--------------- - -------------
--
---------------- -------- -- -
---------------------- ---- --------
--------------------------
--
------------------------
总结
observ-remotemedia 是一个非常简单易用的 npm 包，可以帮助你实现音视频通话和屏幕共享等功能。通过本文的介绍，我们可以清晰地了解到如何初始化、添加本地流，建立连接，接收和发送远程流等功能。如果您正在寻求一种轻巧高效的实现音视频通话功能的方法，observ-remotemedia 可能是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a66f8a