Suggestions

close search

Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs

Visit the Vonage API Developer Portal

Screen sharing — React Native

You can publish a stream that uses a video view of your screen (instead of a camera) as the source.

A client connected to the session can subscribe to a screen-sharing stream (and view it), just as they would subscribe to a stream that uses a camera as the source.

This topic includes the following sections:

Publishing a stream with a screen-sharing source

To publish a screen-sharing stream, set the videoSource property of the OTPublisher properties prop to "screen": 

<OTPublisher
  properties={{
    videoSource: 'screen',
  }}
/>

The screen-sharing stream will capture video from the entire view of application. For this reason, you may want to disable subscribers in the local client when publishing a stream-sharing stream (to prevent them from appearing in the published stream).

For more details on publishing, see this developer guide.

Subscribing to screen-sharing streams

You can subscribe to a stream that uses a screen-sharing video source in the same way that you subscribe to a stream that uses a camera as the source. See Subscribing to streams.

You can detect that a stream is a screen-sharing stream, by checking the videoType property of the event object in the OTSession streamCreated event. For a screen-sharing stream, this property is set to "screen":

<OTSession
  apiKey="the API key"
  sessionId="the session ID"
  token="the token"
  eventHandlers={{
    streamCreated: event => {
      console.log(event.videoType, 'stream created', event.streamId);
    }
  }}>
  { /* ... */ }
</OTSession>

The OTSession object dispatches a streamPropertyChanged event when the dimensions of another client's stream changes. This can happen when the publishing client resizes a window being shared (such as a browser window in an app using the Vonage Video web client SDK). The changedProperty property of the event object is set to "videoDimensions". The stream.height and stream.width property of the event object are the new width and height of the video.

<OTSession
  apiKey="the API key"
  sessionId="the session ID"
  token="the token"
  eventHandlers={{
    streamPropertyChanged: event => {
      console.log(event.stream.streamId, 'stream property', event.changedProperty, 'changed:', event.stream.height, event.stream.width);
    }
  }}>
  { /* ... */ }
</OTSession>

You may use the video dimensions and videoType details for streams to adjust the size or dimensions of their corresponding subscribers in the UI. For details on customizing the layout of subscribers in the UI, see Subscribing to streams.

Optimizing video perfomance of certain screen-sharing streams

You can set a video content hint to improve the quality and performance of a screen-sharing video that will primarily contain either text or video content. For details, see Setting video content hints to improve video perfomance in certain situations.