# Display multiple screen shares simultaneously in Video SDK

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

With Zoom Video SDK, we are always trying to improve how users can collaborate with each other. With Video SDK [v2.2.10](/changelog/video-sdk/web/2.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](https://github.com/zoom/videosdk-web-screenshare).

> **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:

    ```html
    <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:

    ```css
    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:

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

    You can verify the share privilege was set correctly:

    ```javascript
    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:

    ```javascript
    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`:

    ```javascript
    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](/docs/video-sdk/web/share/#render-user-screen-sharing).

In this release, we've also added features to the [annotation feature](/docs/video-sdk/web/share-annotation/) enabling presenters and participants to draw, highlight, and interact directly with shared screen content, be sure to check those out as well!