📹

getUserMedia でローカルの動画情報を取得する

1 min read

概要

ブラウザからメディアデバイスの情報を取得し、video 要素に配信する。

参考 URL

https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia

実装

ソースコード

./index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <video id="video" autoplay muted></video>
  </body>
  <script>
    const localVideo = document.getElementById('video');
    const requiredMedia = { video: true, audio: true };

    navigator.getUserMedia(
      requiredMedia,
      (stream) => {
        localVideo.srcObject = stream;
      },
      (error) => {
        console.error(error);
      }
    );
  </script>
</html>

動作

Step Image
アクセスすると、許可を要求される
許可: video要素にカメラ情報が配信される
ブロック: console にエラー情報表示

Discussion

ログインするとコメントできます