javascript、Webカメラの映像を録画・保存する方法【初心者向けガイド】

このデモでは、Webブラウザを利用してカメラから映像を取得し、それを録画する機能を実装しています。具体的には、以下の要素と機能を含んでいます。

カメラからの映像取得
ブラウザのカメラ機能を使用してリアルタイムで映像を取得します。この映像は画面に表示され、録画が可能です。
映像の録画機能
映像と音声を録画し、ブラウザ上で再生できるように保存します。録画中の操作は直感的に行えるよう、ボタン操作で制御可能です。
録画ファイルの再生機能
録画終了後、取得した映像をブラウザ上で再生し、録画内容を確認できます。
録画データの保存
録画した映像をローカルに保存する機能を実装しています。保存形式はWeb標準のwebm形式で、簡単にダウンロードが可能です。
使いやすいインターフェース
ボタン操作を中心としたシンプルなインターフェースで、録画の開始・停止・保存を手軽に行えます。

全体のコード
まとめ

全体のコード

このデモでは、Webブラウザのメディア機能を活用して、映像の取得から保存までの流れを簡単に体験できます。映像を取得して録画し、録画データを再生・保存する機能を実装することで、プログラムの理解を深めると同時に、実際に動作させる楽しさを味わえる工夫がされています。

コードを書くことは学習の基本ですが、いつもそれだけではマンネリ化してしまうこともあります。そんなとき、このように自分で体験しながら学べるコードを試すのは非常に面白い方法です。ただし、実行するにはパソコンだけでなく、カメラも必要になります。このコードを使えば、映像の取得、画面への出力、そして録画までを一通り体験できるため、より実践的な学びの場を提供します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>録画機能デモ</title>
  <link rel="icon" href="data:,">
</head>
<body>
<!-- html要素の部分 -->
  <video id="recordVideo" autoplay muted width="800px" height="800px"></video>
  <video id="replayVideo" autoplay controls width="800" height="600" style="display:none;"></video>
  <button id="start">録画開始</button>
  <button id="stop" disabled>録画停止</button>
  <button id="save" disabled>動画保存</button>
  <script>
//変数定義と初期化
    const recordVideo = document.getElementById('recordVideo');
    const replayVideo = document.getElementById('replayVideo');
    const startButton = document.getElementById('start');
    const stopButton = document.getElementById('stop');
    const saveButton = document.getElementById('save');
    let mediaRecorder;
    const recordedBlobs = [];
//録画を開始する関数
    async function startRecording() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      recordVideo.srcObject = stream;
      const options = { mimeType: 'video/webm;codecs=vp9,opus' };
      mediaRecorder = new MediaRecorder(stream, options);
      mediaRecorder.ondataavailable = (event) => {
        event.data && event.data.size > 0 && recordedBlobs.push(event.data);
      };
      mediaRecorder.start();
      console.log('録画開始');
      startButton.disabled = true;
      stopButton.disabled = false;
    }
//録画を停止して再生する関数
    function stopRecording() {
      mediaRecorder.stop();
      console.log('録画停止');
      mediaRecorder.onstop = () => {
        const blob = new Blob(recordedBlobs, { type: 'video/webm' });
        replayVideo.src = URL.createObjectURL(blob);
        replayVideo.style.display = 'block';
        replayVideo.controls = true;
        recordVideo.style.display = 'none';
        saveButton.disabled = false;
      };
    }
//録画したビデオを保存する関数
    function saveRecording() {
      const blob = new Blob(recordedBlobs, { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = '録画ファイル.webm';
      document.body.appendChild(a);
      a.click();
      setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      }, 100);
    }
//イベントリスナーの設定
    startButton.addEventListener('click', () => {
      startRecording();
      startButton.disabled = true;
      stopButton.disabled = false;
    });

    stopButton.addEventListener('click', stopRecording);
    saveButton.addEventListener('click', saveRecording);
  </script>
</body>
</html>

HTML

html要素の部分

HTML要素の部分では、映像の録画や再生、操作を直感的に行えるようなインターフェースを提供しています。録画中の映像を表示する画面は、テレビのようにリアルタイムで映像を確認できる機能が備わっています。また、録画後には映像のリプレイが可能で、ボタンを使って簡単に録画の開始、停止、保存を操作できます。

  <!-- 録画中の映像を表示する要素 -->
  <video id="recordVideo" autoplay muted width="800px" height="800px"></video>
  <!-- リプレイを表示する要素 -->
  <video id="replayVideo" autoplay controls width="800" height="600" style="display:none;"></video>
  <!-- 録画を動作するボタン -->
  <button id="start">録画開始</button>
  <button id="stop" disabled>録画停止</button>
  <button id="save" disabled>動画保存</button>

