Managing Streams React Native

Detecting when a stream's video dimensions change

A stream's video dimensions can change if a stream published from a mobile device resizes, based on a change in the device orientation. It can also occur if the video source is a screen-sharing window and the user publishing the stream resizes the window that is the source for the stream.

When a stream's video dimensions change, the Session object dispatches a streamPropertyChanged event, with the changedProperty property of the event set to "videoDimensions".

Setting the preferred frame rate and resolution

When subscribing to a stream that uses the scalable video feature, , you have an option to set preferredResolution to "auto" to automatically manage Subscriber video resolution based on the size being rendered to optimize the network and CPU usage.For advanced users, you can also manually set the preferred frame rate and resolution for the stream the subscribing client receives from the Media Router. You can set these as the preferredFrameRate and preferredResolution properties of the options you pass into the Session.subscribe() method.

We recommend setting preferredResolution to "auto". With the "auto" setting, OpenTok.js selects the preferred resolution based on the dimensions of the Subscriber video in the browser. You can also set the preferred frame rate and resolution after subscribing to a stream (See Subscriber.setPreferredFrameRate() and Subscriber.setPreferredResolution().)

• preferredFrameRate — The preferred frame rate, in frames per second. Valid values are are 30, 15, 7, and 1. Leave this undefined to remove the preferred frame rate, and the client will use the highest frame rate available.

• preferredResolution — The preferred resolution. Valid values are "1280x720", "640x480", and "352x288". Leave this undefined to remove the preferred resolution, and the client will use the highest frame rate available.

Detecting when streams leave a session

When a stream, other than your own, leaves a session the OTSession object dispatches a streamDestroyed event:

The streamDestroyed event object has the following properties that define the stream:

• connection — An object corresponding to the connection that is publishing the stream. This includes a data property that includes connection data (if any was set) for the client.

creationTime —The timestamp (a number) for the creation of the stream. This value is calculated in milliseconds.

hasAudio —(Boolean) Whether the stream has audio. This property can change if the publisher turns on or off audio. When this occurs, the OTSession object dispatches a streamPropertyChanged event.

name —(String) The name of the stream, if one was set when the stream was published.

videoDimensions—This object has two properties: width and height. Both are numbers. The width property is the width of the encoded stream; the height property is the height of the encoded stream. (These are independent of the actual width of Publisher and Subscriber objects corresponding to the stream.) This property can change if a stream published from a mobile device resizes, based on a change in the device orientation.

• videoType —The type of video: either "camera" or "screen". A "screen" video uses screen sharing on the publisher as the video source. This property can change if the published stream changes from a camera to a screen-sharing video source. For more information. The hasAudio, hasVideo, videoDimensions, and videoType properties can change (for example, when the publisher turns on or off video). When this occurs, the OTSession object dispatches a streamPropertyChanged event.

Unsubscribing from a stream

Subscribers are automatically destroyed when the publishing client stops publishing. To stop subscribing to an ongoing stream, unmount the corresponding OTSubscriberView component from the OTSubscriber component. See Custom rendering of subscribers.

Custom rendering of subscribers

By default, the OTSubscriber adds child views for subscriber videos. However, you can add a render function to add the OTSubscriber object to add subscribers. The function is passed an array of stream IDs:

Use the OTSubscriberView component to render individual streams. The OTSubscriberView component inherits the props (such as style) from the React Native View component. Additionally, it has a streamId prop that you use to pass in the stream ID for the subscriber's stream.

Note: The streamProperties prop of the OTSubscriber object is ignored if these child OTSubscriberView components are added.

Setting stream properties

Pass in a properties prop for the OTSubscriber object to set properties for all subscribers:

Alternately, you can set the streamProperties OTSubscriber prop to a object that defines individual settings for each stream. The object's properties are a key-value pairs, with the stream ID as the key, and the value set to an object with subscribeToAudio, subscribeToVideo, subscribeToCaptions, preferredResolution, preferredFrameRate, and audioVolume overrides for the subscriber to the stream:

The properties object includes the following properties:

• subscribeToAudio — (Boolean) Whether to subscribe to audio.
• subscribeToVideo — (Boolean) Whether to subscribe to video.
• subscribeToCaptions — (Boolean) Whether to subscribe to captions.
• preferredResolution — (String) The preferred resolution. See Setting the preferred frame rate and resolution.
• preferredFrameRate — (Number) The preferred frame rate. See Setting the preferred frame rate and resolution. audioVolume — (Number) The audio volume, from 0 to 100.