【HTML】背面カメラの映像をストリーミングする - 日々是好日～every day is a good day～

今回も『WebARでシューティングゲーム』で使っているやり方ですが　自分用覚書きです
ARに必要不可欠　背面カメラの映像を取得する方法です

<html>
  <head>
    <style>
      .v-case {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0 auto;
        width: 100%;
      }
      .v-cover {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100vh;
        background: url(img/video.jpg) no-repeat center center/cover;
      }
      video {
        position: absolute;
        min-width: 100%;
        min-height: 100vh;
      }
    </style>
  </head>
  <body>
    <div class="v-case">
      <div class="v-cover">
        <video id="video" autoplay></video>
      </div>
    </div>
    <script>
      //videoの設定
      var video = document.getElementById("video");
      var media = navigator.mediaDevices.getUserMedia({
        video: true, 
        video: { facingMode: "environment" }, 
        audio: false, 
      });
      //ストリーミング
      media.then((stream) => {
        video.srcObject = stream;
      });
    </script>
  </body>
</html>

ちなみにインカメの映像を映す場合はvideoの設定を

video: { facingMode: "user" },

音声が必要な場合は

audio: false,

自分用なので説明はつけませんが　必要ならばコピペしてお使いください