Room Connection: React Native SDK – Video API

Table of Contents

Initiate a Room

React Native Toolkit is used by the Client End Point Application to connect to the Virtual Room hosted at EnableX to establish a session. The process starts with initializing a Room Object using the EnxRoom Class. The Enx.initRoom() is used to initiate a Room.

Method: initRoom()

async componentWillMount() {
     Enx.initRoom();
}

Join a Room with Stream

Connecting and joining a Room is a complex chain of events. You will need to ensure the previous event succeeded in order to proceed to the next event. When connected, a Bi-Directional Communication Channel will be established between the End Point and EnableX Server over a Web Socket. Both entities communicate with each other using Socket Events. Communication would fail if any network issue disconnects the Web Socket. ‘

The following basic steps are required to join room successfully

  • Initiate Room & Connect
  • If connected, initiate Stream.
  • Publish Stream

Enx.joinRoom() method comes as a handy tool for developer. It handles all complexities of connecting and joining the room.

A connected Web Socket might get disconnected due to network issues. For disconnected end-points, EnableX supports Auto Re-connection to the Session ensuring better user experience.

Tag: <EnxRoom token=TokenProps eventHandlers=EventProps localInfo=publishStreamProp roomInfo=roomInfo advanceOptionsInfo=advanceOptions>

Props:

  • token – JWT Token received through Server API Call
  • eventHandlers –
    • roomConnected – To the end-point when its connected to Room
    • roomError – To the end-point when it fails to connect to Room
    • userConnected – To notify all connected users that a new user is connected to Room
    • activeTalkerList – To the end-point with list of Talkers after few seconds of receiving roomConnected event. Refer how to handle Active Talkers
  • localInfo – Stream Initialization Meta Info – Optional
  • roomInfo – Optional. JSON with Reconnection Options. JSON keys explained below:
    • allow_reconnect Boolean. Default: true. Whether to enable Auto-Reconnect feature. If you set to false, Client End Point will not try reconnecting to EnableX
    • number_of_attempts String. Min Value: 1. Max Value: Not specified, use any number. Default: 3. Maxi number of times Client End Point tries to reconnect to EnableX
    • timeout_interval String. Timeout Interval in Millisecond to wait before attempting reconnect
  • advanceOptions – Optional. JSON with Advance Options. JSON Keys explained below:
    • battery_updates – Boolean. Pass true to receive battery updates/information
    • notify_video_resolution_change – Boolean. Pass true to receive Video Resolution Change Information
<EnxRoom
          token={this.props.token}
          eventHandlers={this.roomEventHandlers}
          localInfo={this.state.publishStreamProp}
          roomInfo={this.state.enxRoomInfo}
          advanceOptionsInfo={this.state.advanceOptions}
> 

publishStreamProp: {
	audio: true,	 
	video: true,	 
	data: true
}

enxRoomInfo: {
	allow_reconnect: true,
	number_of_attempts: "3",
	timeout_interval: "15"
} 

advanceOptions: {
	battery_updates: true,
	notify_video_resolution_change: true
} 


this.roomEventHandlers={
	roomConnected:event=> {
		// Connected. event receives Room Meta JSON
	},
	roomError:event=>{
		// Connection failed. Find error
	},
	userConnected:event=>{
		// A new user connected. user JSON has user information
	},
	activeTalkerList:event=>{
		// List of talkers in the Room
		// Received after room-connected
	}
}

Disconnect from a Room

A Client End Point can disconnect itself from the room to close its session. A disconnected End-Point will loose media and signalling socket immediately.

Once disconnected, the Toolkit will receive callback roomDisconnected  for you to handle UI. Also, all connected users of the session will receive callback userDisconnected so that they all can update the status of their UI.

Method: Enx.disconnect() – Without any parameter

Observers:

  • roomDisconnected  – To the user who is disconnected
  • userDisconnected  – To all other connected users
Enx.disconnect();

roomDisconnected:event=>{
     // You are disconnected
}

userDisconnected: event=>{
     // Notifies all about one disconnected user
     // event - Information of disconnected user
}

Handle Disconnection, Interruption & Re-Connection

A Client End Point is connected with EnableX over Secured Web Socket. A connected End Point might get disconnected from EnableX due to network issues. The End Point gets notified with an event connectionLost and connectionInterrupted.

Callbacks:

  • connectionLost – When network connection is lost
  • connectedInterrupted – When network connection is interrupted, e.g. switched from 4G to Wife and vice versa
connectionLost: event => {
	// event - connection disconnected
	// lost connectivity
}

connectionInterrupted: event => {
	// event - connetion is interrupted 
	// network changed. e.g. switched between WiFi, 4G 
}

For disconnected end-points, EnableX supports Auto Re-connection to the Session ensuring better user experience. To use Automatic Re-Connection feature, you must join Room with Re-Connection options. Note that Auto-Re-Connect doesn’t work when:

  • Last Participant disconnected from Adhoc Room
  • User is dropped from Room by Moderator
  • User disconnects explicitly

Callbacks:

  • userReconnect – When End-Point successfully gets reconnected with EnableX
  • reconnect – When End-Point attempts to reconnect 
reconnect: event => {
	// event - reconnecting...
}

userReconnect: event => {
	// event - reconnected
}

Handle Network Bandwidth Issues

A Client End Point might experience Bandwidth throttling issues that might affect publishing and receiving remote stream and their quality. EnableX provides callbacks to notify such events to End-Point so that end-user can be notified.

Callbacks:

  • bandWidthUpdated – To notify significant change in available bandwidth affecting publishing and receiving remote streams.
  • shareStateEvent – To notify significant change in available bandwidth affecting publishing and receiving of screen share.
  • canvasStateEvent – To notify significant change in available bandwidth affecting publishing and receiving of canvas streaming. 
// Bandwidth Change affecting Streaming
bandWidthUpdated: event => {
	/* event = 
	 [{	"reason" : "receive bandwidth low", 
		"streamId" : streamId 
	}]  */
}

// Bandwidth Change affecting Screen Share
shareStateEvent: event => {
	/* event = 
	{	reason = bw; 
		streamId = 11; 
		videomuted = 1; 
	} */
}

// Bandwidth Change affecting Canvas Streaming
canvasStateEvent: event => {
	/* event = 
	{	reason = bw; 
		streamId = 21; 
		videomuted = 1; 
	} */
}

← Create Local Stream

Index

Publish Local Stream →