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

> 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-6]

    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-6]

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

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

    Set up your project according to your target platform.

    <CodeBlockTabs defaultValue="ios">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ios">
          iOS
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="macos-and-windows">
          macOS and Windows
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ios">
        Since Apple does not support capturing the screen in the main process of the app, you create a separate extension for the screen sharing stream. You use the iOS native `ReplayKit` framework in the extension to record the screen, and then send the screen sharing stream to the main process.

        **API calling sequence**

        ![Screen Sharing Flutter Tech](https://assets-docs.agora.io/images/video-sdk/screen-sharing-flutter-unity-rn-blueprint.svg)

        Take the following steps to set up your screen sharing project:

        1. Go to your project folder and open the `ios/.xcodeproj` file with Xcode.

        2. Navigate to &#x2A;*File > New > Target...**, select **Broadcast Upload Extension** in the popup window, and then click **Next**:

           ![Select Broadcast Upload Extension](https://assets-docs.agora.io/images/video-sdk/screen-sharing-ios-select-broadcast-upload-extension.png)

        3. Fill in the **Product Name** and other information in the popup window, uncheck **Include UI Extension**, and click **Finish**. Xcode automatically creates a folder for the extension that contains the `SampleHandler.m` file.

        4. Under **Target**, select the newly created extension. Click **General** and set the iOS version to 12.0 or later under **Deployment Info**.
           The memory usage of **Broadcast Upload Extension** is limited to 50 MB. Make sure that the memory usage of **Screen Sharing Extension** does not exceed 50 MB.

        5. Modify project settings to implement the screen sharing code logic, and choose one of the following two methods according to your business needs:

           * If you only need to use the functionality in the `AgoraReplayKitExtension.xcframework` dynamic library provided by Agora, select **Target** as the extension you just created, and change the **Value** in **Info** corresponding to **NSExtension > NSExtensionPrincipalClass** from **SampleHandler** to **AgoraReplayKitHandler**:

             ![Use AgoraReplayKitHandler](https://assets-docs.agora.io/images/video-sdk/screen-sharing-ios-use-agorareplaykithandler.png)

           * If you need to implement some additional business logic, refer to the following code to modify the `SampleHandler.m` file:

             ```objc
             #import "SampleHandler.h"

             @implementation SampleHandler

             - (void)broadcastStartedWithSetupInfo:(NSDictionary<NSString *,NSObject *> *)setupInfo {
               // User requests to start broadcasting
             }

             - (void)broadcastPaused {
               // User requests a pause in broadcasting, screen sharing pauses
             }

             - (void)broadcastResumed {
               // User requests to resume broadcasting, screen sharing resumes
             }

             - (void)broadcastFinished {
               // User requests to stop broadcasting
             }

             - (void)processSampleBuffer:(CMSampleBufferRef)sampleBuffer withType:(RPSampleBufferType)sampleBufferType {

               switch (sampleBufferType) {
                 case RPSampleBufferTypeVideo:
                   break;
                 case RPSampleBufferTypeAudioApp:
                   break;
                 case RPSampleBufferTypeAudioMic:
                   break;

                 default:
                   break;
               }
             }

             @end
             ```
      </CodeBlockTab>

      <CodeBlockTab value="macos-and-windows">
        Agora currently supports the following two screen sharing options on the macOS and Windows platforms:

        * Share a specific screen or a portion of a specified screen using `displayId`.
        * Share a specific window or a portion of a specified window using `windowId`.

        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)
      </CodeBlockTab>
    </CodeBlockTabs>

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

    This section shows you how to implement screen sharing in your project. Choose the method for your target platform.

    <CodeBlockTabs defaultValue="ios">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ios">
          iOS
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="android">
          Android
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="macos-and-windows">
          macOS and Windows
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ios">
        * Start screen sharing

          1. Set the parameters according to your application use-case and call `startScreenCapture` to start screen sharing:

             * `captureVideo`: Whether to capture system video during screen sharing.
             * `captureAudio`: Whether to capture system audio during screen sharing.
             * `captureSignalVolume`: The volume of the captured system audio.
             * `dimensions`: Resolution of video encoding.
             * `frameRate`: Video encoding frame rate (FPS).
             * `bitrate`: Video encoding bitrate (Kbps).
             * `contentHint`: Content type of screen sharing video.

             ```dart
             await rtcEngine.startScreenCapture(
               const ScreenCaptureParameters2(captureAudio: true, captureVideo: true));
             ```

          2. Combine the call to `startScreenCapture` with the user's action to enable screen sharing in your app. To do this, use one of the following methods:

             * Prompt the user to long click the **screen recording** button in the **Control Center** on iOS and choose to use the extension you created to start recording.

             * Use Apple's new [RPSystemBroadcastPickerView](https://developer.apple.com/documentation/replaykit/rpsystembroadcastpickerview) in iOS 12.0 to make the **Enable Screen Sharing** button pop up on the app interface, prompting the user to click the button to start recording.

        * Stop screen sharing

          Call `stopScreenCapture` to stop screen sharing within the channel.

          ```dart
          await _engine.stopScreenCapture();
          ```
      </CodeBlockTab>

      <CodeBlockTab value="android">
        When enabling screen sharing on Android, you only need to call the `startScreenCapture` method. Refer to the `screen_sharing.dart` file in the Agora Video SDK to implement screen sharing.
      </CodeBlockTab>

      <CodeBlockTab value="macos-and-windows">
        1. Get the screen ID or the window ID

        To get the **Display ID** or **Window ID**, call the `getScreenCaptureSources` method provided in `agora_rtc_engine`.

        ```dart
        await rtcEngine.getScreenCaptureSources(
            thumbSize: thumbSize, iconSize: iconSize, includeScreen: true);
        ```

        2. Share a specified screen or window

        To share a specified screen on macOS or Windows using **Display ID**, refer to the following code:

        ```dart
        await rtcEngine.startScreenCaptureByDisplayId(
          displayId: sourceId!,
          regionRect: const Rectangle(x: 0, y: 0, width: 0, height: 0),
          captureParams: const ScreenCaptureParameters(
           captureMouseCursor: true,
           frameRate: 30,
          ));
        ```

        To share a specified window using **Window ID** on macOS or Windows, use the following code:

        ```dart
        await rtcEngine.startScreenCaptureByWindowId(
         windowId: sourceId!,
         regionRect: const Rectangle(x: 0, y: 0, width: 0, height: 0),
         captureParams: const ScreenCaptureParameters(
          captureMouseCursor: true,
          frameRate: 30,
         ),
        );
        ```

        3. Join the channel and publish a screen sharing stream

        To publish only the screen sharing stream, refer to the following code:

        ```dart
        await _engine.joinChannelEx(
          token: '',
          connection: RtcConnection(
            channelId: _controller.text, localUid: shareShareUid),
          options: const ChannelMediaOptions(
           autoSubscribeVideo: true,
           autoSubscribeAudio: true,
           publishScreenTrack: true,
           publishSecondaryScreenTrack: true,
           publishCameraTrack: false,
           publishMicrophoneTrack: false,
           publishScreenCaptureAudio: true,
           publishScreenCaptureVideo: true,
           clientRoleType: ClientRoleType.clientRoleBroadcaster,
          ));
        ```

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

        ```dart
        await _engine.joinChannelEx(
          token: '',
          connection:
            RtcConnection(channelId: _controller.text, localUid: localUid),
          options: const ChannelMediaOptions(
           publishCameraTrack: true,
           publishMicrophoneTrack: true,
           clientRoleType: ClientRoleType.clientRoleBroadcaster,
          ));

        await _engine.joinChannelEx(
          token: '',
          connection: RtcConnection(
            channelId: _controller.text, localUid: shareShareUid),
          options: const ChannelMediaOptions(
           autoSubscribeVideo: true,
           autoSubscribeAudio: true,
           publishScreenTrack: true,
           publishSecondaryScreenTrack: true,
           publishCameraTrack: false,
           publishMicrophoneTrack: false,
           publishScreenCaptureAudio: true,
           publishScreenCaptureVideo: true,
           clientRoleType: ClientRoleType.clientRoleBroadcaster,
          ));
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    ### Limitations [#limitations-6]

    Be aware of the following limitations:

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

    <CodeBlockTabs defaultValue="ios">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ios">
          iOS
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="android">
          Android
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ios">
        * Before starting screen sharing, call the `setAudioScenario` method and set the **audio scenario** to `audioScenarioGameStreaming` (high sound quality scenario) to improve the success rate of capturing system audio during screen sharing.
        * Due to system limitations, screen sharing is only supported on iOS 12.0 and above.
        * This feature requires a high level of device performance. Agora recommends that you use an iPhone X or above.
      </CodeBlockTab>

      <CodeBlockTab value="android">
        * Before starting screen sharing, call the `setAudioScenario` method and set the **audio scenario** to `audioScenarioGameStreaming` (high sound quality scenario) to improve the success rate of capturing system audio during screen sharing.
      </CodeBlockTab>
    </CodeBlockTabs>

    ## Reference [#reference-6]

    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-6]

    Agora provides open source sample projects on GitHub for your reference:

    * [Screen sharing Dart project](https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/blob/main/example/lib/examples/advanced/screen_sharing/screen_sharing.dart): Implements screen sharing using Dart.
    * [Screen sharing Objective-C project](https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/blob/main/example/ios/ScreenSharing): Implements screen sharing using Objective-C.

    ### API reference [#api-reference-5]

    * Android, iOS
      * [`startScreenCapture`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_startscreencapture)
      * [`stopScreenCapture`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_stopscreencapture)
      * [`updateScreenCapture`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_updatescreencapture)

    * macOS, Windows
      * [`getScreenCaptureSources`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_getscreencapturesources)
      * [`startScreenCaptureByDisplayId`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_startscreencapturebydisplayid)
      * [`startScreenCaptureByWindowId`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_startscreencapturebywindowid)
      * [`updateScreenCaptureParameters`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_updatescreencaptureparameters)
      * [`updateScreenCaptureRegion`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_updatescreencaptureregion)
      * [`setScreenCaptureContentHint`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_setscreencapturecontenthint)
      * [`setScreenCaptureScenario`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_setscreencapturescenario)
      * [`stopScreenCapture`](https://api-ref.agora.io/en/video-sdk/flutter/6.x/API/class_irtcengine.html#api_irtcengine_stopscreencapture)

    
  
      
  
      
  
      
  
      
  
