BlueJeans is being sunset. Please refer to more details

Steps for building a custom layout

You can customize the video layout to suit your needs by creating a custom video layout. Using a custom layout means overriding BlueJeans' pre-built layouts and handling video requests yourself. To create a custom layout, you need to do the following:

Note

A participant’s video can be rendered only in one view and will implicitly get detached from the previous view if we try to attach it to a new view. Hence, you cannot render the same video in two different views on screen.

In this section, we will walk through the steps you need to consider when initiating your custom layout flow/individual stream control.

Step 1: Setting custom layout

Set your video layout to CUSTOM for initiating the custom layout flow/individual stream control (Ref. setVideolayout).

webClientSDK.meetingService.setVideoLayout("CUSTOM");
  • Custom layouts are not supported in all endpoints, and are only supported on multi-stream capable endpoints. To check if the current endpoint is capable of multi-stream video, use the following code snippet. It’s a Boolean property that returns true if the endpoint is a multi-stream capable endpoint and false if the endpoint is not supported by a multi-stream capable endpoint. 
    webClientSDK.meetingService.isMultiStreamSupported

Note 

This can be done only in an inMeeting state, otherwise, you will receive errors during the subsequent steps.

 

Step 2: Setting video configuration

Invoke setvideoStreamConfiguration(<configuration>) API, to specify the video stream resolution quality that you desire (See. setVideoStreamConfiguration). You can pass an array of 25 such configurations which may/may not have participantGuid. 

webClientSDK.meetingService.videoStreamService.setVideoStreamConfiguration(
  [{participantGuid:"<participantGuid>",streamQuality:"r360p_30fps",streamPriority:"HIGH"},
   {participantGuid:"<participantGuid>",streamQuality:"r360p_30fps",streamPriority:"HIGH"}]
);

Note

The maximum number of configurations that can be requested by the individual remote stream is 25.

Why configuration is required

To request a number of participants whose videos you want to see, and the video resolution of those participants. If this request is successful, then only you will get the remote video streams (See. VideoStreamConfiguration). Which will be used in later steps to display the remote participant's video.

 

Step 3: Creating a view for custom layout

Create HTMLDivElement (divs) to render individual streams for each stream (There should be a maximum of 25 divs).

The code below is a sample code to demonstrate how to create HTMLDivElement. You can create your HTMLDivElement in any way you want.

let index = 1;
let bound = NO_OF_INDIVIDUAL_STREAMS; // Max 25
for (let index = 1; index < bound+1; index++) {
    var testDiv = document.createElement('div');
        testDiv.id = `testDiv${index}`;
        testDiv.style.cssText = `
                width:500px;
                height:400px;
                border: 1px solid red
                `;
    document.body.append(testDiv)
}

Recommendations

  • Creating HTMLDivElement can be done before or after initiating the custom layout flow.
  • You must have an HTMLDivElement present before attaching a remote video stream.
  • Make sure your HTMLDivElement has height and width.
  • We recommend not including any other elements in the provided view. Adding additional elements can cause unintended side effects or may be removed without warning.

 

Step 4: Attaching participant to view (HTMLDivElement)

After setting the configuration and creating an HTMLDivElement, you are ready to attach a participant to the provided view using the attachParticipantToView method (See. attachParticipantToView). This method will render and display the remote participant's video in a provided view. To attach individual streams to the newly created HTMLDivElement, use the following code snippet.

let videoStreams = webClientSDK.meetingService.videoStreamService?.videoStreams;
videoStreams?.forEach((videoStream) => {
    if (index < videoStreams.length + 1) {
        webClientSDK.meetingService.videoStreamService?.attachParticipantToView(
            videoStream.participantGuid, document.querySelector(`#testDiv${index}`));
        index++;
    }
})
  • Observe the list of videoStreams offered by VideoStreamService class. Observing this list gives an update on the current configuration of the video streams being received (See. Video Stream).
  • Based on the video stream list from the above step, you can create your custom user interface (See. Video Stream and Sample App).
  • For a video to be shown in the video stream array, ensure that the participant's video must be unmuted, and the participantGuid must be available in the setvideoStreamConfiguration().

Note

A participant’s video can be attached only in one view and will implicitly get detached from the previous view if you try to attach it to a new view. Hence, you cannot attach the same video in two different views on screen.

Congratulation! You have now completed a basic custom layout. Here are some additional things you can do next.