0

I'm trying to configure archiving for group video broadcast but I can't get it right. The archiving of the composed file and its start/stop is working fine, the custom layout type and the stylesheet are correctly being considered, but I'm not getting the results I want.

My stylesheet currently looks like this

stream {
  float: left;
  position: absolute;
}

stream:first-child:nth-last-child(1) {
  width: 100%;
  height: 100%;
}

stream:first-child:nth-last-child(2) {
  width: 100%;
  height: 50%;
}

stream:first-child:nth-last-child(2)+stream {
  width: 100%;
  height: 50%;
  top: 50%;
}

stream:first-child:nth-last-child(3) {
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
}

stream:first-child:nth-last-child(3)+stream {
  width: 50%;
  height: 50%;
  top: 50%;
}

stream:first-child:nth-last-child(3)+stream+stream {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
}

stream:first-child:nth-last-child(4) {
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
}

stream:first-child:nth-last-child(4)+stream {
  width: 50%;
  height: 50%;
  top: 0;
  left: 50%;
}

stream:first-child:nth-last-child(4)+stream+stream {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 0;
}

stream:first-child:nth-last-child(4)+stream+stream+stream {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
}

stream:first-child:nth-last-child(5) {
  width: 50%;
  height: 33.3%;
  top: 0;
  left: 25%;
  object-fit: cover;
}

stream:first-child:nth-last-child(5)+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  left: 55px;
}

stream:first-child:nth-last-child(5)+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  right: 55px;
}

stream:first-child:nth-last-child(5)+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  left: 55px;
}

stream:first-child:nth-last-child(5)+stream+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  right: 55px;
}

stream:first-child:nth-last-child(6) {
  width: 50%;
  height: 33.3%;
  top: 0;
  left: 55px;
}

stream:first-child:nth-last-child(6)+stream {
  width: 50%;
  height: 33.3%;
  top: 0;
  right: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  left: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  right: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  left: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  right: 55px;
}

For example,

I would like to have a result like this when there are 5 streams: https://tokbox.com/blog/wp-content/uploads/2017/07/multiparty2.png

and like this when there are 6 stream: https://tokbox.com/blog/wp-content/uploads/2017/07/multiparty1-1.png

The broadcast will be show in a phone, so the layout will be exactly as that.

Can I achieve results like in these images?

Thanks

Marcos Schlucat Grimm
  • 13
  • 3

1 Answers1

0

Currently, the output canvas can be 640x480 or 1280x720, both landscape aspect ratios. It seems from your sample desired images that you want portrait aspect ratio.

One trick that you can do is to define a css that draws inside the output canvas only in a region that has portrait aspect ratio, so the final video will have black strips on the sides, and the relevant content will be in the center in that portrait aspect ratio region. Note that aspect ratio of the video will still be landscape. Thus, when a portrait orientated device plays that broadcast stream, the player can just zoom in to just focus on the relevant content and ignore the black strips of the video

user10130589
  • 1