使用 JavaScript 和瀏覽器 API 錄製影片-js教程-PHP中文網

使用 JavaScript 和瀏覽器 API 錄製影片

DDD

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

原創

506 人瀏覽過

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;
};

登入後複製

現在可以在中播放影片了元素或使用下載元素。