Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

javascript – getUserMedia whereas in AR freezes browser

[ad_1]

In XRViewer on iOS, I am making an attempt 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 begin 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 all the pieces 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/aframe@54022b80c60b12dc755f4f4a71a779b410dd23d0/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("peak", 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