使用 JavaScript MediaRecorder API 创建视频和音频记录器(1)

📌 相关文章

📜 使用 JavaScript MediaRecorder API 创建视频和音频记录器(1)

📅 最后修改于: 2023-12-03 15:06:47.379000 🧑 作者: Mango

使用 JavaScript MediaRecorder API 创建视频和音频记录器

简介

JavaScript MediaRecorder API 提供了一种简单的方式来录制音频和视频，而无需使用 Flash 或其他插件。MediaRecorder API 可以使用 Web Audio API、Canvas API、WebSocket 等网页特性来录制音频和视频，然后将其转换为 Blob 或其他格式的数据。

通过 MediaRecorder API，我们可以：

从用户摄像头录制视频
从用户麦克风录制音频
将录制的音视频保存为 Blob 或其他格式的数据
在网页中播放录制的音视频
将录制的音视频上传到服务器或存储在本地

在本文中，我们将使用 JavaScript MediaRecorder API 创建一个简单的音频和视频记录器，并将其保存为 Blob 格式的数据。

如何使用 MediaRecorder API

创建实例

要创建 MediaRecorder 实例，我们只需要调用 MediaRecorder 构造函数并传入我们要录制的媒体流对象。在本例中，我们将使用 navigator.getUserMedia 方法获取麦克风和摄像头的媒体流。获取媒体流后，我们就可以创建 MediaRecorder 对象。

const mediaStream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
});

const mediaRecorder = new MediaRecorder(mediaStream);

开始和停止录制

创建 MediaRecorder 实例后，我们可以通过调用 start 和 stop 方法来开始和停止录制音视频。录制结束后，我们可以从 MediaRecorder 对象中获取录制的音视频数据。

// 开始录制
mediaRecorder.start();

// 停止录制
mediaRecorder.stop();

获取录制的数据

在停止录制后，我们可以从 MediaRecorder 对象中获取录制的音视频数据。音视频数据的格式为 Blob 格式。我们可以将 Blob 数据存储在本地或上传到服务器。

mediaRecorder.addEventListener("dataavailable", (event) => {
  // 获取录制的数据
  const blob = event.data;
  
  // 将 Blob 数据存储在本地或上传到服务器等操作
});

使用 MediaRecorder API 创建音视频记录器

在接下来的示例中，我们将使用 MediaRecorder API 创建一个简单的音视频记录器，并将其保存为 Blob 格式的数据。在此示例中，我们将使用 HTML5 的 video 和 audio 标签来播放录制的音视频。

示例代码

以下是一个基于 JavaScript MediaRecorder API 的音视频记录器示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript MediaRecorder API 示例</title>
  </head>
  <body>
    <div>
      <button id="start-button">开始录制</button>
      <button id="stop-button">停止录制</button>
      <button id="play-audio-button">播放音频</button>
      <button id="play-video-button">播放视频</button>
    </div>
    <div>
      <audio id="audio-player" controls></audio>
      <video id="video-player" controls></video>
    </div>

    <script>
      // 获取音频和视频节点
      const audioPlayer = document.querySelector("#audio-player");
      const videoPlayer = document.querySelector("#video-player");

      // 获取按钮节点
      const startButton = document.querySelector("#start-button");
      const stopButton = document.querySelector("#stop-button");
      const playAudioButton = document.querySelector("#play-audio-button");
      const playVideoButton = document.querySelector("#play-video-button");

      // 媒体流对象
      let mediaStream;

      // MediaRecorder 对象
      let mediaRecorder;

      // Blob 数据
      let mediaBlob;

      // 开始录制
      startButton.addEventListener("click", async () => {
        try {
          // 获取媒体流
          mediaStream = await navigator.mediaDevices.getUserMedia({
            audio: true,
            video: true
          });

          // 创建 MediaRecorder 实例
          mediaRecorder = new MediaRecorder(mediaStream);

          // 监听数据可用事件
          mediaRecorder.addEventListener("dataavailable", (event) => {
            // 获取 Blob 数据
            mediaBlob = event.data;
          });

          // 开始录制
          mediaRecorder.start();
        } catch (error) {
          console.error("获取媒体流失败", error);
        }
      });

      // 停止录制
      stopButton.addEventListener("click", () => {
        // 停止录制
        mediaRecorder.stop();
      });

      // 播放音频
      playAudioButton.addEventListener("click", () => {
        if (mediaBlob.type.includes("audio")) {
          // 创建 Blob URL，用于播放音频
          const blobUrl = URL.createObjectURL(mediaBlob);

          // 设置音频播放器的 src
          audioPlayer.src = blobUrl;
        } else {
          console.warn("没有录制音频");
        }
      });

      // 播放视频
      playVideoButton.addEventListener("click", () => {
        if (mediaBlob.type.includes("video")) {
          // 创建 Blob URL，用于播放视频
          const blobUrl = URL.createObjectURL(mediaBlob);

          // 设置视频播放器的 src
          videoPlayer.src = blobUrl;
        } else {
          console.warn("没有录制视频");
        }
      });
    </script>
  </body>
</html>

示例说明

在按钮节点的点击事件中，我们使用 navigator.mediaDevices.getUserMedia 方法获取麦克风和摄像头的媒体流。
我们在开始录制时创建 MediaRecorder 对象，并使用 mediaRecorder.addEventListener("dataavailable", callback) 方法监听数据可用事件，以获取录制的 Blob 数据。
在停止录制时，我们停止 MediaRecorder 对象并使用获取到的 Blob 数据执行一些操作。在示例中，我们使用 Blob URL 播放录制的音视频。

总结

在这个示例中，我们使用 MediaRecorder API 创建了一个简单的音视频记录器，并将其保存为 Blob 格式的数据。虽然示例中录制的音视频数据仅仅是保存在内存中的 Blob 格式的数据，但实际场景中我们可以将数据上传到服务器或存储在本地，实现更多有趣的功能。

MediaRecorder API 提供了一种简单的方式来录制音频和视频，尤其适合于浏览器应用程序。如果您正在构建一个需要使用音频或视频功能的网页应用程序，请考虑使用 MediaRecorder API。