1

We currently have our webRTC video chat in beta, and we have noticed a strange issue with the aspect ratio of the video changing.

When we request video using the following.

navigator.mediaDevices.getUserMedia({video: { deviceId: { exact: deviceId }, height: 300, width: 400 }})

everything starts off fine, but we have received feedback that users are seeing video "stretching" for a few seconds before returning to normal. We have managed to replicate this locally by pausing the video feed, through inspecting the video it seems that the aspect ratio changes from 400x300 to 300x150 (which coincides with the intrinsic values here https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video).

Can anyone think why this would be happening?

Steve Frost
  • 11
  • 2

1 Answers1

2

Your application is expected to handle video of any aspect ratio and resolution.

For starters, the stream you get with getUserMedia may not be the size you request. 400x300 is not a normal resolution, and not all browsers are going to crop or scale what they get from the webcam to accommodate your application. Even if you did use something more common like 640x480, there is still a chance that the camera doesn't support it and will send video at a different resolution.

Next, particularly with mobile devices, rotation can occur so your video that was originally 4:3 aspect ratio could now be 3:4. These resolution changes happen mid-stream without any warning.

Finally, due to changing bandwidth or CPU conditions, the browsers can choose to scale the video at any time. Maybe one of the devices starts to overheat or has a low battery. This can cause sporadic video scaling. I've never seen it change aspect ratio when this occurs, but it sounds plausible, especially when using oddball video sizes.

Consider setting the following CSS on the video element for which you're playing video:

object-fit: cover;

If you need to actually get the height/width, use the videoHeight and videoWidth properties of the video element.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • Thanks for the reply Brad, I've just tried passing no dimensions with the constraints and it still happens. To replicate this, I am sending a pause request to the remote feed and then as soon I hover over the video element, it switches to 300 x 150, resuming the video reverts it back to the previous size. – Steve Frost May 14 '20 at 15:57
  • @SteveFrost Yes, as I mentioned the browser can change the resolution however it wants, mid-stream. – Brad May 14 '20 at 15:58