HTML

変数定義と初期化

以下のように構成し直し、分かりやすくしました：

recordVideo と replayVideo
HTML内の <video> 要素を取得しています。

recordVideo は録画中の映像をリアルタイムで表示する要素です。
replayVideo は録画後の映像を再生するための要素です。

startButton, stopButton, saveButton
HTML内のボタン要素をそれぞれ取得しています。
- startButton は録画を開始するボタンです。
- stopButton は録画を停止するボタンです。
- saveButton は録画した映像を保存するボタンです。
mediaRecorder
録画用の MediaRecorder オブジェクトを格納する変数です。このオブジェクトを使って、録画の開始・停止を制御します。
recordedBlobs
録画されたデータを格納するための配列です。録画中に生成された Blob オブジェクトを一時的に保持します。このデータを使って、録画した映像を再生したり保存したりします。

const recordVideo = document.getElementById('recordVideo');
const replayVideo = document.getElementById('replayVideo');
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const saveButton = document.getElementById('save');
let mediaRecorder;
const recordedBlobs = [];

JavaScript

録画を開始する関数

startRecording 関数は、録画を開始する非同期関数です。getUserMedia() を使用してカメラとマイクのストリームを取得し、それを recordVideo の srcObject に設定してリアルタイム映像を表示します。

指定した録画形式で MediaRecorder を作成し、ondataavailable イベントで生成されたデータ（Blob）を recordedBlobs 配列に追加します。最後に、mediaRecorder.start() で録画を開始し、操作ボタンを切り替えます。

async function startRecording() {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  recordVideo.srcObject = stream;
  
  const options = { mimeType: 'video/webm;codecs=vp9,opus' };
  mediaRecorder = new MediaRecorder(stream, options);
  
  mediaRecorder.ondataavailable = (event) => {
    if (event.data && event.data.size > 0) {
      recordedBlobs.push(event.data);
    }
  };
  
  mediaRecorder.start();
  console.log('録画開始');
  startButton.disabled = true;
  stopButton.disabled = false;
}

JavaScript

録画を停止して再生する関数

stopRecording関数は、mediaRecorder.stop()を呼び出して録画を停止します。
mediaRecorderのonstopイベントハンドラーで、録画が停止した際に再生用ビデオであるreplayVideoに録画したビデオを表示します。
recordVideoは非表示にし、saveButtonを有効化してビデオの保存が可能になります。

function stopRecording() {
  mediaRecorder.stop();
  console.log('録画停止');
  
  mediaRecorder.onstop = () => {
    const blob = new Blob(recordedBlobs, { type: 'video/webm' });
    replayVideo.src = URL.createObjectURL(blob);
    replayVideo.style.display = 'block';
    replayVideo.controls = true;
    recordVideo.style.display = 'none';
    saveButton.disabled = false;
  };
}

JavaScript

録画したビデオを保存する関数

saveRecording関数は、Blobオブジェクトを作成して録画したデータを格納し、それをダウンロード可能なURLに変換します。
a要素を作成して、ダウンロード用のリンクを設定し、一時的にドキュメントに追加してからクリックします。
ダウンロードが完了したら、一時的に作成した要素を削除し、使用したURLを無効化します。

function saveRecording() {
  const blob = new Blob(recordedBlobs, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = '録画ファイル.webm';
  document.body.appendChild(a);
  a.click();
  
  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 100);
}

JavaScript

イベントリスナーの設定

startButtonにはclickイベントリスナーが設定されており、クリックされた際にstartRecording関数（録画を開始する関数）を呼び出し、startButtonを無効化し、stopButtonを有効化します。
stopButtonにはclickイベントリスナーが設定されており、クリックされた際にstopRecording関数（録画を停止して再生する関数）を呼び出します。
saveButtonにはclickイベントリスナーが設定されており、クリックされた際にsaveRecording関（録画したビデオを保存する関数）数を呼び出します。
これらの関数とイベントリスナーにより、カメラ映像の録画、再生、保存を実現するシンプルなWebアプリケーションが完成します。

startButton.addEventListener('click', () => {
  startRecording();
  startButton.disabled = true;
  stopButton.disabled = false;
});

stopButton.addEventListener('click', stopRecording);
saveButton.addEventListener('click', saveRecording);