100ms Logo

100ms

Docs

Search docs
/

Screen Share

Flutter SDK provides support for sharing the entire screen of the device to the room.

Please note that for a peer to share their screen, their role must have Screenshare enabled in the dashboard. Also select the appropriate resolution for the Screen share quality. 1080p is recommended for better text readability.

Android Setup

You also need to pass the intent from android native side to HMS SDK in the following way :

In your app's MainActivity add -

import live.hms.hmssdk_flutter.HmssdkFlutterPlugin import android.app.Activity import android.content.Intent import live.hms.hmssdk_flutter.Constants override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) { super.onActivityResult(requestCode, resultCode, data) if (requestCode == Constants.SCREEN_SHARE_INTENT_REQUEST_CODE && resultCode == Activity.RESULT_OK){ HmssdkFlutterPlugin.hmssdkFlutterPlugin?.requestScreenShare(data) } }

DONOT forget to add the permission for foreground service in AndroidManifest.xml

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

iOS Setup

You need to create an iOS broadcast upload extension. It uses Apple's ReplayKit framework to record the device screen and delivers frame samples to your broadcast extension. You can share not only your own app but also the entire device sceeen including other apps on the device.

Step 1 - Open project

Open your iOS Xcode project, such as ios/Runner.xcworkspace for full-Flutter apps.

Step 2 - Add Broadcast Upload Extension

Click on your project in the Project Navigator to show the project settings. Press + at the bottom of the target list to add a new target.

AddExtension

Select the Broadcast Upload Extension type for your new target.

SelectExtension

Enter your new target detail in the dialog. Uncheck Include UI Extension option.

DetailExtension

In the following dialog, activate the new scheme for the new target.

ActivateExtension

Step 3 - Add App Group

Click + icon in Signing & Capabilities section. Select App Group from the list of Capabilities.

AddAppgroup

New section should be added under Signing & Capabilities named App Groups. Click + icon under that.

Appgroup

Enter App group name (create unique app group name ex: group.your.domain.name)

AppgroupDetail

Step 4 - Edit Podfile

In ios folder of your flutter project and open Podfile. Paste the following code and replace the extension name you just created:

target 'Your Extension Name here' do use_modular_headers! pod 'HMSBroadcastExtensionSDK' end

Podfile

In terminal change directory to ios and run pod install command.

Step 5 - Edit SampleHandler

Expand Runner > ExtensionName and open SampleHandler file.

SampleHandler

Replace the code with the code below and pass app group name to the respected field:

import ReplayKit import HMSBroadcastExtensionSDK class SampleHandler: RPBroadcastSampleHandler { let screenRenderer = HMSScreenRenderer(appGroup: "Enter App Group Name") override func broadcastStarted(withSetupInfo setupInfo: [String : NSObject]?) { // User has requested to start the broadcast. Setup info from the UI extension can be supplied but optional. } override func broadcastPaused() { // User has requested to pause the broadcast. Samples will stop being delivered. } override func broadcastResumed() { // User has requested to resume the broadcast. Samples delivery will resume. } override func broadcastFinished() { // User has requested to finish the broadcast. screenRenderer.invalidate() } override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer, with sampleBufferType: RPSampleBufferType) { switch sampleBufferType { case RPSampleBufferType.video: // Handle video sample buffer if let error = screenRenderer.process(sampleBuffer) { if error.code == .noActiveMeeting { finishBroadcastWithError(NSError(domain: "ScreenShare", code: error.code.rawValue, userInfo: [NSLocalizedFailureReasonErrorKey : "You are not in a meeting."])) } } break case RPSampleBufferType.audioApp: // Handle audio sample buffer for app audio break case RPSampleBufferType.audioMic: // Handle audio sample buffer for mic audio break @unknown default: // Handle other sample buffer types fatalError("Unknown type of sample buffer") } } }

How to start screenshare from the app

To start screen share, app needs to call the startScreenshare method of HMSSDK.

Following is the snippet on how to use this:

hmsSDK.startScreenShare(hmsActionResultListener: hmsActionResultListener);

To start screen share in iOS you need to pass App Group and Extension name to HMSSDK as follows:

HMSSDK(appGroup: "group.name", preferredExtension: "your.extension.name")

You can find app group and extension name in Xcode under Signing and Capabilities section under target > yourExtensionName.

parameter

How to get Screen Share Status

Application needs to call the isScreenShareActive method of HMSSDK.

This method returns a Boolean which will be true inscase ScreenShare is currently active and being used, and False for inactive state.

hmsSDK.isScreenShareActive();

To start Screen share in iOS you need to pass appGroup and preferred Extension name to HMSSDK:

HMSSDK(appGroup: appGroup, preferredExtension: preferredExtension);

How to stop screenshare

To stop the screenshare, you need to invoke stopscreenShare method of HMSSDK

Following is the snippet on how to use this:

hmsSDK.stopScreenShare(hmsActionResultListener: hmsActionResultListener);

How to display screenshare in apps

Screenshare track can be differentiated from normal video track using track's source property as track.source == "SCREEN" for screenshare tracks

Screenshare tracks can be found in two ways, from onTrackUpdate when the track is added and other from peer's auxiliaryTracks.

Screenshare track from onTrackUpdate

Get screenshare track directly from onTrackUpdate and display it as below:

void onTrackUpdate( {required HMSTrack track, required HMSTrackUpdate trackUpdate, required HMSPeer peer}) { switch (update) { case HMSTrackUpdate.trackAdded: if (track.source == "SCREEN") { //This track is a screenshare track and can be rendered using HMSVideoView as HMSVideoView(track:track); } } }

Screenshare track from auxiliaryTracks

The peer's screenshare can also be found in auxiliaryTracks property of peer. auxiliaryTracks is of type List<HMSTrack>?.

To get screenshare track from auxiliaryTracks the implementation is as follows:

HMSTrack? screenShareTrack = peer.auxiliaryTracks?.firstWhere((track) => track.source == "SCREEN"); if(screenShareTrack != null){ //The user is sharing the screen and has screenshare track. HMSVideoView(track: screenShareTrack); }