Screen Sharing
Introduction
Screen sharing refers to sharing screen content as video with other viewers during video calls or interactive live streaming to enhance interactive experience and improve communication efficiency.
Screen sharing is widely used in the following scenarios:
- In video conference scenarios, screen sharing can share the speaker's local files, data, web pages, PPT, and other visuals with other participants;
- In online classroom scenarios, screen sharing can display the teacher's courseware, notes, lecture content, and other visuals for students to view.
Prerequisites
Before implementing screen sharing functionality, please ensure:
- A project has been created in the ZEGOCLOUD Console, and valid AppID and AppSign have been obtained. For details, please refer to Console - Project Information.
- ZEGO Express SDK has been integrated into the project, and basic audio/video streaming functionality has been implemented. For details, please refer to Quick Start - Integration and Quick Start - Implementation Flow.
Implementation Flow
During screen capture, only iOS and Android platforms support simultaneous video and audio capture; other platforms only support video capture. If audio capture is needed, developers need to implement the relevant logic themselves.
Calling screen sharing interfaces on the macOS platform will obtain relevant permissions. You need to enable screen recording permissions and accessibility permissions in "Security & Privacy". If it does not take effect, you need to delete the previous permissions and add them again.
- Screen recording permission
- Accessibility permission
Get window (including screen) list information
The SDK can get information about all currently shareable windows through getScreenCaptureSourcesWithThumbnailSize.
NSArray<ZegoScreenCaptureSourceInfo *> *infoList = [engine getScreenCaptureSourcesWithThumbnailSize:CGSizeMake(400, 400) iconSize:CGSizeMake(100, 100)];Create screen sharing source
By using the window ID and window type from the above window information, call the createScreenCaptureSource interface to create a screen sharing source object.
if (infoList.count > 0) {
ZegoScreenCaptureSourceInfo *info = infoList[0];
ZegoScreenCaptureSource *source = [engine createScreenCaptureSource:info.sourceID sourceType:info.sourceType];
}Set capture source to screen sharing source
The SDK's published stream video source is camera source by default. If you need to publish a screen sharing source, you need to switch to screen sharing through setVideoSource.
[engine setVideoSource:ZegoVideoSourceScreenCapture instanceID:source.getIndex.unsignedIntValue channel:ZegoPublishChannelMain];Start sharing
Call the startCapture interface to share the window visuals.
[source startCapture];Update sharing source
Call the updateCaptureSource interface to update the shared window visuals.
[source updateCaptureSource:infoList[1].sourceID sourceType:infoList[1].sourceType];Update sharing source region
Users can call the updateCaptureRegion interface to dynamically update the shared window region, where setting it to (0, 0, 0, 0) can restore the entire window sharing.
[source updateCaptureRegion:CGRectMake(10, 10, 400, 400)];Filter specified windows
Call the setExcludeWindowList interface to filter out specified window visuals in the shared screen, which is only applicable when sharing the entire screen.
[source setExcludeWindowList:@[@(infoList[1].sourceID), @(infoList[2].sourceID)]];Activate window or not
Users can call the enableWindowActivate interface to activate the currently shared window.
[source enableWindowActivate:true];Show cursor or not
Call the enableCursorVisible interface to show or hide the cursor.
[source enableCursorVisible:true];Set event handler
Call the setEventHandler interface to set the sharing source event handler.
[source setEventHandler:self];
···
// Capture data callback, can be used for local recording.
- (void)screenCapture:(ZegoScreenCaptureSource *)source availableFrame:(const void *)data dataLength:(unsigned int)dataLength param:(ZegoVideoFrameParam *)param {
}
// Capture exception callback, when an exception callback occurs, capture will be interrupted.
- (void)screenCapture:(ZegoScreenCaptureSource *)source captureType:(ZegoScreenCaptureSourceType)sourceType exceptionOccurred:(ZegoScreenCaptureSourceExceptionType)exceptionType {
}
// Window capture state callback, when the window region position changes, it will be notified through this callback, when the window is not in the current screen region, capture will stop.
- (void)screenCapture:(ZegoScreenCaptureSource *)source windowState:(ZegoScreenCaptureWindowState)state windowRect:(CGRect)rect {
}Login room and start publishing stream
Call the loginRoom interface, pass in the room ID parameter "roomID" and user parameter "user", to login the room.
Call the startPublishingStream interface, pass in the stream ID parameter "streamID", to send the local audio/video stream to remote users.
// Create user
ZegoUser *user = [ZegoUser userWithUserID:self.userID];
// Use default configuration to instantiate ZegoRoomConfig configuration object
ZegoRoomConfig *roomConfig = [ZegoRoomConfig defaultConfig];
// Start login room
[[ZegoExpressEngine sharedEngine] loginRoom:self.roomID user:user config:roomConfig];
// Start publishing stream
[[ZegoExpressEngine sharedEngine] startPublishingStream:publishStreamID];At this point, we have completed the operation of capturing screen data and sharing it remotely through ZEGO Express SDK.
Watch remote screen sharing
After completing the above steps, other users can use the startPlayingStream interface to pull the screen sharing stream.
ZegoCanvas *playCanvas = [ZegoCanvas canvasWithView:self.remotePlayView];
playCanvas.viewMode = ZegoViewModeAspectFill;
NSString *playStreamID = self.playStreamIDTextField.stringValue;
[[ZegoExpressEngine sharedEngine] startPlayingStream:playStreamID canvas:playCanvas];Stop sharing
Users can call the stopCapture interface to stop sharing.
[source stopCapture];Destroy screen capture source object
When you no longer need to use the screen capture functionality, you can call the destroyScreenCaptureSource interface to destroy the screen capture source object.
[engine destroyScreenCaptureSource:source];More Features
Border
When sharing the screen, you can call the enableHightLight interface to enable borders for the screen region or window, and set the border color and width.
ZegoLayerBorderConfig *config = [[ZegoLayerBorderConfig alloc] init];
// Border color, format is 0xRRGGBB, default is green 0x00FF00
config.color = 0x00FF00;
// Border size, default value is 4, maximum value is 100
config.width = 4;
[source enableHightLight:true config:config];