Webcam Access in React Shopify App

[philipbecker]

Hello,

I am developing a Shopify app that requires webcam access. I tried using a React package for the purpose, but the viewfinder never seems to appear. As an alternative, I also attempted to add a video tag to the webapp and set its source like so:

let myRef = React.createRef()

  useEffect(() => {
    var video = myRef.current

    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        })
        .catch(function (err) {
          console.log(err);
        });
    }
  });

Unfortunately, it looks like my access to the DOM was completed blocked, as the catch block keeps getting triggered with an error of that nature.

Would anyone be able to guide me in the right direction? I believe it should be possible, because Shopify has a barcode scanner component that must access the device's camera...

Thanks,

Phil