Screen Share

React 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

Adding activity to AndroidManifest.xml Add HmsScreenshareActivity to manifest located at android/app/src/main/AndroidManifest.xml.

<activity
  android:name="com.reactnativehmssdk.HmsScreenshareActivity"
  android:label="@string/app_name" />
 

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 xed ios.

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.

Select the Broadcast Upload Extension type for your new target.

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

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

Step 3 - Add App Group

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

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

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

Step 4 - Edit Podfile

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

target 'RNHMSExampleBroadcastUpload' do
  use_modular_headers!
  pod 'HMSBroadcastExtensionSDK'
end
 

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

Step 5 - Edit SampleHandler

Expand Runner > ExtensionName and open SampleHandler file.

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: "group.reactnativehms")

    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.

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

const hmsInstance = await HMSSDK.build({
    appGroup: 'group.reactnativehms',
    preferredExtension: 'RHHMSExampleBroadcastUpload',
});
 

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

Following is the snippet on how to use this:

// hms instance acquired from build method
await hmsInstance?.startScreenshare()
    .then(d => console.log('Start startScreenshare Success: ', d))
    .catch(e => console.log('Start startScreenshare Error: ', e));
 

How to stop screenshare from the app

To start screen share, application needs to call the stopScreenshare method of HMSSDK. Following is the snippet on how to use this:

// hms instance acquired from build method
await hmsInstance?.stopScreenshare()
    .then(d => console.log('Stop Screenshare Success: ', d))
    .catch(e => console.log('Stop Screenshare Error: ', e));
 

How to get Screen Share Status

Application needs to call the isScreenShared 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.

// hms instance acquired from build method
await hmsInstance?.isScreenShared()
    .then(d => console.log('Is Screenshare Success: ', d))
    .catch(e => console.log('Is Screenshare Error: ', e));
 

How to display screenshare tracks

You can get screenshare track in two ways, one from onTrackListener when the track is added and other from peer's auxiliaryTracks.

Get screenshare track directly from onTrackListener and display it.

const HmsView = hmsInstance?.HmsView;
const peerTrackNodes = [];

// Get screenshare track from onTrackListener
const onTrackListener = ({
  peer,
  track,
  type,
}: {
  peer: HMSPeer;
  track: HMSTrack;
  type: HMSTrackUpdate;
}) => {
  if(type === HMSTrackUpdate.TRACK_ADDED && track.source === HMSTrackSource.SCREEN && track.type === HMSTrackType.VIDEO){
    peerTrackNodes.push({
      id: peer.peerID + track.trackId,
      peer,
      track,
    })
  }
};

<HmsView trackId={peerTrackNodes[0]?.trackId} />
 

The peer's ScreenShare video is in the peer.auxiliaryTracks which is of type HMSTrack[].

const HmsView = hmsInstance?.HmsView;
const peerTrackNodes = [];

// Get screenshare track from peer
const auxiliaryTracks = hmsInstance?.remotePeers[0]?.auxiliaryTracks

auxiliaryTracks?.map(track => {
  if(track.source === HMSTrackSource.SCREEN && track.type === HMSTrackType.VIDEO){
    peerTrackNodes.push({
      id: peer.peerID + track.trackId,
      peer,
      track,
    })
  }
});

<HmsView trackId={peerTrackNodes[0]?.trackId} />