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.
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.
// For Android and iOS, the sourceId and sourceType do not need to be passed in, and passing it will not cause the creation to fail.
ZegoScreenCaptureSource source = await ZegoExpressEngine.instance.createScreenCaptureSource();
// For windows and macOS, sourceId and sourceType are required parameters, and the data comes from the data results obtained by the getScreenCaptureSources method.
// ZegoScreenCaptureSource source = await ZegoExpressEngine.instance.createScreenCaptureSource(sourceId: list[0].sourceID, sourceType: list[0].sourceType);
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 method.
ZegoExpressEngine.instance.setVideoSource(ZegoVideoSourceType.ZegoVideoSourceScreenCapture, instanceID: source.getIndex(), channel: ZegoPublishChannel.Main);
Call the startCapture method to share the whole screen.
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, channel: ZegoPublishChannel.Main);
If you only share the screen and sound within the application, set the inApp
attribute to true
.
var config = ZegoScreenCaptureConfig(true, true, 100, 100);
source.startCapture(config: config, inApp: true);
If you need to share the screen and sound of the whole system, set the inApp
attribute to false
.
Cross-app screen sharing is recorded by the iOS system through the Extension
process, so an additional process needs to be created and started.
var config = ZegoScreenCaptureConfig(true, true, 100, 100);
source.startCapture(config: config, inApp: false);
The memory usage of the Broadcast Upload Extension is limited to 50 MB, please do not allocate additional memory to the Screen Sharing Extension.
xcworkspace
in the iOS directory under your flutter project, and then click File > New > Target in the menu bar.
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:
The implementation of the following system callbacks can be viewed in the "/example/ios/ScreenShare/SampleHandler.m" file in the SDK sample source code:
Make sure that RPBroadcastProcessMode
is set to RPBroadcastProcessModeSampleBuffer
in the Info.plist
file of the Extension.
Import ZEGOCLOUD Video Call SDK in Extension, click the project in Xcode 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.
ZegoReplayKit
class to create a data transmission channel in this callback:[ZegoReplayKitExt.sharedInstance setupWithDelegate:self];
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];
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];
Call the updateCaptureSource method to update the shared window screen.
source.updateCaptureSource(list[1].sourceID, list[1].sourceType)
Call the updateCaptureSource method to dynamically update the shared window area. Where set to (0, 0, 0, 0) restores whole window sharing.
source.updateCaptureRegion(Rect.fromLTWH(10, 10, 400, 400));
Calling the setExcludeWindowList method can filter out the specified window screen in the shared screen, which is only applicable to the setting when the entire screen is shared.
source.updateCaptureRegion([list[1].sourceID]);
Call the enableWindowActivate method to activate the current shared window.
source.enableWindowActivate(true);
Call the enableCursorVisible method to show or hide the mouse.
source.enableCursorVisible(true);
Capturing exception callback, when there is an exception callback, the capturing will be interrupted.
ZegoExpressEngine.onExceptionOccurred = (ZegoScreenCaptureSource source,
ZegoScreenCaptureSourceExceptionType exceptionType) {
};
source.startCapture();
Call the stopCapture method to stop the screen sharing.
engine.stopCapture();
Call the loginRoom method, pass in the room ID parameter roomID
and the user parameter user
to log in to the room.
Call the startPublishingStream method passing in the stream ID parameter streamID
, and send the local audio and Video stream to the remote user.
/** create user */
var user = new ZegoUser.id("user1");
/** Start logging into the room */
ZegoExpressEngine.instance.loginRoom("room1", user);
/** Start publish streams*/
ZegoExpressEngine.instance.startPublishingStream("stream1");
So far, we have completed the operation of collecting screen data and sharing it with the remote end through the ZegoExpress SDK.
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, canvas: ZegoCanvas.view(playView));