Screen sharing

During Video Calling 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 scenarios:

Scenario	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 game.

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

• 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.

• Ensure that you have implemented the SDK quickstart in your project.

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.

Refer to the iOS Screen Sharing Guide to create an Extension for your Unreal (Blueprint) project.

Agora currently supports the following screen sharing solutions for macOS and Windows platforms:

• Share a specified screen or part of a specified screen using the displayId.
• Share a specified window or part of a specified window using the windowId.

The basic API call sequence is shown in the figure below:

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

This subsection describes how to start and stop screen sharing on Android and iOS mobile platforms.

Create two button controls named Btn_StartScreenCapture and Btn_StopScreenCapture. Users start or stop screen sharing using these two buttons as shown in the figure below:

Refer to the following steps to join a channel and publish a screen sharing stream:

1. In Bind UIEvent, bind the UI event of clicking the Start Screen Share button. Create a Bind Event to On Clicked node that connects the Btn_StartScreenShare button control and the OnStartScreenShareClicked callback functions respectively. This callback is triggered when the user clicks the Start Screen Share button as shown in the following figure:

   

2. Create and implement the OnStartScreenShareClicked callback. When a button click triggers this callback, execute the following flow:

   1. Call the Stop Screen Capture method to pause the ongoing screen sharing process.

   2. Call Start Screen Capture method to start screen capture, and check Capture Audio and Capture Video in Make ScreenCaptureParameters2 to capture system audio and screen video.

   3. Call Join Channel to join the channel and configure the following parameters in Make ChannelMediaOptions to publish the screen-captured video stream to the channel:

      • Set Publish Camera Track to AGORA FALSE VALUE to cancel publishing the video stream collected by the camera.
      • Set Publish Screen Capture Video to AGORA TRUE VALUE to publish the screen-captured video stream.
      • Set Publish Screen Capture Audio to AGORA TRUE VALUE to publish the screen-captured audio stream.
      • Set Auto Subscribe Video to AGORA TRUE VALUE to automatically subscribe to all video streams.
      • Set Auto Subscribe Audio to AGORA TRUE VALUE to automatically subscribe to all audio streams.
      • Check Client Role Type Set Value and set Client Role Type to CLIENT_ROLE_BROADCASTER or CLIENT_ROLE_AUDIENCE to set the user role as host or audience.
      • Check Channel Profile Set Value and set Channel Profile to CHANNEL_PROFILE_LIVE_BROADCASTING to set the channel scene to live broadcast scene as shown below:

      

Follow the steps below to stop screen capture:

1. In Bind UIEvent, bind the UI event of clicking the Stop Screen Sharing button. Create a Bind Event to On Clicked node that connects the Btn_StopScreenShare button control and the OnStopScreenShareClicked callback function respectively. This callback is triggered when the user clicks the Stop Screen Share button.

   

2. Create and implement the OnStopScreenShareClicked callback. When a button click triggers this callback, Stop Screen Capture is called to stop screen sharing as shown in the following image:

   

This subsection describes how to start and stop screen capture on Windows and macOS mobile platforms.

Refer to the following steps to create a UMG:

1. Create a ComboBoxString (drop-down list box) control named CBS_DisplayID for the user to select the screen or window to share from a drop-down list.

2. Create two Button controls named Btn_StartScreenCapture and Btn_StopScreenCapture, for the user to start or stop screen sharing.

   

In EventGraph, add and connect the event nodes required for screen sharing as shown in the following diagram:

The main nodes are as follows:

Node	Description
Get Screen Display Id	After initializing the Agora Engine, get information about the shareable screens and windows. Use this information to set the options and indexes in the drop-down lists.
Init Default Screen Capture Config	Prepare the parameter configuration for screen sharing and save the configuration for later use.

Follow the steps below to obtain and add available screens and windows:

1. In Get Screen Display Id, refer to the following steps to get the currently available screen and window resources and add them to the options in the drop-down list:

   1. Call the Get Screen Capture Sources method to return a list of shareable screens and windows, and call Get Count to get the number of shareable screens and windows, as shown in the following figure:

      

   2. Traverse the list, call Get Source Info to get information about a specific screen or window, and add the Source Name to each of the options in the drop-down list for the users to choose from. Call Release to release the list of shareable screens and windows. Refer to the following figure:

      

2. In Bind UIEvent, bind the UI event of the dropdown list selection change. Create a Bind Event to On Selection Changed node that connects the CBS_DisplayID drop-down list control and the OnCBDisplayIDSelectionChanged callback function, respectively. This callback is triggered when the user selects the specified screen or window in the drop-down list as shown in the following figure:

   

