Video ratio

🎻 February 2023 fiddle

Want to learn more about WebRTC?

Look us up here for the WebRTC Fiddle of the Month, created… once a month.

Or just enroll to one of our excellent WebRTC training courses.

Resources

• The fiddle: https://jsfiddle.net/fippo/hjesqmo4/5/ (go watch yourself in the wrong ratio 🥸)

Transcription

Tsahi: Hi, and welcome to another WebRTC Fiddle of the Month. And this time we’re going to talk about video asset creations. Philipp, what do you have for us?

Philipp: So we have a very simple fiddle that is not doing much WebRTC. It’s just calling getUserMedia() and then rendering the video in different video elements with different versions of properties. And the difference between them is quite dramatic. Okay. So what we do is we call getUserMedia() with a 480 resolution over here, and then we attach it to four different elements. So nothing fancy. The trick here is that we use a very different width and height on the video element. The aspect ratio there is 16×9 instead of the 4×3 that we call get user meetings. And the first video is shown just without any CSS properties, apart from the 3 pixel solid black border just for visualization. We know that this is the video element, this is how big it is. We have the video and we see the… It’s called letter boxing, right?

Tsahi: The white stripes, signs, whatever.

Philipp: Yes. That’s the default behavior of the video. Now, if we look at the second video element, we have the object fill property, and that basically takes the video and squeezing it in that direction. It takes me 4×3. It depends on the input resolution and the video element size.

Tsahi: It can just change the ratio and stretch it to one of the borders.

Philipp: Yes. It’s basically trying to fill the video element with the video provided. The third variant is to have the cover property, and that is, in this case, pretty bad because you can see in the original video, we have the timestamp shown at the top, but in the cover version, which is this one here, we don’t see it.

Tsahi: I guess pretty bad is the eye of the beholder. I can give an example here. Let me change the layout of this video. Okay. So it changed. It decided to crop us differently than what it did earlier, or like this one, or this one.

Philipp: If you have some intelligent cropping, then it’s okay to do that, but you might end up cutting people’s faces.

Tsahi: I can just move. If I see myself, I see myself in order to do that.

Philipp: Yes. So I guess that- We know that it causes fatigue.

Tsahi: No, What I mean is that as long as I see myself in the local view, so I can align myself towards whatever is not viewed to me as the whole camera image, but rather what is seen by the other side as well, Then that should be fine. I want to go through this in another way, taking it from a different angle. Let’s play with the layout again. That would be this that we just did. For this purpose. We have this muppet in our video, courtesy of Midjourney, obviously. We want to place him in this video element that we have on the screen. What we essentially said is that we’ve got three different the alternatives. The first one is to use contain. When we contain it, it will simply go and find the edges of that video element, and it will fill it up to two of the four edges that we have. The other two will simply stay as stripes. Here we made them red just to show the differences. The other option would be to use cover. And what happens here, we’re going to enlarge the screen so that all the edges All of the video element are covered.

Tsahi: And if there’s anything that is outside of our viewport, we’re going to simply crop that out, which is what you see here is like watermark ink or whatever. So these are the parts that we lost of our image. The third one, in a way, the ugly, if we’re going to do this for humans, is to feel. What we do here, we are going to stretch the image to whatever horizontal or vertical element that we need aspect ratio. Then change the aspect ratio in order to fit that into the screen exactly while not losing pixels.

Philipp: In this picture, it looks okay, but we should compare it with a real human, it doesn’t look good.

Tsahi: Yes. I also think that this is part because the image here is 3×2 and not 4×3. So it’s a bit closer to the 16×9 that I use for the video element. And also, you mentioned earlier before we started recording that sometimes we are on the phone and we are rotating it. So now the screen ratio changes considerably. And we need to take into account that as well on mobile devices.

Philipp: Yes. It makes it even harder.

Tsahi: So thank you, Philipp. And see you in the future in another WebRTC Fiddle of the Month.