Documentation
ExpressVideoSDK Video Call
Documentation
Demo APP
SDK Center
API Center
FAQ
Code Market
Console
Sign Up
Log In
中文站 English
  • Documentation
  • Video Call
  • Upgrade using advanced features
  • Advanced features
  • Share the screen

Share the screen

Last updated:2024-09-04 15:04

Introduction

Screen sharing refers to the process of sharing your screen with other users in the room during a video call or interactive live streaming. This feature can be applied to a video conference, live game streaming, an online class, and other scenarios. for example, the teacher can share the slides with the students in the room to enhance communication.

Prerequisites

Before you begin, make sure you complete the following:

  • Create a project in ZEGOCLOUD Admin Console and get the AppID and AppSign of your project.

  • Refer to the Quick Start doc to complete the SDK integration and basic function implementation.

  • Platform and device requirements:
  • Android: Android devices or simulators that support Android 5.0 or later and support audio and Video (real devices are recommended).
  • iOS:
  • An iOS device or simulator that supports iOS 12.0 or above and supports audio and Video(a real device is recommended).
  • This feature requires high device performance, and is recommended to be used on iPhone X and later models.

Implementation steps

Granting permissions

Before recording the screen on Android, a dialog prompt will appear asking the user for permission to allow the app to record the screen. Please grant the permission.

If the target Android SDK version is 34.0.0 or later, you need to navigate to the "app/src/main" directory of your project and open the "AndroidManifest.xml" file. Then, add the following permission declarations for FOREGROUND_SERVICE and FOREGROUND_SERVICE_MEDIA_PROJECTION:

<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION"/>

Setting the capture source to screen sharing source

Video source

The video source that the SDK captured for publishing streams is from the camera by default. If you need to publish the streams that the screen sharing captured, you need to switch the source through the setVideoSource.

ZegoExpressEngine.instance().setVideoSource(ZegoVideoSourceType.ScreenCapture, ZegoPublishChannel.Aux);

Audio source (iOS supported only)

The audio source that the SDK captured for publishing streams is from the microphone by default. If you need to publish the streams that the screen sharing captured, you need to switch the source through the setAudioSource.

ZegoExpressEngine.instance().setAudioSource(ZegoAudioSourceType.ScreenCapture, ZegoPublishChannel.Aux);

In-app screen sharing (iOS supported only)

If you only share the screen and sound within the application, call the startScreenCaptureInApp method to start screen sharing.

ZegoExpressEngine.instance().startScreenCaptureInApp(); 

Cross-application screen sharing

If you need to share the screen and sound of the whole system, call the startScreenCapture interface to start Screen Sharing.

ZegoExpressEngine.instance().startScreenCapture(); 

Cross-app screen sharing is recorded by the iOS system through the Extension process, so an additional process needs to be created and started.

Create a new Broadcast Upload Extension (iOS supported only)

The memory usage of the Broadcast Upload Extension is limited to 50 MB, please do not allocate additional memory to the Screen Sharing Extension.

  1. Use Xcode to open your project file, and click File > New > Target in the menu bar.
  2. In the pop-up window, select Broadcast Upload Extension on the iOS page, and click Next.
  3. Fill in the name of Broadcast Upload Extension in the column of Product Name in the pop-up dialog box, such as ScreenShare. After selecting Team, Language and other information, click Finish.

There is no need to check the Include UI Extension.

After the creation is complete, you will see the Extension folder in the project. The structure is similar to the following. This folder is used to store the implementation code of the Screen Sharing function:

Get screen data and publish streams via Extension (only supported by iOS)

The implementation of the following system callbacks can be viewed in the file /ZegoExpressExample-iOS-OC/Topics/ScreenCapture/ZegoExpressExample-iOS-OC-Broadcast/SampleHandler.m in Sample codes:

  • broadcastStartedWithSetupInfo
  • processSampleBuffer
  • broadcastFinished
  1. Make sure that RPBroadcastProcessMode is set to RPBroadcastProcessModeSampleBuffer in the Info.plist file of the Extension.
  2. Import ZEGOCLOUD Video Call SDK in Extension, and in Xcode, click Project to enter the project configuration page. Select the Extension created above, find the Frameworks and Libraries item under General, click the "+" sign, and select ZegoExpressEngine.xcframework to add.
    /Pics/iOS/ZegoExpressEngine/ShareScreen/screencapture_rn.jpg
  3. The system notifies the Extension that it has started recording the screen through the broadcastStartedWithSetupInfo callback. You need to call the following method in the ZegoReplayKit class to create a data transmission channel in this callback:
    [ZegoReplayKitExt.sharedInstance setupWithDelegate:self];
  1. In the processSampleBuffer system callback, send it to the Video Call SDK through the sendSampleBuffer method in the ZegoReplayKit class.

    [ZegoReplayKitExt.sharedInstance sendSampleBuffer:sampleBuffer withType:sampleBufferType];
  2. The system notifies the Extension that the screen recording has ended through the broadcastFinished callback. In this callback, you can call the following method in the ZegoReplayKit class to stop screen sharing and disconnect the data transmission channel:

    [ZegoReplayKitExt.sharedInstance finished];

Log in to the room and start to publish streams

After the capturing process of the above screen-sharing source is completed, the captured source is published to the cloud server. (The channel for publishing the source must be consistent with the channel for setting the capturingsource)

ZegoExpressEngine.instance().startPublishingStream(streamID, ZegoPublishChannel.Aux);

Watch shared screen-sharing streams

After completing the above steps, other users can use the startPlayingStream method to play the screen-sharing streams you published.

// To play streams, the streamID used by the user who initiated the Screen Sharing needs to be passed in when publishing streams.
ZegoExpressEngine.instance().startPlayingStream(streamID, {"reactTag": findNodeHandle(this.refs.zego_play_view), "viewMode": 0, "backgroundColor": 0});

5 FAQ

  1. **Does iOS support sharing specified areas of the screen? **

The iOS system only supports sharing the entire screen yet.

  1. iOS: Why does the capturing stops when entering the background when using screen sharing?
  • Enable the background mode for Audio Recording in the app like this:
    /Pics/iOS/ZegoExpressEngine/ShareScreen/share_screen_background_mode.png
  • If the main channel is used for the Screen Sharing function, the SDK will not start the internal audio capturing, and can't promise it can keep running when entering the background. When the app exits the background, the Screen Sharing may stop. It is recommended to add the corresponding handling logic for entering the background.
  1. Audio playback is abnormal when using Screen Sharing on iOS, how to deal with it?

If you use the Screen Sharing function to capture audio and publish audio streams, and use the stream-playing function on the device at the same time, it will cause the iOS system to repeatedly capture and play audio streams, resulting in abnormal audio playback. It is recommended to use muteAllPlayStreamAudio to cancel all audio stream-playing operations.

Page Directory
  • Free trial
  • 提交工单
    咨询集成、功能及报价等问题
    电话咨询
    400 1006 604
    Get Consulting
    Scan Wechat QR code