Search code examples
javascriptreactjswebcamgetusermedia

navigator.mediaDevices.getUserMedia, the webcam is launched into full screen on iPhone

I am trying to use webcam for my app, it works fine on Android and windows, but on iPhone, the webcam is launched into a full separate screen, how can I fix this? thanks in advance

const getVideo = () => {
        navigator.mediaDevices
          .getUserMedia({ video: true, audio: false })
          .then((stream) => {
            const video = videoRef.current;
            video.srcObject = stream;
            video.onloadedmetadata = function (e) {
              video.play();
            };
            handleSetState({ currentStream: stream });
          })
          .catch((err) => {
            console.error(err);
          });
      };

.

 <video className={img && classes.inActive} ref={videoRef} autoPlay playsinline />
Solution

  • I ended up using react-webcam, which solved the issue

    https://www.npmjs.com/package/react-webcam