Custom Video Source 

The Web Client SDK typically uses the basic video modules available on the device where your app is running. However, there are specific situations where you may desire to incorporate a custom video source into your app. These scenarios include:

  1. Your app has its own video module.
  2. You prefer to employ a non-camera source like pre-recorded video.
  3. You require the ability to manipulate the captured video using a pre-processing library or image enhancement like filters, 3D images, and AR objects.
  4. You need flexible device resource allocation to avoid conflicts with other services. For instance, on Windows, sharing a camera between different devices is not allowed, which can hinder the desired video source. However, there are solutions available that allow for the use of this feature.

This feature provides developers with limitless opportunities to use unique video experiences.

 

Steps for Building Custom Video Source

Here are the steps for creating a custom video source using the Web Client SDK:

Step 1

  • Set your video source to "CUSTOM" for initiating the custom video source flow (Ref. setVideoSource). 
    webClientSDK.customVideoSourceService.setVideoSource("<CUSTOM/CAMERA>")

Basically, when you set the video source to CUSTOM, it indicates that you intend to provide your own video and stop the camera session. 

Step 2

After you have set your source to CUSTOM , you are ready to transmit the track using the below API. To stream from a custom source, you need to extract a video track from a video source (Ref. How to capture videotrack for Web Client SDK).

webClientSDK.customVideoSourceService.setCustomVideoTrack(<customVideoTrack>)

Note

  • To ensure optimal use of the Custom Video Source, we recommend sending resolutions up to 720p with aspect ratios of 4:3 or 16:9.

To get more information regarding the response codes for the setVideoSource() API (Ref. SetVideoSourceResponseCode).

To get more information regarding the response codes for the setCustomVideoTrack() API (Ref. setCustomVideoTrackResponseCode).

The following code snippet combines the above steps and demonstrates the integration of a camera source for a custom video source.

//set source to CUSTOM
    webClientSDK.customVideoSourceService.setVideoSource("CUSTOM")
    //get videoTrack from a camera source
    let videotrack;
    navigator.mediaDevices
        .getUserMedia({ video: { width: 1280, height: 720 }, audio: false })
        .then(function (stream) {
            videotrack = stream.getVideoTracks()[0];
            console.log("videotrack:", videotrack);
        }) 
    //use video track to setCustomVideoTrack
    webClientSDK.customVideoSourceService.setCustomVideoTrack(videotrack)  
    //unmute your local video state
    webClientSDK.meetingService.setVideoMuted(false)

Use Cases of Custom Video Source

Retail Store

By using the custom video source feature, a retailer can sell eye goggles through a virtual store, providing customers with the ability to view the product virtually in 3D representation and experience it as an augmented reality (AR) object.

AR object

During remote education, educators can incorporate AR elements and visual enhancements into their live video sessions for a more captivating experience. For instance, in a lesson, a teacher can present the human liver as an AR object and change its position and angle, as depicted in the following image.

Disclaimer: The above representations of the vertical use cases do not currently exist in the form of a sample app or software product. It is merely a representation of one of the possibilities with BlueJeans SDK feature “Custom Video Source”. 3rd party developers can take inspiration from the represented UX design to understand the use case and implement it in their own products.