3. Create and implement the OnCBDisplayIDSelectionChanged callback. When an option change triggers this callback, it looks up the index of the option and sets the option by index as shown below:

   

In Init Default Screen Capture Config, configure screen sharing parameters such as Dimensions, Frame Rate, and Bitrate. Make advanced configurations as follows:

• Screen Stroke: Check Enable High Light and set High Light Width and High Light Color to specify the stroke width and color. The SDK strokes the shared screen or window according to your settings.

• Shield Window: Set Exclude Window List to the list of windows you want to shield. When you subsequently call Start Screen Capture by Display Id, the specified window is shielded.

Save this configuration for subsequent use when starting screen capture. Refer to the following figure:

1. In Bind UIEvent, bind the event of clicking the Start Screen Share button. Create a Bind Event to On Clicked node that connects the Btn_StartScreenShare button control and the OnStartScreenShareClicked callback functions, respectively. This callback is triggered when the user clicks the Start Screen Share button as shown below:

   

2. Create and implement the OnStartScreenShareClicked callback. When the callback is triggered, the following process is executed:

   1. Call the Stop Screen Capture method to pause the ongoing screen sharing process.

   2. Based on the list of available screens and windows saved in the previous steps, find the element that corresponds to the option and determine whether the option is a ScreenCaptureSourceType_Screen (screen) or a ScreenCaptureSourceType_Window (window) by using the Type in the element.

      

   3. If the shared target is a screen, call Start Screen Capture by Display Id to pass in the screen ID and the parameter configuration saved in the previous steps to start capturing the video stream of the specified screen. If the shared target is a window, call Start Screen Capture by Window Id to pass in the window ID and the parameter configuration to start capturing the video stream of the specified window. To share a specific region of a screen or window, set the Region Rect parameter to the position of the region you want to share relative to the entire screen or window.

   4. Call Join Channel to join the channel and configure the following parameters in Make ChannelMediaOptions to publish the captured screen sharing stream:

      • Set Publish Camera Track to AGORA FALSE VALUE to cancel publishing camera-captured video streams.
      • Set Publish Screen Track to AGORA TRUE VALUE to publish screen-captured video streams.
      • Set Auto Subscribe Video to AGORA TRUE VALUE to automatically subscribe to all video streams.
      • Set Auto Subscribe Audio to AGORA TRUE VALUE to automatically subscribe to all audio streams.
      • Check Client Role Type Set Value and set Client Role Type to CLIENT_ROLE_BROADCASTER or CLIENT_ROLE_AUDIENCE to set the user's role as anchor or audience.
      • Check Channel Profile Set Value and set Channel Profile to CHANNEL_PROFILE_LIVE_BROADCASTING.

      

1. In Bind UIEvent, bind the event of clicking the Stop Screen Sharing button. Create a Bind Event to On Clicked node that connects the Btn_StopScreenShare button control and the OnStopScreenShareClicked callback functions respectively. This callback is triggered when the user clicks the Stop Screen Share button. Refer to the following figure:

   

2. Create and implement the OnStopScreenShareClicked callback. When a button click triggers this callback, Stop Screen Capture is called to stop screen sharing as shown below:

   

Be aware of the following limitations:

• The video unit price for a screen-shared stream is based on the video resolution you set in FScreenCaptureParameters. If you do not pass dimensions in FScreenCaptureParameters, Agora bills at the default resolution of 1920 x 1080 (2,073,600). See Pricing for details.

• Before starting screen sharing, call the SetAudioScenario method and set the audio scenario to AUDIO_SCENARIO_GAME_STREAMING (high sound quality scenario) to improve the success rate of capturing system audio during screen sharing.

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

Agora provides an open source Unreal (Blueprint) sample project on GitHub for your reference:

• ScreenShare: implements screen sharing.
• ScreenShareWhileVideoCall: implements screen sharing while on a video call.

• Android, iOS

  • StartScreenCapture
  • StopScreenCapture
  • UpdateScreenCapture

• macOS, Windows

  • GetScreenCaptureSources
  • StartScreenCaptureByDisplayId
  • StartScreenCaptureByWindowId
  • UpdateScreenCaptureParameters
  • UpdateScreenCaptureRegion
  • SetScreenCaptureContentHint
  • SetScreenCaptureScenario
  • StopScreenCapture