Javascript navigator.mediaDevices.getUserMedia get width and height at source

Question

I'm using this code , but when it gets the source the height and width are set by the constraints in the code block below, but I want to get the actual size of the video.

  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: desktop_id,
        minWidth: 990,
        maxWidth: 990,
        minHeight: 770,
        maxHeight: 770
      }
    }
  }).then(gotStream).catch(getUserMediaError);

The resulting captured image is 990x770 of course but this results in an image with a black border around it. The real video sourced is 995x744 but it gets this new size with black borders as a result of the given constraints. If I don't set any constraints then an error is thrown saying the width is 0 so some kind of width needs to be set.

Even manually inputting the video source size of 995x744 into the constraints does not work since it seems to need an area bigger than the source to capture it. Not sure why it can't be captured exactly as it is? Maybe there's something else I'm doing wrong that could remedy this?

How can I get the size of the video as I capture it so the constraints can be set to the actual size of the video? So the captured image is exactly the same size as the source video with no black borders etc.

Answer 1

The answer is quite simple.

In a simple math operation you can see that:

990 / 770 = 1.28
995 / 744 = 1.33

So - When you require a mandatory ratio of 1.28 - of course you will get black borders. You are violating the true aspect ratio of 1.33 which is supported by the camera.

The only way to avoid black border is to require width and height that devide to aspect ratio of 1.33 .

Hope this helps.