在 Web 应用程序中，访问和使用摄像头和麦克风是非常常见的需求，例如实现视频聊天、语音识别等功能。而 JavaScript 的 getUserMedia API 能够方便地实现这些功能，但是它的兼容性存在一定问题，尤其是在移动端设备上的支持并不完美。此时，就出现了一些可以帮助我们封装 getUserMedia API 的 npm 包，其中 reactive-user-media 就是一个非常优秀的选择。
reactive-user-media 简介
reactive-user-media 是一个基于 RxJS 的 getUserMedia API 封装库，它可以帮助我们更方便地实现访问摄像头和麦克风的功能。使用 reactive-user-media，我们可以将 getUserMedia API 的操作封装成一个 Observable 流，通过订阅流的方式来实现对摄像头和麦克风的访问和操作。
reactive-user-media 提供了对应的类型和接口，使我们可以在 TypeScript 中安全地使用它。此外，它还提供了一些工具函数，方便我们对流进行转换和处理。
reactive-user-media 的安装和使用
我们可以通过 npm 包管理器来安装 reactive-user-media：
npm install reactive-user-media --save
使用 reactive-user-media 也非常简单，首先我们需要 import 它：
import { getUserMedia$ } from 'reactive-user-media';
然后我们可以通过调用 getUserMedia$ 函数来获取一个 Observable 流：
getUserMedia$({ audio: true, video: true }).subscribe(stream => console.log(stream));
在上面的代码中，我们传入了一个包含 audio 和 video 两个配置属性的对象作为参数，表示我们要访问摄像头和麦克风。接着我们通过 subscribe 函数来订阅流。
当我们订阅流时，我们可以获取到 getUserMedia API 返回的 MediaStream，从而实现对摄像头和麦克风的访问和操作。
reactive-user-media 的示例使用
下面是一个基于 reactive-user-media 的简单示例代码，它可以获取摄像头和麦克风的视频和音频流，并在页面上展示出来。
首先，我们在 HTML 页面中增加用于展示视频和音频的标签：
<video id="localVideo" autoplay></video> <audio id="localAudio" autoplay></audio>
接着，我们在 JavaScript 中编写代码：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------
----- ---------- - ------------------------------------- -- -----------------
----- ---------- - ------------------------------------- -- -----------------
--------------- ------ ----- ------ ---- --
----------------- -- -
-------------------- - -------
-------------------- - -------
---在上面的代码中，我们首先通过 document.getElementById 获取到用于展示视频和音频的标签，然后调用 getUserMedia$ 函数获取一个 Observable 流。在订阅流时，我们获取到原始的 MediaStream 对象，并将其赋值给用于展示视频和音频的标签的 srcObject 属性，从而实现视频和音频的展示。
reactive-user-media 的深入探讨
除了简单使用外，reactive-user-media 还提供了一些工具函数，可以用于对流进行转换和处理。下面我们来详细了解一下这些工具函数。
mapMediaStreamToAudioTrack$ 和 mapMediaStreamToVideoTrack$
这两个函数可以用于将 audio 和 video 转换成单独的 audio track 和 video track。例如，我们可以将音频流用于语音识别，将视频流用于人脸识别：
-- -------------------- ---- -------
------ - -------------- ---------------------------- --------------------------- - ---- ----------------------
--------------- ------ ----- ------ ---- --
------
------------------------------
-- --- ---------
--------------
--------------- ------ ----- ------ ---- --
------
------------------------------
-- --- ---------
--------------pauseAudio$, resumeAudio$, pauseVideo$, resumeVideo$
这四个函数可以用于暂停和恢复音频和视频的播放，例如在视频通话时，我们可以通过 pauseVideo$ 暂停对方视频的播放，同时通过 resumeAudio$ 恢复对方音频的播放：
-- -------------------- ---- -------
------ - -------------- ------------ ------------- ------------ ------------ - ---- ----------------------
--------------- ------ ---- --
------
--------------
------------------ -- ----------- --- ------
------------
---------------
--------------
--------------- ------ ---- --
------
--------------
------------------ -- ----------- --- ------
------------
---------------
--------------combineStreams$
这个函数可以用于将多个音频流和视频流合并成一个新的流。例如，在多人视频通话时，我们可以将多个视频流合并成一个展示在页面上：
import { getUserMedia$, combineStreams$ } from 'reactive-user-media';
getUserMedia$({ video: true })
.pipe(
combineStreams$([getUserMedia$({ video: true }), getUserMedia$({ video: true })]),
).subscribe(combinedStream => {
localVideo.srcObject = combinedStream;
});总结
使用 reactive-user-media，我们可以更方便地实现对摄像头和麦克风的访问和操作。它提供了基于 RxJS 的 getUserMedia API 封装，使我们可以将操作封装成一个 Observable 流进行订阅，同时还提供了一些工具函数，方便我们对流进行转换和处理。在实际开发中，我们可以根据具体的需求使用 reactive-user-media 提供的功能，从而更好地实现摄像头和麦克风的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bca81e8991b448d9673