Display multiple screen shares simultaneously in Video SDK

With Zoom Video SDK, we are always trying to improve how users can collaborate with each other. With Video SDK v2.2.10, we've made enhancements to screen sharing that give developers more flexibility and control over how to render shared content in their apps. You can now render up to four screen shares at once.

This unlocks new collaborative possibilities by enabling multiple participants to share their screens simultaneously using the new attachShareView and detachShareView methods. These methods not only allow you to render multiple screen shares, but the API is also modeled after the existing video rendering methods — simplifying your screen sharing integration.

If you want to dive right into the code, you can check out our demo app showcasing this feature on GitHub.

Note: We recommend that you migrate to these new methods if you previously used the startShareView and stopShareView methods. There are no changes for starting a screen share, you can continue to use the startShareScreen method.

Render multiple share views

When multiple users are sharing screens and you want to display all share views simultaneously on the same page, follow these steps:

1. HTML structure

   Add a video-player-container element to hold the share views. Make sure this is different from the video-player-container that holds user videos:

   <video-player-container id="share-container"></video-player-container>
   <video-player-container id="video-container"></video-player-container>
   

   You can style the container using CSS to create a grid or flex layout that suits your needs:

   video-player-container {
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
   }
   video-player {
       width: 100%;
       height: auto;
       aspect-ratio: 16/9;
   }
   

2. Set the share privilege to MultipleShare

   After joining the session, set the share privilege to allow multiple simultaneous shares:

   const mediaStream = client.getMediaStream();
   await mediaStream.setSharePrivilege(SharePrivilege.MultipleShare);
   

   You can verify the share privilege was set correctly:

   if (mediaStream.getSharePrivilege() !== SharePrivilege.MultipleShare) {
       console.error("Failed to set share privilege to MultipleShare");
   }
   

3. Enable simultaneous share view when starting your own share

   When you start sharing your screen, pass simultaneousShareView: true in the options object:

   const mediaStream = client.getMediaStream();
   if (mediaStream.isStartShareScreenWithVideoElement()) {
       await mediaStream.startShareScreen(myShareEle, {
           simultaneousShareView: true,
       });
       myShareEle.style.display = "block";
   } else {
       // Fallback to canvas if video element isn't supported
       await mediaStream.startShareScreen(myShareCanvas, {
           simultaneousShareView: true,
       });
       myShareCanvas.style.display = "block";
   }
   

4. Handle share view changes with events

   Use the peer-share-state-change event to handle when other participants start or stop sharing. The logic is similar to handling video views with peer-video-state-change:

   client.on("peer-share-state-change", renderShare);
   const renderShare = async (event) => {
       const { action, userId } = event;
       const mediaStream = client.getMediaStream();
       if (action === "Start") {
           const element = await mediaStream.attachShareView(userId);
           if (element) {
               shareContainer.appendChild(element);
           }
       } else if (action === "Stop") {
           const element = await mediaStream.detachShareView(userId);
           if (element && Array.isArray(element)) {
               element.forEach((el) => el.remove());
           } else if (element) {
               element.remove();
           }
       }
   };
   

   The attachShareView and detachShareView methods return HTML elements that you must place inside the video-player-container for shared views.

Important notes

• attachShareView returns a video-player element that you must place inside a video-player-container.
• You can't mix attachVideo and attachShareView elements in the same container.
• switchShareView method is not compatible with attachShareView. You must manually detach the previous view and attach the new one.
• attachShareView does not trigger the share-content-change event.

You're all set!

The new screen sharing APIs provide you with more flexibility and control over how you display shared content in your application. Whether you're building a collaborative whiteboard, a presentation tool, or a multi-user screen sharing experience, these improvements make it easier to create engaging user experiences. You can read more in the screen-sharing documentation.

In this release, we've also added features to the annotation feature enabling presenters and participants to draw, highlight, and interact directly with shared screen content, be sure to check those out as well!