Room Connection

The React Native SDK provides the following methods for room connection:

• initRoom(): To initiate a room.
• joinRoom(): To connect and join a room.
• disconnect(): To disconnect from a room.

Initiate a Room

To establish a session, a client endpoint application needs to use the React Native toolkit to connect to a virtual room hosted on the EnableX platform. The process starts with initializing a room object using the EnxRoom class. The Enx.initRoom() method is used to initiate a room.

Method: initRoom()

Sample Code

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

Join a Room with a Stream

Connecting to a room and joining it is a complex chain of events. You must ensure that the previous event has succeeded to proceed to the next event. Once connected to a room, a bidirectional communication channel is established between the endpoint and the EnableX server over a web socket. The socket events are leveraged for communication. The communication fails if a network issue disconnects the web socket.

Joining a room involves the following steps:

1. Initiate a room and connect to the room.
2. Initiate a stream.
3. Publish a stream.

The Enx.joinRoom() method handles all the complexities of connecting and joining a room. If a connected web socket is disconnected due to network issues, EnableX supports automatic reconnection to the session for disconnected endpoints, ensuring a better user experience.

Method: joinRoom()

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

Sample Code

<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 endpoint can disconnect itself from a room to close its session. The disconnected endpoint immediately loses media and signaling socket. Once the endpoint is disconnected, the toolkit receives the roomDisconnected callback for you to handle the UI. Also, the userDisconnected callback is sent to all the users of the connected session to update the status of their UI.

Method: Enx.disconnect()

Observers

Sample Code

Enx.disconnect();

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

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

Handle Disconnection, Interruption, and Re-Connection

A client endpoint is connected to EnableX over a secured web socket. A connected endpoint might get disconnected from EnableX due to network issues. When this occurs, the endpoint is notified with connectionLost and connectionInterrupted events.

Callbacks

Sample Code

connectionLost: event => {
	// event - connection disconnected
	// lost connectivity
}

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

If an endpoint is disconnected from a session, EnableX supports automatic reconnection to the session ensuring a better user experience. To use the automatic reconnection feature, you must join the room with Re-Connection options.

Note: Automatic reconnection is not applicable when:

• The last participant has disconnected from the adhoc room.
• The moderator has dropped the participant from the room.
• The participant has explicitly disconnected from the room.

Callbacks

Sample Code

reconnect: event => {
	// event - reconnecting...
}

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

Handle Network Bandwidth Issues

A client endpoint experiencing bandwidth throttling issues can affect publishing and receiving of remote streams and their quality. EnableX provides callbacks to notify endpoints of such events so that end users can be appropriately notified.

Callbacks

Sample Code

// 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; 
	} */
}