カメラの映像をブラウザに表示する方法【JavaScript・HTML】

この記事では、JavaScriptとHTMLを使って、パソコンやスマホのカメラ映像をWebブラウザに表示する方法を解説します。

以下の内容を図やサンプルコードを用いて解説します。ご参考になれば幸いです。

  • カメラの映像をブラウザに表示する方法
  • navigator.mediaDevices.getUserMedia()の動作とブラウザの挙動
  • navigator.mediaDevices.getUserMedia()のエラー
  • navigator.mediaDevices.getUserMedia()はHTTPSでないと動作しないので注意

カメラの映像をブラウザに表示する方法

Webページ上でユーザーのカメラ（Webカメラやスマホのカメラ）の映像を表示するには、navigator.mediaDevices.getUserMedia()メソッドを使用します。

このメソッドを使うと、ブラウザからカメラにアクセスして、カメラ映像を取得することができます。取得したカメラ映像を<video>要素に渡すことで、カメラの映像を表示することができます。

以下にサンプルコードを以下に示します。このコードをindex.htmlとして作成し、ブラウザで開くだけでカメラの映像を確認できます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>カメラ映像を表示</title>
  </head>
  <body>
    <h2>カメラ映像</h2>
    <video id="camera" autoplay></video>
    <script>
      const camera = document.getElementById('camera');
      navigator.mediaDevices
        .getUserMedia({
          video: true,
          audio: false,
        })
        .then((stream) => {
          camera.srcObject = stream;
        })
        .catch((error) => {
          console.error('カメラにアクセスできません:', error);
        });
    </script>
  </body>
</html>

navigator.mediaDevices.getUserMedia({ video: true })でカメラの許可ポップアップが表示されます。

カメラの映像をブラウザに表示する方法

許可ポップアップにて、許可した場合、ユーザーのカメラ（Webカメラやスマホのカメラ）にアクセスし、カメラ映像を取得することができます。許可しなかった場合、navigator.mediaDevices.getUserMedia()メソッドがエラーを返すためcatchのエラー処理が実行されます。上記のサンプルコードでは、console.errorでエラー出力しています。

また、video要素のsrcObjectにストリームを設定することで、映像をブラウザに表示しています。

補足

<video id="camera" autoplay>でautoplayが設定されていると、ストリームをvideo要素のsrcObjectにストリームを設定した時点で自動的に再生が開始されます。そのため、camera.play()を明示的に呼び出さなくてもカメラ映像が表示されます。autoplayがない場合は、camera.play()を明示的に呼び出す必要があります。

camera.srcObject = stream;
camera.play(); // 明示的に再生開始

navigator.mediaDevices.getUserMedia()の動作とブラウザの挙動

navigator.mediaDevices.getUserMedia()メソッドは、カメラやマイクにアクセスするためのWeb APIです。このメソッドの引数には、オーディオ（audio）とビデオ（video）の設定を含むオブジェクトを渡すことができます。

navigator.mediaDevices.getUserMedia({
    video: true,  // カメラ映像を取得
    audio: false  // マイクは使用しない
});

設定内容によって、ブラウザの挙動が変わります。

video: true の場合（音声なしのカメラ映像のみ）

カメラのアクセスを要求すると、「カメラを使用する」という許可ポップアップが表示されます。

「許可する」をクリックすると、カメラの映像を取得することができます。「ブロック」をクリックすると、カメラへのアクセスが拒否されます。

video: true, audio: true の場合（カメラ＋マイク）

カメラとマイクの両方を要求すると、「カメラを使用する」「マイクを使用する」という許可ポップアップが表示されます。

「許可する」をクリックすると、カメラの映像とマイク音声を取得することができます。「ブロック」をクリックすると、どちらか一方、または両方へのアクセスが拒否されます。

navigator.mediaDevices.getUserMedia()のエラー

許可ポップアップにて、カメラの使用をブロックすると、以下のエラーが発生します。

NotAllowedError: Permission denied

カメラが物理的に接続されていない、またはPCにカメラが搭載されていない場合、以下のエラーが発生します。

NotFoundError: Requested device not found

navigator.mediaDevices.getUserMedia()はHTTPSでないと動作しないので注意

navigator.mediaDevices.getUserMedia()を利用するにはHTTPS環境での実行が必須です。これは、ユーザーのプライバシー保護とセキュリティ強化のために、ブラウザ側でHTTP環境では動作しないよう制限されているからです。そのため、本番環境でgetUserMedia()を利用するには、必ずHTTPSでサイトを公開する必要があります。

ただし、開発中のローカル環境では、http://localhost に限り例外的に動作が許可されています。そのため、開発時には http://localhost:3000 などで動作確認を行うことができます。