How to make the two block stream take all the place?

Question

I published 2 stream in mode live broadcast rtmp. The layout is of type custom. Here is the stylesheet:

stream.block1{
  position : absolute;
  top : 0;
  left : 0;
  height : 100%;
  width : 50%;
  z-index : 1;
}

stream.block2{
  position : absolute;
  top : 0;
  right : 0;
  height : 100%;
  width : 50%;
  z-index : 1;
}

But when I watch the live on youtube both blocks do not take up all the space of the screen: https://www.noelshack.com/2018-30-2-1532386693-capture-ecran-test-event-youtube.png

The css properties of each block specify a height of 100% and a top right or left at 0.

An update of the resolution at 1280x720 allows a larger dimension of the blocks but it still does not take up all the space.

How to make the blocks take up all the space?

Answer 1

The way the video is filled input the specified region is controlled by the property "object-fit" of the css. In opentok we support two possible values: "cover" and "contain" (the default).

In both cases, the input video will never have its aspect ratio modified to fit the space in the canvas.

For "contain", this means that if you specify a region in the DOM whose aspect ratio is, let's say 1:1, and the incoming video has an aspect ratio of 4:3, the final composition will try to fill that 1:1 regioin as much as possible while including all the surface of the video. Since the aspect ratios don't match, there will be some unused space.

If you use "cover", all the specified region will be filled, at the cost of trimming out some parts of the original video

Please have a look at this more detailed explanation about the "object-fit" parameter: https://www.w3schools.com/css/css3_object-fit.asp Here is a list of all supported parameters in css for layout control in opentok: https://tokbox.com/developer/guides/archiving/layout-control.html