How and why does frame rate change the aspect ratio of a HTML5 video or canvas?
When I change the frameRate in the code examples below, the aspect ratio of my webcam changes (see code below and attached images) on the Video element. It can change from 800x600 to 1280x720, for example. I've also tried drawing the image onto a Canvas element and same result(s).
const constraints = {
audio: true, video: {frameRate:{max:1}}
};
...versus this one...
const constraints = {
audio: true, video: {frameRate:{max:15}}
};
Why would this happen merely by changing the frame rate? I thought that frame rate has nothing to do with dimensions. Is there a way to anticipate/calculate what the change in aspect ratio will be?
This is dependent on the resolutions and frame rates supported by your camera.
When setting constraints for video capture, you can't really guarantee you're going to get what you ask for. They're essentially suggestions as to what you want. The browser will try to capture at the frame rate and resolution that you asked for. If it can't match it exactly (and if you haven't specified exact), it will do the best it can. In your case, the closest frame rate to what you asked for on your camera must be at a different resolution.
What you need to do is use .videoHeight and .videoWidth properties of the video element you're displaying the video in.
The best way to handle this is listen for the resize event. This is important, as the width/height can actually change at any time! Sometimes, the video may get smaller mid-stream if the system can't keep up with the large video. A more practical example is when you rotate your phone, and the video rotates with it. the resize event will fire.