1445982 - Wrong aspect ratio for webcam 360p.

Status: RESOLVED DUPLICATE of bug 1286945

(Core :: WebRTC: Audio/Video, defect)

Description

[Stephen]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180314222911

Steps to reproduce:

I'm testing on firefox nightly 61.

If I request 480x360 webcam video with getUserMedia I am given a widescreen 16:9 video instead of a 4:3 video.


Actual results:

If I request 320x240, I get 4:3
If I request 640x480, I get 4:3

But when I request 480x360, I get 16:9, presumably 640x360. I am using a logitech c920 webcam.


Expected results:

Firefox should realise that it can access a 640x360 stream from the webcam, and then cut off the sides to make it 480x360. Chrome does not have this issue.

This has potential issues for webrtc, with unwanted black borders on firefox but not on other browsers. It may also affect some webapps that are not expecting to receive an incorrect aspect ratio.

Comment 1

[Jan-Ivar Bruaroey [:jib] (needinfo? me)]

People have cameras with differing abilities. Firefox implements getUserMedia to spec, which expects apps to deal with not always getting exactly what they want (the reason for the complicated constraints language).

Specifically, the Logitech c920 webcam does not have a 480x360 mode, so the constraints algorithm picks what's closest, because you didn't use {exact} constraints (which instead would have made the call fail, letting you know the user's camera didn't have the requested mode).

Firefox does not yet support the resizeMode constraint (bug 1433480), or do automatic downscaling (bug 1286945). The latter is something the spec allows, but does not mandate across browsers.

Unfortunately, we don't yet support the aspectRatio constraint (bug 1306034) which at least could have been used to prevent getting the wrong aspect here. As a workaround for that you may be able to use advanced constraints to ensure it falls back to known 4:3 modes first, using something like:

    navigator.mediaDevices.getUserMedia({
      video: {
        advanced: [
          {width: 480, height: 360},
          {width: 640, height: 480},
        ],
        width: 480, height: 360,
      }
    })

Lastly, black bars may often be better viewed as a display issue, and may often be dealt with using css. See https://stackoverflow.com/a/36962250/918910

That said, we are listening to users who seem to prefer the simpler yet limited behavior choices of Chrome rather than a more powerful yet complex API. Closing this as a dup of bug 1286945.