Video Stream Service

VideoStreamService provides all the necessary APIs that allow you to create your own custom layouts (personal layouts), which may be more suitable for specific use cases than the BlueJeans pre-built layouts (People, Speaker, and Gallery).

setVideoStreamConfiguration(configuration)

Using setVideoStreamConfiguration(configuration), you can request the video configuration required by the client (See. setVideoStreamConfiguration). You can control the following settings with setVideoStreamConfiguration(configuration).

  • You can specify the number of video streams to be received.
  • You can specify the quality of the video streams.
  • You can specify the video stream priority (See. Video Stream Priority).
  • You can specify which participants to include in the stream.

The configuration below sets up a remote video for a participant.

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

You can check out more details on Set Video Stream Configuration. 

Attach Participant's Stream

You can use the attachParticipantToView() method to attach a remote participant's video to your view. This method renders the video stream and displays it in the specified view.

webClientSDK.meetingService.videoStreamService.attachParticipantToView("<participantGuid>", "<HTMLDivElement>");

You can check out more details on attachParticipantToView. 

Detach Participant Stream

You can use the detachParticipantFromView() method to detach a remote participant's video from a view.

webClientSDK.meetingService.videoStreamService.detachParticipantFromView("<participantGuid>");

You can check out more details on detachParticipantFromView. 

setDebugMetadataEnabled

The "isDebugMetadataEnabled" flag lets you decide whether metaData information should be included/excluded in videos of the videoStreams object. This is a boolean property. Use the following code snippet to include/exclude the metaData information.

webClientSDK.meetingService.videoStreamService.setDebugMetadataEnabled("<Boolean>");

setDefaultVideoStreamStyle

You can use setDefaultVideoStreamStyle method to sets the default video stream style based on the videoStreamStyle parameter.

Note

Setting the style will only have an effect on views that are attached after the default style is set.

The Web Client SDK provides you with two types of styling options for video streams:

  • FIT_TO_VIEW
  • SCALE_AND_CROP

The setDefaultVideoStreamStyle function sets the default video stream style based on the videoStreamStyle parameter. Setting the style will only affect views that are added after the default style is set.

webClientSDK.meetingService.videoStreamService.setDefaultVideoStreamStyle("<VideoStreamStyle>");

setVideoStreamStyle

The video style will be set based on the videoStreamStyle parameter for the video element present in the provided view. If the video is removed from the provided view, the styles will be removed and the default video style will be used.

webClientSDK.meetingService.videoStreamService.setVideoStreamStyle("<VideoStreamStyle>", "<HTMLDivElement>");

For more details on setting up a videoStreamStyle, see videoStreamStyles.

Video Stream

The streams of remote videos received by the SDK endpoint. A videoStreams array will only contain the video streams from participants that have video enabled (See. videoStream).

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. For example, if 720p is requested for one of the streams, then observing this list can help to determine whether the request to set a remote participant's stream to 720p was honored or not.

webClientSDK.meetingService.videoStreamService?.observe("videoStreams", () => {
    let meetingService = webRTCSDK.meetingService;
    let newVideoStreams = meetingService.videoStreamService?.videoStreams;
    newVideoStreams?.forEach((videoStream, index) => {
        console.log("index ", index, " videoStream ", videoStream)
    })
})

Note

  • There is no guarantee that the list in this array will be ordered in the same way each time you use it. This means that if you want to use the array reliably, you may need to make some changes to the layout each time you use it.
  • The videoStreams property should only be used for videos in the videoStreams array (See. videoStream).