简介
本教程介绍 npm 包 media-recorder-stream 的使用方法，该 npm 包可以将用户在浏览器中录制的音频或视频，转换为可流式传输的数据流，以便进行后续的处理或保存。
安装
在使用 media-recorder-stream 之前，需要先安装它。可以使用 npm 包管理器进行安装：
npm install media-recorder-stream
使用方法
media-recorder-stream 的使用方法较为简单。以下代码展示了如何使用它进行音频录制：
-- -------------------- ---- ------- ----- ------------------- - --------------------------------- ----- ----------- - ------------------------------------------- ------- ----- ------------- - --- --------------------------- ----- ------ - ----------------------------------- --------------------------------
在这段代码中，我们首先使用 navigator.mediaDevices.getUserMedia() 获取用户的音频流，然后使用 MediaRecorder 对流进行录制。
接着，使用 mediaRecorderStream() 方法将 MediaRecorder 返回的数据转换为一个可读流，并将其传入 someWritableStream 中进行后续处理。
同样的，如果要录制视频，只需要将参数 {audio: true} 改为 {video: true} 即可。
需要注意的是，如果要录制视频和音频，则需要同时将两个参数设为 true，如下所示：
const mediaStream = navigator.mediaDevices.getUserMedia({video: true, audio: true});深入探讨
media-recorder-stream 是如何实现将 MediaRecorder 的数据转换为可读流的呢？
我们来看一下 media-recorder-stream 的源码：
-- -------------------- ---- -------
-------------- - ----------------------- -------- -
------- - ------- -- ---
--- ---------- - ------------------ -- -----
--- ------------- - --------------------- -- --
--- ------ - --- ----------------
------ -------------------- -
----------------------------------------------- ----------- -
---------------------------
---
-------------------------------------- ---------- -
-------------------
---
--
----- -------------------- ---
------- ---------------- -
---------------------
-
-- -
-------------- --------------
----- --------------- -
------ -----------------
-
---
------ -------------------
--可以看到，media-recorder-stream 实际上是创建了一个 ReadableStream 对象，将 MediaRecorder 中的数据写入到可读流中。
在 ReadableStream 的 start 方法中，我们监听了 MediaRecorder 的 dataavailable 事件，这个事件在 MediaRecorder 录制音频或视频时触发，事件参数中的 data 即为录制的数据，我们将其写入到可读流中。
注意，在录制完成后需要调用 MediaRecorder 的 stop() 方法，通知 ReadableStream 已经没有更多数据可以写入，调用 ReadableStream 的 controller.close() 方法。
至此，我们就深入探讨了 media-recorder-stream 的实现原理。
示例代码
以下代码可用于演示 media-recorder-stream 的使用方法：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------- ------------
-------
------
------------------------- ---------
--------------------
------- ---------------------------
------- ------------- --------------------
------ -------------------
--------
----- ------------------- - ---------------------------------
----- --------- - --------------------------------------
----- ------- - ------------------------------------
----- ----- - ---------------------------------
----- ----------- - ------------------------------------------- -------
----- ------------- - --- ---------------------------
----- ------ - -----------------------------------
----------------------------------- ---------- -
----------------------
------------------ - -----
---------------- - ------
---
--------------------------------- ---------- -
---------------------
------------------ - ------
---------------- - -----
---
----------------- ----------------
------------ -
--------------- - --- ---------------------
-------------
--
---------- -
-----------------
-
----
---------
-------
-------在这个示例代码中，我们创建了一个简单的录音机应用，用户可以在浏览器中录制音频并进行播放。
首先，我们使用 navigator.mediaDevices.getUserMedia() 获取用户的音频流，然后使用 MediaRecorder 创建一个 MediaRecorder 实例，调用它的 start() 和 stop() 方法开启和停止录制。
我们使用 mediaRecorderStream() 方法将 MediaRecorder 返回的数据转换为一个可读流，然后将这个流写入到 WritableStream 的 write() 方法中，播放录制的音频。
完整的示例代码说明了 media-recorder-stream 的使用方法及其实现原理，读者可以根据自己的需求进行更改和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef3209e92b5127df986b298