Video Constraints not working in firefox

[codercoder12]

Please follow the general troubleshooting steps first:

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

Bug reports:

Video Constraints are not working in firefox, when I am recording the video. I have applied below constraints but firefox does not seems to be applying them

const videoConstraints = {
  width: 480,
  height: 320
};

I then used

const videoConstraints = {
  width: { min: 640, ideal: 640, max: 640},
  height: { min: 480, ideal: 480, max: 480}
};

but then no promt was shown to ask for video and audio permissions on firefox browser.

How can I reduce the recorded video size/quality as 2 minutes of recorded video on firefox takes 70MB and 2 minutes recorded video on chrome takes 9-10 MB ?

[mozmorris]

@codercoder12 the video constraints are dependent on device and browser. Not all sizes will work - did you manage to make any more progress with it?

Re: video size - that will depend on the video codec used which is outside of the scope of react-webcam.

[mcormier]

@codercoder12 I am working on a project where we also noticed this issue. The following stack overflow post might be helpful:

https://stackoverflow.com/a/36962250/14550884

Also, please be aware of browser differences here, some browsers (Chrome) will mutate (crop) the camera capture for you, while others (Firefox) will always give you native modes.

It would be nice if cropping and mutating the webcam was handled inside the react-webcam component.

[mcormier]

@mozmorris My goal was to create a square webcam box. After some investigation I found that declaring the height and width attributes explicitly in conjunction with the objectFit=cover style resolved my issue. Chrome did not need this but Firefox did.

<Webcam audio={false} ref={webcamRef} videoConstraints={videoConstraints} mirrored={true} onUserMedia={onUserMedia} onUserMediaError={onUserMediaError} style={{ objectFit: "cover"}}
width={videoConstraints.width} height={videoConstraints.height} />`

[mozmorris]

Thanks for the comment @mcormier. Same/similar technique in #275