HTML の video 要素で Web カメラ（USB カメラ）の映像を表示する

2024-06-24

Web カメラの表示テスト

Web カメラ（USB カメラ）からの入力映像を Web ページ上で表示するテストです。

Web カメラからの入力映像を取得する

ブラウザ上の JavaScript で Web カメラ（USB カメラ）からの入力映像を取得するには、MediaDevices オブジェクトの getUserMedia() メソッドを使って、MediaStream を取得します。 navigator.mediaDevices で MediaDevices のシングルトンオブジェクトを参照できるので、通常はこれを使用します。取得した MediaStream を video 要素の srcObject プロパティにセットすることで、Web カメラの映像を video 要素に流し込むことができます。

HTML

<video id="webcam" playsinline></video>

JavaScript

const video = document.getElementById("webcam");

// Web カメラのストリームを取得して video 要素に紐付ける
navigator.mediaDevices.getUserMedia({ video: true })
  .then((mediaStream) => {
    video.srcObject = mediaStream;
    video.play();
  })
  .catch((err) => {
    console.error("Web カメラの取得に失敗しました:", err);
  });

ボタンで Web カメラを On/Off する

Web カメラからの MediaStream を取得しようとすると、Web ブラウザ上に「カメラの使用」を許可するかどうかの確認ダイアログが表示されます。 Web サイトを開いたときに急にこのダイアログが出てくるとびっくりしてしまうので、ユーザーが「開始」ボタンをなど押したときにキャプチャを開始するのがよいでしょう。

次の例では、Enable webcam というボタンを配置しています。ボタンを押すと、Disable webcam に変化します。

HTML

<button id="webcamButton">Enable webcam</button>
<video id="webcam" playsinline></video>

JavaScript

const video = document.getElementById("webcam");
const button = document.getElementById("webcamButton");
let isWebcamRunning = false;

// Webcam の開始／停止用ボタンを押したとき
button.addEventListener("click", () => {
  if (isWebcamRunning) {
    disableWebcam();
  } else {
    enableWebcam();
  }
  isWebcamRunning = !isWebcamRunning;
});

// Webcam を有効化
function enableWebcam() {
  button.disabled = true;  // ボタン連打防止
  navigator.mediaDevices.getUserMedia({ video: true })
    .then((mediaStream) => {
      video.srcObject = mediaStream;
      video.play();
      button.disabled = false;
      button.innerText = "Disable webcam";
    })
    .catch((err) => {
      console.error("Web カメラの取得に失敗しました:", err);
    });
}

// Webcam を無効化
function disableWebcam() {
  if (video.srcObject) {
      video.srcObject.getTracks().forEach(track => track.stop());
      button.innerText = "Enable webcam";
      video.srcObject = null;
  }
}

2024-06-24