For my implementation, I would prefer to use a 4:3 aspect ratio. I can easily pass the proper aspect ratio by adjusting my captureWidth and captureHeight when calling startVideo. The local camera view appears properly on the canvas in the aspect ratio that I request. However, any remote video has black bars rendered on the sides to fill out the 16:9 ratio that is expected.
Could these bars either not be rendered, or give us a way to set the color/transparency of the bars? Without this, no ratio other than 16:9 is usable in a gallery view.
Sure. For this test I will use these video options when calling startVideo:
captureWidth: 320,
captureHeight: 240,
The camera is sending a bright reddish-orange that will fill the camera frame to make it easy to identify the borders. I will render it onto the canvas with a width & height that is also 4:3 ratio using quality 1.
This is a screenshot with my other video elements in place. The border box shows the size I am targeting.
The camera on the left is the local user. It renders correctly in the 4:3 ratio. The camera on the right is a remote user. You’ll see that the video being sent & rendered has been forced into a 16:9 ratio with the extra width filled in with black bars.
This is the same setup, but with my other elements removed so the canvas does not have any other elements above or below it:
I have also adjusted my other elements to match the 16:9 ratio. This works, and it it what I am using for now as a workaround. However, I’d much rather use the 4:3 ratio for my use case.
Ideally, the received video would match the capture ratio. However, it would also be okay if the received video was forced into a 16:9 ratio as long as the filling bars were transparent or we could specify the color & transparency.
I managed to get a 4:3 ration stream, which was compressed due to the original 16:9 capture ratio. Also without any black bars. You could try to play around with those values, and adjusting values live in the browser. On Firefox I don´t know, as these functions will not work the same, due to the “only one rendered video on canvas” problem.
Yeah, if you compress the canvas down to 4:3 but capture at 16:9, it’ll fit into 4:3 but then the image is distorted. If using a single video, you can also stick the canvas under a div with overflow: hidden. However, when trying to do multiple videos on a single canvas that needs to transparently sit over top of other content (as mine does) I haven’t found a good way to hide the extra black bars that are render.
