Suggestions

Searching ...

Using a session ID and token, you can connect to a Vonage Video session using the Vonage Video React Native SDK.

This topic includes the following sections:

• Connecting to a session
• Disconnecting from a session
• Detecting when you have disconnected from a session
• Automatic reconnection
• Detecting when clients have connected and disconnected
• Troubleshooting session connection issues

For information on creating a session ID and an authentication token, see Session Creation and Token Creation.

Connecting to a session

When you add an OTSession component it automatically connects to the Vonage Video API session.

<OTSession
  apiKey="your-api-key"
  sessionId="your-session-id"
  token="your-session-token"
>
  <OTPublisher/>
  <OTSubscriber/>
</OTSession>

Replace your-api-key, your-session-id, and your-session-token with your OpenTok project API key, an OpenTok session ID, and a token for the session.

Note that you add the OTPublisher and OTSubscriber components and children of the OTSession component.

You can pass an error and sessionConnected event handlers in the OTSession component. The error event handler is called if the client fails to connect to the session. And the sessionConnected event handler is called when the client connects to the session:

<OTSession
  apiKey="your-api-key"
  sessionId="your-session-id"
  token="your-session-token"
  eventHandlers={{
    error: event => {
        console.log('error', event);
      },
    sessionConnected: event => {
      console.log('session connected', event);
    },
  }}
>
  <OTPublisher style={{ width: 100, height: 100 }}/>
  <OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>

Disconnecting from a session

The client disconnects from the session when you unmount the OTSession component.

Detecting when you have disconnected

When your client disconnects from a session, the OTSession component dispatches a sessionDisconnected event:

<OTSession
  apiKey="your-api-key"
  sessionId="your-session-id"
  token="your-session-token"
  eventHandlers={{
    sessionDisconnected: event => {
        console.log('disconnected', event);
      },
    connected: event => {
      console.log('subscriber connected', event);
    },
  }}
>
  <OTPublisher style={{ width: 100, height: 100 }}/>
  <OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>

Automatic reconnection

Clients will attempt to automatically reconnect to a session they disconnect unexpectedly (for example, due to a drop in network connectivity). You do not need to add any code to have the clients reconnect automatically, unless you want to respond to events dispatched when your client disconnects and reconnects.

When the connection is dropped and the client tries to reconnect, the OTSession object dispatches a sessionReconnecting event. When the connection is restored, the Session object dispatches a sessionReconnected. If the client cannot restore the connection, the client disconnects from the session, and the Session object dispatches the sessionDisconnected.

In response to these events, your application can (optionally) display user interface notifications indicating the temporary disconnection, reconnection, and disconnection states:

<OTSession
  apiKey={this.apiKey}
  sessionId={this.sessionId}
  token={this.token}
  eventHandlers={{
    sessionReconnecting: event => {
      // Display a user interface notification.
    },
    sessionReconnected: event => {
      // Adjust user interface.
    },
    sessionDisconnected: event => {
      // Adjust user interface.
    },
  }
>
    {/* ... */}

When your client temporarily disconnects from a session, the Subscriber objects in clients subscribing to a stream you publish dispatch events when your published stream drops and when (and if) it resumes automatically. For more information, see Automatic reconnection in the "Subscribing to streams" developer guide.

Detecting when clients have connected and disconnected

The OTSession object dispatches a connectionCreated event when a new client (excluding your own) connects to the session. The OTSession object dispatches a connectionDestroyed event when other clients leave the session. These events are defined by the ConnectionEvent class, which has a connection object, which is a Connection object for the connection (created or destroyed) related to the event:

let this.connectionCount = 0;
const this.sessionEventHandlers = {
  connectionCreated: function (event) {
    connectionCount++;
    if (event.connection.connectionId != session.connection.connectionId) {
      console.log('Another client connected. ' + connectionCount + ' total.');
    }
  },
  connectionDestroyed: function connectionDestroyedHandler(event) {
    connectionCount--;
    console.log('A client disconnected. ' + connectionCount + ' total.');
  }
  sessionConnected: function (event) {
    // include your own client's connection in the count
    connectionCount++;
  },
};

// reference later in JSX:

<OTSession
  apiKey={this.apiKey}
  sessionId={this.sessionId}
  token={this.token}
  eventHandlers={this.sessionEventHandlers}
>
    {/* ... */}

Troubleshooting session connection issues

A large number of errors that come back when attempting to connect are due to either invalid or expired tokens. Make sure you are following the token best practices outlined here

Another common reason for connecting to a session failing is due to the end user's internet connection. Examples of this include:

• The end user has lost their internet connection

• The end user has common ports blocked because they're on a restrictive network.