videoConstraints is not working in firefox.

[lokeshsinghal]

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:

videoConstraints is not working in firefox. I am trying to pass videoConstraint dynamically and works fine in chrome but not in the firefox. I know this issue has been already raised but I tried that solution to pass objectfit cover in style but the result is not expected. I am passing this videoConstraints = { width: 480, height: 720 } but getting the snapshot result of 640 480 instead of 480 720 in firefox.

[mozmorris]

@lokeshsinghal could you create a demo on CodePen - it will make it easier to help you.

[johnboiles]

Seeing something similar in iOS 15 Safari. For this code:

    const track = this.webcamRef.current.stream.getVideoTracks()[0];
    const width = track.getSettings().width; // 1080
    const height = track.getSettings().height; // 1920
    const camCanvas = this.webcamRef.current.getCanvas({width: width, height: height});
    console.log(width, height, camCanvas)

I'm getting this log (note the canvas width="1920")

1080 – 1920
<canvas width="1920" height="1080">

Same issue on v6.0.0 and v5.2.4 FWIW

[johnboiles]

Ok for my issue, it turns out that the first time I called getCanvas the video wasn't ready yet. So I added a check above my call to getCanvas and it solved my issue. I wonder if @lokeshsinghal's issue is similar.

if (this.webcamRef.current.video.readyState == 0) {
  return null;
}

Perhaps we should add a similar check here. @mozmorris want me to submit a PR?