javascript – getUserMedia whereas in AR freezes browser

[ad_1]

In XRViewer on iOS, I am attempting to arrange a fundamental A-Body scene in AR and a stream from getUserMedia.

I solely have a video factor and an a-scene. On enter-vr, I try to start out a stream from getUserMedia.

On urgent the “AR” button, as anticipated, it prompts me to permit digital camera entry. However after I enable it, I get a pop-up that an “AR Interuption Occured” and every part freezes.

Is getUserMedia anticipated to work whereas in AR? Is there one other solution to entry the passthrough stream? getUserMedia does work as anticipated if I do not enter AR.

Right here is my code:

<!DOCTYPE html>
<html>
  <head>
    <meta title="viewport" content material="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.internet/gh/aframevr/[email protected]/dist/aframe-master.min.js"></script>
    <script>
      perform begin() {
        const videoElement = doc.querySelector("#video");
        videoElement.setAttribute("autoplay", "");
        videoElement.setAttribute("muted", "");
        videoElement.setAttribute("playsinline", "");
        videoElement.model.place = "absolute";
        videoElement.model.prime = "0px";
        videoElement.model.left = "0px";
        videoElement.model.zIndex = "-2";
        videoElement.model.show = "none";

        navigator.mediaDevices
          .getUserMedia({
            audio: false,
            video: {
              facingMode: { precise: "person" },
            },
          })
          .then((stream) => {
            videoElement.addEventListener("loadedmetadata", () => {
              videoElement.setAttribute("width", videoElement.videoWidth);
              videoElement.setAttribute("top", videoElement.videoHeight);
            });
            videoElement.srcObject = stream;
          })
          .catch((err) => {
            console.error("no video" + err);
          });
      }

      doc.addEventListener("DOMContentLoaded", perform () {
        doc
          .querySelector("#scene")
          .addEventListener("enter-vr", perform () {
            begin();
          });
      });
    </script>
  </head>
  <physique>
    <a-scene
      id="scene"
      device-orientation-permission-ui="enabled: false"
      stats
    ></a-scene>
    <video id="video"></video>
  </physique>
</html>

[ad_2]

Leave a Reply