Handle a Remote Stream

The React Native SDK provides the following methods to handle a remote stream:

Subscribe to a Remote Stream

Users must subscribe to the streams individually to receive media streams of other participants connected to a room. Unless a stream is not subscribed, the user will not receive anything.

When a new stream is added to a room, the streamAdded callback is received with the stream object. To receive the stream, the user must subscribe to it by using the Enx.subscribe() method.

Method: Enx.subscribe(remoteStreamID, Callback)

Parameters

ParameterData TypeDescription
remoteStreamIDStringThe remote stream object to subscribe.
CallbackStringError in subscription.

Callback: streamSubscribed: JSON Object. The user is notified that the stream has been subscribed.

Sample Code

/ You are notified about new Stream in Room
streamAdded:event=>{	// Subscribe Stream
	Enx.subscribe(event.streamId,error=>{
		
	});
}


streamSubscribed :event=>{
    // Stream is subscribed 
}

Note: User must not subscribe to their local streams. EnableX does not return the audio and video of local streams. For more information, see Active Talkers. However, users receive their own screen sharing and canvas streaming as a publisher.

Handle Active Talkers

During a multi-party video conference, additional server and client endpoint resources are consumed. Therefore, EnableX sends only 6 streams of actively talking (generating sound) users in a room to each endpoint. Additionally, it sends 2 streams: screen sharing (Stream# 11) and canvas stream (Stream# 21) to the endpoints.

On getting connected to a room, your client endpoint receives the streamAdded callback for all the streams (6+2) available in the room. You need to subscribe to each of these streams. Subsequently, EnableX sends out the updated Active Talkers list to each endpoint when there is a change in this list. This list is available in the JSON format and sent through the activeTalkerList callback. The list has active talkers in ascending order, that is, the latest talker is listed at the top of the list. Therefore, you can expect to receive this event frequently in a noisy room.

CallbackDescription
activeTalkerListIncludes the JSON shown below.
{    "active" : true,
      "activeList": [
           {   "clientId" : "String", 
               "mediatype" : "audiovideo", // Enum: audiovideo, audioonly
               "name" : "String",
               "reason" : "user",
               "streamId" : Number,
               "videoaspectratio" : "16:9", 
               "videomuted" : Boolean
           }
       ]
   }

The Active Talkers JSON is used for managing the UI and playing audio and video streams from remote users. To play a specific stream, a user needs the remote stream object related to the streamId of a talker. Note that before playing a stream from the Active Talkers list, a user must have subscribed to all "dummy" streams received through the streamAdded callback.

Sample Code

activeTalkerList: event => {
	var tempArray = [];
        tempArray = event;
   	if (tempArray.length > 0) {
		this.setState({activeTalkerStreams: tempArray});
        }
	return (
	      <View>
		{this.state.activeTalkerStreams.map(function(element, index) {
		    return (
		      <EnxPlayerView key={String(element.streamId)}
			streamId={String(element.streamId)}
			style={{ width: width, height: height }}/>
		    );
		})}
	      </View>
	);
}

Note: The local stream is not included in the Active Talkers JSON list sent to an endpoint even if the endpoint is talking. Hence the Active Talker JSON list sent to each endpoint varies. A local stream must be used by a user to play the user's own stream.

Get The Maximum Permissible Talker Count

To know the maximum permissible Active Talkers you may receive and set, use the Enx.getMaxTalkers() method.

Method: Enx.getMaxTalkers()

Callback: getMaxTalkersResponse

Sample Code

Enx.getMaxTalkers();


getMaxTalkersResponse : event{
     // event: { "result": 0, "numTalkers": 6 } 
}

Get The Talker Count

It may be necessary to know the number of talkers that are expected to be received with the activeTalkerList callback, that is, to know either the preset value of talkers or a custom value in effect specified by the application developer or opted by the endpoint user.

Method: Enx.getTalkerCount()

Callback: getTalkerCountResponse

Sample Code

Enx.getTalkerCount();


getTalkerCountResponse : event{
     // event: { "result": 0, "numTalkers": 6 } 
}

Set The Talker Count

EnableX sets a maximum of 6 active talkers in the Active Talkers list with the activeTalkerList callback. However, you may opt to receive fewer talkers at a client endpoint if required. This may either be a predefined value, r set at runtime in a connected session. If required, you can create a UI for the connected user to opt for the number of active talkers that the user wants to receive.

Method: Enx.setTalkerCount(numTalkers)

Parameter: numTalkers: Numeric. The number of talkers you want to receive. The allowed range is between 0-6. Set it to any number between 1 to 6 to receive those many talkers in the list.
Setting it to 0 (zero) does not make the list empty. Instead, you will receive 3 audio streams but no video streams are carried.

Callback: setTalkerCountResponse: JSON Object. Receive a notification about the number of talkers.

Sample Code

Enx.setTalkerCount(4);


setTalkerCountResponse : event{
     // event: { "result": 0, "numTalkers": 4 } 
}
Handle a Local StreamPlay a Stream