# Screen sharing (/en/realtime-media/interactive-live-streaming/build/manage-video-and-streaming/screen-sharing/electron)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

During Interactive Live Streaming sessions, hosts use the screen sharing feature in the Agora Video SDK to share their screen content with other users or viewers in the form of a video stream. Screen sharing is typically used in the following use-cases:

| Use-case                   | Description                                                                                                    |
| :------------------------- | :------------------------------------------------------------------------------------------------------------- |
| Online education           | Teachers share their slides, software, or other teaching materials with students for classroom demonstrations. |
| Game live broadcast        | Hosts share their game footage with the audience.                                                              |
| Interactive live broadcast | Anchors share their screens and interact with the audience.                                                    |
| Video conferencing         | Meeting participants share the screen to show a presentation or documents.                                     |
| Remote control             | A controlled terminal displays its desktop on the master terminal.                                             |

      
  
      
  
      
  
      
  
      
  
      
    Agora screen sharing offers the following advantages:

    * **Ultra HD quality experience**: Supports Ultra HD video (4K resolution, 60 FPS frame rate), giving users a smoother, high-definition, ultimate picture experience.
    * **Multi-app support**: Compatible with many mainstream apps such as WPS Office, Microsoft Office Power Point, Visual Studio Code, Adobe Photoshop, Windows Media Player, and Scratch. This makes it convenient for users to directly share specific apps.
    * **Multi-device support**: Supports multiple devices sharing at the same time. Screen sharing is compatible with Windows 8 systems, devices without independent graphics cards, dual graphics card devices, and external screen devices.
    * **Multi-platform adaptation**: Supports iOS, Android, macOS, Windows, Web, Unity, Flutter, React Native, Unreal Engine, and other platforms.
    * **High security**: Supports sharing only a single app or part of the screen. Also supports blocking specified app windows, effectively ensuring user information security.

    This page shows you how to implement screen sharing in your app.

    ## Understand the tech [#understand-the-tech-5]

    The screen sharing feature provides the following screen sharing modes for use in various use-cases:

    **Screen sharing use-cases**

    ![Screen Sharing Functionality](https://assets-docs.agora.io/images/video-sdk/screen-sharing-functionality.png)

    * **Share the entire screen**: Share your entire screen, including all the information on the screen. This feature supports collecting and sharing information from two screens at the same time.
    * **Share an app window**: If you don't want to share the entire screen with other users, you can share only the area within an app window.
    * **Share a designated screen area**: If you only want to share a portion of the screen or app window, you can set a sharing area when starting screen sharing.

    Screen sharing modes are available on different platforms as follows:

    * **Desktop** (Windows and macOS): Supports all screen sharing features listed above.

    * **Mobile** (Android and iOS): Only supports sharing the entire screen.

    ## Prerequisites [#prerequisites-5]

    * Ensure that you have implemented the [SDK quickstart](../../index.mdx) in your project.

    ## Set up your project [#set-up-your-project-5]

    Windows or macOS system assigns a unique **Display ID** for each screen and a unique **Window ID** for each window. Agora provides the following two screen sharing solutions:

    * Share a specific screen or part of a specified screen using **Display ID**.
    * Share a specific window or part of a specified window using **Window ID**.

    The API calling sequence is shown in the figure below:

    **API calling sequence**

    ![API Calling Sequence](https://assets-docs.agora.io/images/video-sdk/screen-sharing-flutter-electron.svg)

    ## Implement screen sharing [#implement-screen-sharing-5]

    This section shows you how to implement screen sharing in your project.

    ### Get a list of shareable screens and windows [#get-a-list-of-shareable-screens-and-windows]

    Call the `getScreenCaptureSources` method to get the **Display ID** or **Window ID** of the source you want to share.

    ```typescript
    const sources = engine.getScreenCaptureSources(
     { width: 1920, height: 1080 },
     { width: 64, height: 64 },
     true
    );
    ```

    ### Share a specific screen or window [#share-a-specific-screen-or-window]

    * Share a specific screen using **Display ID** on macOS or Windows:

      ```typescript
      engine.startScreenCaptureByDisplayId(
       targetSource.sourceId,
       {},
       {
        dimensions: { width, height },
        frameRate,
        bitrate,
        captureMouseCursor,
        excludeWindowList,
        excludeWindowCount: excludeWindowList.length,
        highLightWidth,
        highLightColor,
        enableHighLight,
       }
      );
      ```

    * Share a specific window using **Window ID** on macOS or Windows:

      ```typescript
      engine.startScreenCaptureByWindowId(
       targetSource.sourceId,
       {},
       {
        dimensions: { width, height },
        frameRate,
        bitrate,
        windowFocus,
        highLightWidth,
        highLightColor,
        enableHighLight,
       }
      );
      ```

    ### Capture system audio (Optional) [#capture-system-audio-optional-2]

    To capture and publish the audio played in the shared screen or window simultaneously, call `enableLoopbackRecording` to start sound card capture.

    After you call this method, the audio played by other processes in the system is published to the remote end. To turn off sound card acquisition, call the method again.

    ### Join a channel and publish screen share streams [#join-a-channel-and-publish-screen-share-streams]

    * To publish only a screen sharing stream, add the following code to your project:

      ```typescript
      agoraRtcEngine.joinChannel(token, channelId, uid, {
       autoSubscribeAudio: true,
       autoSubscribeVideo: true,
       publishMicrophoneTrack: false,
       publishCameraTrack: false,
       clientRoleType: ClientRoleType.ClientRoleBroadcaster,
       publishScreenTrack: true,
      });
      ```

    <CalloutContainer type="info">
      <CalloutDescription>
        To share captured audio during screen sharing, call `enableLoopbackRecording` to enable the sound card capture function and merge the sound played by the sound card with the local audio stream.
      </CalloutDescription>
    </CalloutContainer>

    * To publish both a screen sharing stream and the video stream captured by the local camera simultaneously, add the following code to your project:

      ```typescript
      // Call joinChannel to publish a stream of video captured by the local camera
      agoraRtcEngine.joinChannel(token, channelId, uid, {
       autoSubscribeAudio: true,
       autoSubscribeVideo: true,
       publishMicrophoneTrack: true,
       publishCameraTrack: true,
       clientRoleType: ClientRoleType.ClientRoleBroadcaster,
       publishScreenTrack: false,
      });

      // Call joinChannelEx to publish a screen-sharing stream
      agoraRtcEngine.joinChannelEx(
       token2,
       { channelId, localUid: uid2 },
       {
        autoSubscribeAudio: false,
        autoSubscribeVideo: false,
        publishMicrophoneTrack: false,
        publishCameraTrack: false,
        clientRoleType: ClientRoleType.ClientRoleBroadcaster,
        publishScreenTrack: true,
       }
      );
      ```

    ### Limitations [#limitations-5]

    Be aware of the following limitations:

    * The video unit price for a screen-shared stream is based on the **video resolution** you set in `ScreenCaptureParameters`. If you do not pass dimensions in `ScreenCaptureParameters`, Agora bills you for the default resolution of 1920 x 1080 (2,073,600). See [Pricing](../../reference/pricing.md) for details.

    ## Reference [#reference-5]

    This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

    ### Sample project [#sample-project-5]

    Agora provides an open source Electron [sample project](https://github.com/AgoraIO-Extensions/Electron-SDK/blob/main/example/src/renderer/examples/advanced/ScreenShare/ScreenShare.tsx) on GitHub. Download and explore this project for a more detailed example.

    ### API reference [#api-reference-4]

    * [`getScreenCaptureSources`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_getscreencapturesources)

    * [`startScreenCaptureByDisplayId`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_startscreencapturebydisplayid)

    * [`startScreenCaptureByWindowId`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_startscreencapturebywindowid)

    * [`ScreenCaptureParameters`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_screencaptureparameters.html)

    * [`updateScreenCaptureParameters`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_updatescreencaptureparameters)

    * [`stopScreenCapture`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_stopscreencapture)

    * [`enableLoopbackRecording`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_enableloopbackrecording)