mozmorris/react-webcam

Video Constraints Props Doesn't Work in Mobile Device but Works Fine in Web and Web Responsive Simulator

HzdAngga opened this issue · 6 comments

HzdAngga commented

Please follow the general troubleshooting steps first:

Bug reports:

I tried the videoConstraints with aspect-ratio 9 / 16 in web and responsive simulator in web and it works fine, but when open it in mobile device (android), the resolution of react-webcam video isnt 9 / 16 (back to default resolution of react-webcam). Any ideas how to make it works in mobile device?

Features:

Please note by far the quickest way to get a new feature is to file a Pull Request.

We will consider your request but it may be closed if it's something we're not actively planning to work on.

Duskfen commented

Same for me, but not only with aspect-ratio, but with specifying height and width.

Note that this works on mobile Firefox but not on mobile chrome

@mozmorris

rehkmansa commented

I'm having this same issue, how did you guys handle this

Duskfen commented

I haven't dealt with it so far, but next thing would be using a different camera library I guess 😞

rehkmansa commented

What library, I think its not a library thing, but something with the constraints

Duskfen commented

I now fiddled with custom options via the getUserMedia
(f.e. i just executed in the browser inspector

    navigator.mediaDevices
      .getUserMedia({
        audio: false,
        video: {
                aspectRatio: 16 / 9,
                height: { ideal: 1920 },
                frameRate: { ideal: 60 },
          facingMode: 'user',
        },
      })
      .then((mediaStream) => {
        const video = document.querySelector('video');
        video.srcObject = mediaStream;
        video.onloadedMetadata = () => {
          video.play();
        };
      })
      .catch((err) => {
        console.log(`my error: ${err.name}: `, err);
      });

)
And indeed it seems like no library issue but a constraints issue. (Maybe some browsers changed some inner mechanic which then lead to this issue)

In the past we had a full-screen camera dialog, which it seems isn't possible anymore..
the constraints which met our requirements are those stated in the example above.

To find constraints that fit to your usecase i recommend you reading through following links and playing around with the options:

mcking49 commented

I also had the same issue and then realised that it was because the default orientation for desktop was landscape, while mobile was portrait. So in the end I was able to make it work for both platforms by swapping the width and height constraints depending on device type.

For example:

<Webcam
  videoConstraints={{
    height: isMobile
      ? { ideal: 1080, max: 2160, min: 720 }
      : { ideal: 1920, max: 3840, min: 1280 },
    width: isMobile
      ? { ideal: 1920, max: 3840, min: 1280 }
      : { ideal: 1080, max: 2160, min: 720 },
  }}
/>
  • 👍2
  • ❤️6