如何使用 JavaScript 录制音频和视频 (MediaRecorder API)？

推荐答案

-- -------------------- ---- -------
-- -- ------ ---------
----- -------- ---------------- -
  --- -
    ----- ------ - ----- -------------------------------------
      ------ -----
      ------ ----- -- - ------ - ----------- ------ - ------ - ------ - ----------- ------------- - -----
    ---
    ------ -------
  - ----- ----- -
    -------------------------- -----
    ----- ----
  -
-

-- -- -- ------------- --
-------- --------------------------- --------- -
    ----- ------- - - -------- -- -- ----- ----------- ----------------------- - ------------
    --- -
       ----- -------- - --- --------------------- ---------
       ------ ---------
    - ----- ------
        ---------------------------------- -----
        ----- ----
    -
-

-- -- ------
-------- -------------------------- ------- -
  -- ----------- -- --------------- - -- -
    ------------------------
  -
-

-- -- ----
-------- ----------------------- ------- ---------- -
  ------ --- ----------------- -- -
      --------------- - -- -- -
        ----- ---- - --- ------------ - ----- ------------------- --- -- ---------------
        ----- --- - --------------------------
        --------- ----- --- ---
        ------------- - -- -- -- ------
    --

    ----------------
  ---
-


-- -- ----
----- -------- ------------------------- -
  --- -
      ----- ------ - ----- -----------------
      ----- -------- -  --------- --- ------- - ----------------------- - -------------
      ----- -------- - --------------------------- ----------
      ----- ------ - ---
      ------------------------ - ------- -- -------------------------- --------
      -----------------
      ------ ---------- ------- --------
  - -----------
    ---------------------- ----
  -
-


-- -----
----- -------- --------------------------- -
   ----- - --------- ------- ------ - - ----- --------------------------

  -- -- - ------
  ---------------- -- -- -
    ----- ------ - ----- ----------------------- ------- -----------
    -------------------------------- -- -------------- -- -----
    --------------------------- -------------
    -------------------------- ------------

    -- ---------- --- -------- -
         ----- ------------ - --------------------------------
         ---------------- - -----------
         --------------------- - -----
         ----------------------------------------
     - ---- -
         ----- ------------ - --------------------------------
          ---------------- - -----------
          --------------------- - -----
         ----------------------------------------
     -
  -- ------
-


-- ----
----------------------------

-- ----
----------------------------

本题详细解读

1. MediaRecorder API 简介

MediaRecorder API 允许 Web 应用程序捕获来自媒体设备（如麦克风和摄像头）的音频和视频数据，并将它们编码为可存储或传输的格式。它是 HTML5 提供的一个强大的 API，主要用于实现浏览器端的媒体录制功能。

2. 主要步骤

使用 MediaRecorder API 进行音频和视频录制，主要包括以下步骤：

1. 获取媒体流 (getUserMedia): 使用 navigator.mediaDevices.getUserMedia() 获取用户授权并返回一个包含媒体流的 MediaStream 对象。
2. 创建 MediaRecorder 对象: 使用 new MediaRecorder(stream, options) 创建 MediaRecorder 实例，其中 stream 是第一步获取的媒体流，options 可选，用于配置录制参数 (如 mimeType )。
3. 监听 dataavailable 事件: MediaRecorder 会周期性触发 dataavailable 事件，每次事件都会返回录制好的数据块(chunk)。我们需要将这些数据块收集起来。
4. 开始录制 (start()): 调用 MediaRecorder.start() 方法开始录制。
5. 停止录制 (stop()): 调用 MediaRecorder.stop() 方法停止录制。停止后会触发 stop 事件。
6. 处理录制的数据: 在 stop 事件处理程序中，将收集的数据块组合成一个 Blob 对象，然后可以生成可用于下载或播放的 URL 。
7. 停止媒体流: 在完成录制后，应该停止媒体流，释放资源。

3. 代码详解

• getMediaStream() 函数:

  • 使用 navigator.mediaDevices.getUserMedia() 获取媒体流，请求音频和视频权限。
  • audio: true 允许访问麦克风，video: true 允许访问摄像头。
  • facingMode 可以设置前后摄像头。
  • 使用 async/await 处理 Promise，简化异步代码。
  • 如果权限获取失败，则抛出错误。

• createMediaRecorder() 函数:

  • 创建 MediaRecorder 实例，传入媒体流和 mimeType。
  • mimeType 可选，用于指定编码格式。
  • 如果创建失败，则抛出错误。

• handleDataAvailable() 函数:

  • 监听 dataavailable 事件，将录制的数据块（event.data）添加到 chunks 数组中。

• stopRecording() 函数:

  • 监听 stop 事件，在 stop 事件中，将 chunks 数组中的数据组合成一个 Blob 对象。
  • 使用 URL.createObjectURL() 创建 blob 的 URL，以便播放或下载。
  • 使用 Promise 包装异步操作，方便后续使用。
  • 清空chunks数组。

• startRecording() 函数:

  • 使用 getMediaStream 获取媒体流。
  • 使用 createMediaRecorder 创建 MediaRecorder 实例。
  • 设置 ondataavailable 事件处理函数。
  • 使用 recorder.start() 方法开始录制。
  • 返回 recorder , stream, chunks.

• recordAndProcess() 函数:

  • 调用 startRecording 开始录制。
  • 设置定时器，在 5 秒后停止录制。
  • 停止媒体流。
  • 根据录制的媒体类型，创建 audio 或者 video 标签，并添加到页面中。

4. 重要注意事项

• 用户权限: getUserMedia() 需要用户授权才能访问麦克风和摄像头。
• MIME 类型: 选择合适的 mimeType 非常重要，不同的浏览器支持的编码格式可能不同。
• 错误处理: 需要处理 getUserMedia 和 MediaRecorder 创建过程中可能出现的错误。
• 资源释放: 录制完成后需要停止媒体流，释放资源。
• 浏览器兼容性: MediaRecorder API 的浏览器支持情况需要关注。
• 安全性: 需要通过 HTTPS 访问，才能使用 getUserMedia 和 MediaRecorder API。