使用 JavaScript 和浏览器 API 录制视频-js教程-PHP中文网

使用 JavaScript 和浏览器 API 录制视频

DDD

发布： 2024-10-18 22:43:30

原创

633 人浏览过

Recording Videos Using JavaScript and Browser APIs

在现代 Web 开发环境中，随着各种浏览器 API 的出现，与用户硬件（如摄像头和麦克风）的交互变得更加容易。 MediaRecorder API 就是这样一个有用的 API，它允许开发人员直接从浏览器录制音频和视频。

在这篇文章中，我们将介绍如何使用 JavaScript 录制视频，方法是访问用户的网络摄像头、录制视频流并提供录制的视频供下载 - 所有这些都通过浏览器 API 进行！

为什么使用 MediaRecorder API？

传统上，记录用户的媒体内容需要外部工具或插件（例如 Flash）。但是，借助 WebRTC 堆栈，您可以轻松录制视频、创建点对点连接以及与相机、麦克风和屏幕等媒体设备交互，而无需任何第三方工具。

MediaRecorder API 是该堆栈的一部分，使浏览器中的视频录制成为一个无缝过程。

在浏览器中录制视频的步骤

要录制视频，我们将：

使用 navigator.mediaDevices 接口中的 getUserMedia() 方法访问网络摄像头。
使用 MediaRecorder API 录制流。
提供下载链接以便用户可以保存录制的视频。

我们看一下代码实现。

示例：在浏览器中录制视频

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Recorder</title>
</head>
<body>
  <h1>Video Recorder using JavaScript</h1>

  <video id="video" autoplay></video>
  <button id="start-btn">Start Recording</button>
  <button id="stop-btn" disabled>Stop Recording</button>
  <video id="recorded-video" controls></video>
  <a id="download-link" download="recorded-video.webm">Download Recorded Video</a>

  <script>
    const videoElement = document.getElementById('video');
    const startButton = document.getElementById('start-btn');
    const stopButton = document.getElementById('stop-btn');
    const recordedVideoElement = document.getElementById('recorded-video');
    const downloadLink = document.getElementById('download-link');

    let mediaRecorder;
    let recordedChunks = [];

    // Access webcam
    async function startVideoStream() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      videoElement.srcObject = stream;

      // Set up MediaRecorder to record the stream
      mediaRecorder = new MediaRecorder(stream);

      // When data becomes available, store it
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          recordedChunks.push(event.data);
        }
      };

      // When recording stops, create a video blob and show it
      mediaRecorder.onstop = () => {
        const blob = new Blob(recordedChunks, { type: 'video/webm' });
        const videoURL = URL.createObjectURL(blob);
        recordedVideoElement.src = videoURL;
        downloadLink.href = videoURL;
      };
    }

    // Start recording
    startButton.addEventListener('click', () => {
      recordedChunks = [];
      mediaRecorder.start();
      startButton.disabled = true;
      stopButton.disabled = false;
    });

    // Stop recording
    stopButton.addEventListener('click', () => {
      mediaRecorder.stop();
      startButton.disabled = false;
      stopButton.disabled = true;
    });

    // Initialize the video stream
    startVideoStream();
  </script>
</body>
</html>

登录后复制

分解代码：

1. 访问用户的网络摄像头

我们使用 navigator.mediaDevices.getUserMedia() 方法来请求访问用户的摄像头和麦克风。

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

登录后复制

此方法返回一个解析为 MediaStream 对象的 Promise，其中包含来自用户摄像头的实时视频和音频。然后使用

2. 录制视频流

一旦我们有了直播，我们就可以创建一个 MediaRecorder 实例来录制视频。

mediaRecorder = new MediaRecorder(stream);

登录后复制

MediaRecorder 将以块的形式捕获流，每次数据可用时，都会触发 ondataavailable 事件。我们将这些块存储在名为 RecordChunks 的数组中。

mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

登录后复制

3. 停止录制并保存视频

当录制停止时，我们将这些块组合成一个 Blob，并创建一个用于下载视频的 URL。

mediaRecorder.onstop = () => {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const videoURL = URL.createObjectURL(blob);
  recordedVideoElement.src = videoURL;
  downloadLink.href = videoURL;
};

登录后复制

现在可以在中播放视频了元素或使用下载元素。