Unirse a una sesión

En esta guía aprenderás a conectar tu aplicación a una sesión de vídeo.

Requisito previo

Necesitarás una cuenta de Video API de Vonage válida, si no la tienes puedes regístrese para una prueba gratuita.

También debe asegurarse de que dispone de creado una sesión y ha generado una ficha para todos los usuarios implicados.

Inicialización de un objeto Session

Antes de poder conectarse a una sesión, deberá instanciar un objeto de sesión utilizando cualquiera de los métodos SDK de cliente disponibles.

Instancie un objeto Session llamando a la función OT.initSession() con su ID de aplicación y el ID de sesión correspondiente:

// Replace with your application ID and session ID:
var session = OT.initSession(applicationId, sessionId);

En OT.initSession() devuelve un objeto Session, a través del cual se realizan las siguientes llamadas a la API.

Tenga en cuenta que llamar a la función OT.initSession() no crear una sesión; crea un objeto JavaScript Session, que representa una sesión existente. Puede crear una sesión utilizando el SDK del lado del servidor. Véase Crear una sesión.

Si el navegador del usuario no es compatible con WebRTC, la llamada a OT.initSession() hace que la página muestre un mensaje al usuario. Para comprobar la compatibilidad con WebRTC y evitar que se muestre este mensaje, puede llamar a la función OT.checkSystemRequirements() antes de llamar al método OT.initSession():

if (OT.checkSystemRequirements() == 1) {
  var session = OT.initSession(applicationId, sessionId);
} else {
  // The client does not support WebRTC.
  // You can display your own message.
}

Conectarse a una sesión

Una vez que se tiene un ID de sesión y se ha inicializado un objeto de sesión con él, el siguiente paso es conectarse a la sesión.

Aprenda a conectarse a las sesiones a continuación seleccionando la plataforma/idioma de su elección:

Cuando agregas un componente OTSession, éste se conecta automáticamente a la sesión de la Video API de Vonage.

<OTSession
  applicationId="your-application-ID"
  sessionId="your-session-id"
  token="your-session-token"
>
  <OTPublisher/>
  <OTSubscriber/>
</OTSession>

Sustituir your-application-ID, your-session-idy your-session-token con su Clave API, a ID de sesióny un ficha para la sesión.

Tenga en cuenta que se añade el OTPublisher y OTSubscriber componentes e hijos del OTSession componente.

Puede pasar un error y sessionConnected controladores de eventos en el OTSession componente. El manejador de eventos de error es llamado si el cliente falla al conectarse a la sesión. Y el sessionConnected cuando el cliente se conecta a la sesión:

<OTSession
  applicationId="your-application-ID"
  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>

Desconectarse de una sesión

Aprende a desconectar a un usuario de una sesión.

El cliente se desconecta de la sesión cuando desmontas el OTSession componente.

Detección de conexión y desconexión de clientes

Aprenda a detectar cuándo un cliente se conecta y se desconecta de una sesión.

En OTSession envía un connectionCreated cuando un nuevo cliente (excluido el suyo) se conecta a la sesión. El objeto OTSession envía un evento connectionDestroyed cuando otros clientes abandonan la sesión. Estos eventos están definidos por la directiva ConnectionEvent que tiene una clase connection que es un objeto Connection para la conexión (creada o destruida) relacionada con el evento:

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
  applicationId={this.apiKey}
  sessionId={this.sessionId}
  token={this.token}
  eventHandlers={this.sessionEventHandlers}
>
    {/* ... */}

Detección de desconexión

Se configura un EventListner para ejecutar una función si un usuario se desconecta de una sesión.

Por ejemplo, la función puede notificar al usuario cada vez que pierda la conexión y deje de estar conectado a la sesión.

Cuando el cliente se desconecta de una sesión, el OTSession envía un sessionDisconnected evento:

<OTSession
  applicationId="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>

Reconexión automática

