[Internal] Custom Dynamic CSS Layout Requirements to Format Archive Recordings

Objective

Using custom dynamic CSS to format archive recordings.

Applies To

• Custom CSS
• Archive Recordings

Procedure

This is for a use-case where the requirement is to hide one stream but show another, for example, when one needs to be able to hear both but can see only one. For this scenario, the below is custom CSS which accomplishes the objective.

  stream:first-child{
  display: block;
  margin: 0;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  }stream:last-child{
  display: block;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

Another use-case is where the requirement is to create a custom CSS to allow up to 4 participants or actors with a 5th stream or director. This is based on the requirement to show 4 participants in our ‘best fit’ layout and hide the camera operator, that is, the 5th stream or director.

Input from CSA

After investigation, it was found there is no way to accomplish this layout with the nth-child system, because of how stream order works on our back end.

To accomplish this layout, users will have to use predefined layouts for the correct number of actors. For example, with 4 actors and 1 director the layout would be:

  stream.actor {
   float: left;
   width: 50%;
   height: 50%;
  }
  stream.director {
   position: absolute;
   width: 1px;
   height: 1px;
   bottom: 0px;
   right: 0px;
  }

When someone joins or leaves customer would need to use the REST API to change the layout accordingly.