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

[HzdAngga]

Please follow the general troubleshooting steps first:

• Is your app running over HTTPS? (please provide the URL if possible)
• Have you tried running the demo (https://codepen.io/mozmorris/pen/JLZdoP) on your device?
• Checked the latest "Can I use" compatbility table? (https://caniuse.com/stream)

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]

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]

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

[Duskfen]

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

[rehkmansa]

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

[Duskfen]

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:

• https://w3c.github.io/mediacapture-main/#constrainable-interface
• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#examples

[mcking49]

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 },
  }}
/>