Los clientes intentarán volver a conectarse automáticamente a una sesión que desconecten de forma inesperada (por ejemplo, debido a una caída en la conectividad de la red).

No necesitas añadir ningún código para que los clientes se reconecten automáticamente, a menos que quieras responder a los eventos enviados cuando tu cliente se desconecta y se reconecta.

Los clientes intentarán reconectarse automáticamente a una sesión que desconecten inesperadamente (por ejemplo, debido a una caída en la conectividad de la red). No es necesario añadir ningún código para que los clientes se vuelvan a conectar automáticamente, a menos que desee responder a los eventos enviados cuando su cliente se desconecta y se vuelve a conectar.

Cuando se interrumpe la conexión y el cliente intenta volver a conectarse, la función OTSession envía un sessionReconnecting evento. Cuando se restablece la conexión, el Session envía un sessionReconnected. Si el cliente no puede restablecer la conexión, se desconecta de la sesión y el objeto Session envía el comando sessionDisconnected.

En respuesta a estos eventos, tu aplicación puede (opcionalmente) mostrar notificaciones en la interfaz de usuario indicando los estados de desconexión temporal, reconexión y desconexión:

<OTSession
  applicationId={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.
    },
  }
>
    {/* ... */}

Cuando su cliente se desconecta temporalmente de una sesión, los objetos Subscriber de los clientes suscritos a un flujo que usted publica envían eventos cuando su flujo publicado cae y cuando (y si) se reanuda automáticamente. Para más información, consulte Reconexión automática.

Resolución de problemas de conexión de sesión (JavaScript)

En Session.connect() tiene una función de devolución de llamada a la que se le pasa un parámetro opcional error parámetro. Si este parámetro está presente y definido (no null o undefined), entonces hubo un error al conectarse. Buscar este error en su código le ayudará a descifrar por qué el usuario final no pudo conectarse:

session.connect(token, function(err) {
  if (err) {
    // handle error
  } else {
    // connection succeeded
  }
});

Un gran número de errores que aparecen al intentar conectarse se deben a tokens no válidos o caducados.

Otra razón común por la que falla la conexión a una sesión es debido a la conexión a Internet del usuario final. Ejemplos de ello son:

  • El usuario final ha perdido su conexión a Internet
  • El usuario final tiene los puertos comunes bloqueados porque está en una red restrictiva.

Esto dará lugar a un error con el código 1006. Te recomendamos que manejes esto usando el código que se muestra a continuación. Otras razones por las que falla la conexión a una sesión incluyen que los servidores de video de Vonage estén caídos o que haya ocurrido algún tipo de error inesperado (como un error de nivel 500 en el servidor). Si bien esto no sucede con frecuencia, es una buena práctica manejar estos errores.

Si sigues estas instrucciones tu código de gestión de errores debería ser algo parecido a:

session.connect(token, function(err) {
  if (err) {
    if (err.name === "OT_NOT_CONNECTED") {
      showMessage('Failed to connect. Please check your connection and try connecting again.');
    } else {
      showMessage('An unknown error occurred connecting. Please try again later.');
    }
  }
});

Puede perder la conexión después de haberse conectado con éxito a una Sesión. Puede manejar este caso escuchando el comando sessionDisconnected con el motivo "networkDisconnected":

session.on({
  sessionDisconnected: function(event) {
    if (event.reason === 'networkDisconnected') {
      showMessage('You lost your internet connection.'
        + 'Please check your connection and try connecting again.');
    }
  }
});

Solución de problemas de conexión de sesión (React Native)

Un gran número de errores que aparecen al intentar conectarse se deben a tokens no válidos o caducados. Asegúrese de seguir las prácticas recomendadas para los tokens que se describen a continuación. aquí.

Otra razón común por la que falla la conexión a una sesión es debido a la conexión a Internet del usuario final. Ejemplos de ello son:

  • El usuario final ha perdido su conexión a Internet
  • El usuario final tiene los puertos comunes bloqueados porque está en una red restrictiva.