Custom ScreenShare Sources - JavaScript
To deliver high-quality livestreams, it's essential to fine-tune screen share tracks being broadcasted. Whether youโre hosting a webinar, or going live with a presentation, using custom media tracks gives you better control over stream quality and performance.
Custom Screen Share Trackโ
This feature enables the customization of screenshare streams with enhanced optimization modes and predefined encoder configuration (resolution + FPS) for specific use cases, which can then be sent to other hosts and audience members.
How to Create a Custom Screen Share Track ?
โ
- You can create a Video Track using the
createScreenShareVideoTrack()
method. - This method enables the creation of a screen share track with different encoding parameters and optimization modes.
Exampleโ
let customShareTrack = await VideoSDK.createScreenShareVideoTrack({
optimizationMode: "motion", // "text" | "detail", Default : "motion"
// This will accept the height & FPS of video you want to capture.
encoderConfig: "h720p_15fps", // `h360p_30fps` | `h1080p_30fps` // Default : `h720p_15fps`
});
You can learn more about the optimizationMode
from here
How to Setup a Custom Screen Share Track ?
โ
During the live stream, you can update the screenshare track by passing the MediaStream
into enableScreenShare()
method.
Make sure to call the disableScreenShare()
method before you create a new track as it may lead to unexpected behavior.
Exampleโ
let liveStream;
// Initialize LiveStream
liveStream = VideoSDK.initMeeting({
// ...
});
const enableScreenShareBtn = document.getElementById("enableScreenShareBtn");
enableScreenShareBtn.addEventListener("click", async () => {
let customShareTrack = await VideoSDK.createScreenShareVideoTrack({
optimizationMode: "motion",
encoderConfig: "h720p_15fps",
});
liveStream?.enableScreenShare(customShareTrack);
});
API Referenceโ
The API references for all the methods and events utilized in this guide are provided below.
Got a Question? Ask us on discord