JavaScript とブラウザ API を使用したビデオの録画-jsチュートリアル-php.cn

JavaScript とブラウザ API を使用したビデオの録画

DDD

リリース： 2024-10-18 22:43:30

オリジナル

602 人が閲覧しました

Recording Videos Using JavaScript and Browser APIs

現代の Web 開発環境では、さまざまなブラウザ API の出現により、ユーザーハードウェア (カメラやマイクなど) との対話がはるかに簡単になりました。このような便利な API の 1 つが MediaRecorder API です。これを使用すると、開発者はブラウザからオーディオやビデオを直接録音できます。

この投稿では、JavaScript を使用してユーザーの Web カメラにアクセスし、ビデオストリームを録画し、録画したビデオをダウンロード用に提供する方法をすべてブラウザ API を通じて説明します。 MediaRecorder API を使用する理由

従来、ユーザーからのメディアコンテンツを記録するには、外部ツールまたはプラグイン (Flash など) が必要でした。ただし、

WebRTC

スタックを使用すると、サードパーティツールを必要とせずに、簡単にビデオを録画したり、ピアツーピア接続を作成したり、カメラ、マイク、画面などのメディアデバイスを操作したりできます。 MediaRecorder API はこのスタックの一部であり、ブラウザでのビデオ録画をシームレスなプロセスにします。

ブラウザでビデオを録画する手順

ビデオを録画するには、次のことを行います:

。 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>

ログイン後にコピー

ユーザーのウェブカメラへのアクセス

navigator.mediaDevices.getUserMedia() メソッドを使用して、ユーザーのカメラとマイクへのアクセスをリクエストします。

このメソッドは、ユーザーのカメラからのライブビデオとオーディオを含む MediaStream オブジェクトに解決される Promise を返します。ビデオは

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

ログイン後にコピー

ビデオストリームの録画

ライブストリームを取得したら、ビデオを記録するための MediaRecorder のインスタンスを作成できます。

MediaRecorder はストリームをチャンクでキャプチャし、データが利用可能になるたびに、ondataavailable イベントが発生します。これらのチャンクは、recordedChunks という配列に保存します。

mediaRecorder = new MediaRecorder(stream);

ログイン後にコピー

録画の停止とビデオの保存

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

ログイン後にコピー

録画が停止されると、チャンクが BLOB に結合され、ビデオをダウンロードするための URL が作成されます。

ビデオは <ビデオ> で再生できるようになりました。要素を使用するか、を使用してダウンロードします。要素。

ボタンとユーザーの操作

録音を制御するために 2 つのボタンを追加しました:

開始ボタン: mediaRecorder.start() を呼び出して録音を開始します。
停止ボタン: mediaRecorder.stop() を呼び出して録音を停止します。

プロセス中の不要な対話を防ぐために、ボタンもそれに応じて無効または有効になります。

追加できる追加機能

録画の一時停止/再開: mediaRecorder.pause() メソッドと mediaRecorder.resume() メソッドを使用して、一時停止ボタンと再開ボタンを追加できます。
ビデオ形式: デフォルトでは、録画は .webm ファイルとして保存されますが、ブラウザのサポートに応じて MIME タイプを変更できます (video/mp4 など)。
ビデオのアップロード: 機能を拡張して、録画したビデオをサーバーにアップロードして、さらなる処理や分析を行うことができます。

結論

JavaScript を使用してブラウザでビデオを直接録画することは、MediaRecorder API と getUserMedia() メソッドを使用することで非常に簡単になりました。これらのツールを使用すると、外部ソフトウェアを必要とせずに、ブラウザ内で強力なメディアリッチなアプリケーションを構築できます。

上記の例に従うことで、Web アプリケーションにビデオ録画機能を簡単に実装でき、ユーザーはブラウザからビデオを直接録画、プレビュー、ダウンロードできるようになります。