Guía para desarrolladores de Vonage Video Express

• Visión general
• Referencia API
• Guía para desarrolladores
• Notas de publicación

Esta guía para desarrolladores ofrece información detallada sobre el uso de Video Express.

• Conceptos básicos
• Interfaz de usuario y diseño
• Compartir pantalla
• Eventos
• Funciones avanzadas
• Utilización de Video Express en el entorno empresarial
• Uso de Video Express en aplicaciones móviles
• Cómo utilizar Video Express con React
• Problemas conocidos y limitaciones

Conceptos básicos

Para ver un ejemplo sencillo de cómo implementar Video Express, consulta Este código de inicio rápido.

Acerca de Video Express

Vonage Video Express es una biblioteca JavaScript para crear rápidamente una aplicación web de videoconferencia multipartita. Funciona sobre OpenTok.js, la Video API de Vonage para aplicaciones web. de Vonage.

Configurar un Video Express habitación, basada en una sesión de la Video API, para permitir que se conecten varios clientes web.

Video Express incluye lo siguiente:

• A gestor de diseñoque se encarga de organizar los elementos de vídeo en la página HTML

• Un gestor de calidad que optimiza continuamente la resolución de la transmisión y la frecuencia de fotogramas, reduciendo así el consumo de ancho de banda del cliente.

• Un gestor de experiencias que establece dinámicamente la prioridad de los oradores y silencia automáticamente a los que se unen a la reunión. para reuniones grandes (véase Detección de altavoces activos).

• Un Room Manager, que gestiona la interacción de bajo nivel con WebRTC y ofrece primitivas de alto nivel con las que es más fácil construir. con las que es más fácil construir.

Importante: Antes de utilizar Video Express, asegúrate de activar el complemento de Video Express en tu Account.

1. Vaya a su Video API Account y haga clic en Configuración de la cuenta en el menú de la izquierda.
2. En la lista de Complementos de la cuentaencuentra Vídeo exprés y haga clic en Añadir a la cuenta. A continuación, sigue el resto de instrucciones para activar el complemento.

Cargando la biblioteca de Video Express

Video Express está disponible como módulo de Node en npmjs.com:

También puede cargar la biblioteca Video Express utilizando un script en una página HTML:

<script src="https://static.opentok.com/v1/js/video-express.js"></script>

Actualmente, Vonage Video Express no incluye una interfaz de usuario predeterminada. Por lo tanto, tendrás que añadir CSS para aplicar estilos a los componentes de la sala en tu aplicación:

Para empezar, copie el archivo video-express-styles.css archivo e inclúyelo en el head sección de la página utilizando Video Express:

<link rel="stylesheet" href="/path/to/video-express-styles.css" media="screen" charset="utf-8">

Unirse a una sala y publicar una transmisión de cámara

Llame al Room para unirse a una sala de vídeo exprés

const room = new VideoExpress.Room({
  apiKey: '44444444',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbG...',
});

El apiKey, sessionIdy token son la clave API de tu proyecto de Video API, un ID de sesión para la sala y un token. El token debe incluir el rol «publisher». Puedes obtener la clave API en la página de tu cuenta de Video API. Crea los ID de sesión y los tokens utilizando los SDK de servidor de OpenTok. Consulta

A continuación se crea una instancia de Sala (con todos los parámetros)

const room = new VideoExpress.Room({
  apiKey: "44444444",
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbG...",
  roomContainer: "roomcontainer",
  managedLayoutOptions: {
    layoutMode: "active-speaker",
    cameraPublisherContainer: "cameraPublisherContainerDiv",
    screenPublisherContainer: "screenPublisherContainerDiv",
  }
});

Lo siguiente instancia una instancia de Sala pero excluye la cámara y el editor de pantalla compartida contenedores:

const room = new VideoExpress.Room({
  apiKey: "44444444",
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbG...",
  roomContainer: "roomcontainer",
  managedLayoutOptions: {
    layoutMode: "active-speaker",
  }
});

Cuando el cliente entra en la sala, el objeto Room envía un comando connected evento:

room.on('connected', () => {
  console.log('Connected');
  // Can use this event to update visual indicator for connection status
});

Véase Eventos Para obtener más información sobre el modelo de eventos de Video Express.

Al unirse a una sala, Video Express crea un emisor de cámara para el cliente. Esto envía el vídeo del cliente a los demás participantes de la sala. Se solicita al usuario que conceda acceso a la cámara y al micrófono. Si el usuario deniega el acceso a la cámara y al micrófono, el cliente se desconecta de la sala, ya que no está permitido unirse a una sala sin publicar una transmisión de cámara.

Importante: Actualmente, Vonage Video Express 1.0 admite hasta 25 participantes simultáneos en una sala. Si añades más de 25 personas a una sesión, deberás asegurarte de que el rendimiento de la red y del hardware de los participantes sea suficiente.

Salir de una habitación

Para salir de la sala, cierre la ventana del navegador o llame al leave() método del objeto Room:

room.leave();

Detección del momento en que el cliente local abandona la sala

El objeto Room envía un disconnected evento cuando el cliente abandona la sala:

room.on('disconnected', (reason) => {
  console.log('disconnected reason: ', reason);
  // Can use this event to update visual indicator for connection status
});

El evento emite reason cadena de caracteres que identifica el motivo por el que el cliente se ha desconectado. Véase la documentación de referencia.

El objeto «Room» distribuye reconnecting y reconnected eventos si el cliente pierde la conexión con la sala y vuelve a conectarse:

// You can use these event to update a UI indicator for connection status
room.on('reconnecting', () => {
  console.log('Temporarily disconnected.');
});

room.on('reconnected', () => {
  console.log('Reconnected.');
});

Detectar cuándo otros clientes se unen a la sala y cuándo la abandonan

El objeto Room envía un participantJoined cuando otro participante (no el usuario local) se une a la sala:

room.on('participantJoined', (participant) => {
  console.log('participant joined: ', participant.name);
});

El evento emite un objeto Participante que identifica al participante que se ha unido. Véase la documentación de referencia.

El objeto Room envía un participantLeft situación en la que un participante (que no sea el usuario local) abandona la sala:

room.on('participantLeft', (participant, reason) => {
  console.log('participant left: ', participant.name);
  console.log('reason: ', reason);
});

El evento emite un objeto Participante que identifica al participante que se fue y un objeto reason cadena de caracteres que indica el motivo por el que el cliente se ha marchado. Véase la documentación de referencia.

Detectar cuándo otros clientes publican transmisiones de cámara

Cuando otros usuarios publican secuencias de cámara, el gestor de maquetación de Video Express añade automáticamente añade automáticamente el vídeo a la página HTML.

Un objeto Participante envía un cameraCreated cuando un participante (no el usuario local) publica un flujo de cámara:

participant.on('cameraCreated', (cameraSubscriber) => {
  console.log('new camera stream for ', participant.name);
});

El evento emite un CámaraSuscriptor objeto. El objeto `CameraSubscriber` incluye métodos para activar y desactivar la reproducción de audio y vídeo en el cliente local (véase Activar y desactivar el audio y el vídeo de un abonado con cámara).

Un objeto Participante envía un cameraDestroyed cuando un participante (no el usuario local) deja de publicar un flujo de cámara:

participant.on('cameraDestroyed', () => {
  console.log('camera destroyed for ', participant.name);
});

Interfaz de usuario y diseño

Video Express incluye un gestor de diseño que organiza automáticamente los elementos de vídeo en el DOM de HTML y adapta el diseño a las pantallas de los dispositivos móviles. El gestor de diseño resalta automáticamente a los participantes activos en una sala. El diseño se ajusta automáticamente para que los participantes activos aparezcan más grandes. El gestor de diseño amplía automáticamente el vídeo compartido en pantalla, si hay alguno.

El gestor de maquetación colocará un vídeo para compartir pantalla en el mosaico más grande de la maquetación, incluso si se aplica el altavoz activo.

Puede ajustar el screenPublisherContainer y cameraPublisherContainer opciones del Room() diseño para que los vídeos publicados por el cliente local (cámara y pantalla compartida) aparezcan fuera de la interfaz de usuario del gestor de maquetación.

En un dispositivo móvil, el gestor de diseño sólo muestra 4 vídeos de cámara. Además, los vídeos de pantalla compartida y altavoz activo ocupan toda la pantalla en un dispositivo móvil. Puede utilizar el participantJoined y participantLeft eventos enviados por el objeto «Room» para que aparezca un indicador personalizado en la interfaz de usuario que muestre el número total de participantes en una sala.

De forma predeterminada, el gestor de maquetación determina automáticamente si un cliente se está ejecutando en un dispositivo móvil, basándose en el agente de usuario del cliente. El managedLayoutOptions del Constructor Room() incluye un deviceLayoutMode propiedad. Establece este valor en "desktop" o "mobile" para establecer explícitamente la disposición del dispositivo.

Opciones de diseño

Hay dos diseños:

• grid — Los vídeos se organizan en una disposición en cuadrícula.

• active-speaker - Un orador activo (el participante que habla en ese momento) se resalta automáticamente en un elemento DOM más grande.

El Room() incluye un constructor managedLayoutOptions parámetro que te permite configurar la disposición al unirte a una sala:

const room = new VideoExpress.Room({
  apiKey: '44444444',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbG...',
  roomContainer: 'roomContainer',
  managedLayoutOptions: {
    layoutMode: 'active-speaker'
  }
});

También puede cambiar el modo de presentación llamando a la función Room.setLayoutMode() método:

room.setLayoutMode('grid'); // Set layout mode to grid
room.setLayoutMode('active-speaker'); // Set layout mode to active-speaker

El managedLayoutOptions del Constructor Room() también incluye una opción deviceLayoutMode propiedad. Establece este valor en "desktop" o "mobile" para configurar explícitamente el diseño del dispositivo. Por defecto, el gestor de diseño determina automáticamente si un cliente se está ejecutando en un dispositivo móvil, basándose en el agente de usuario del cliente.

La opción mediaShutoffThreshold del Constructor Room() establece un umbral para el número actual de participantes en la Sala (al unirse) que evitará que el CameraPublisher del cliente local publique audio y vídeo.

La opción maxVideoParticipantsOnScreen del Constructor Room() establece el número máximo de vídeos CameraSubscriber mostrados en una sala simultáneamente. Esto afecta únicamente a la visualización de vídeos en el cliente local.

Cambiar la cámara y el micrófono utilizados

Configuración de los dispositivos de audio y vídeo del editor de la cámara

// Changes the audio input device
room.camera.setAudioDevice(audioDeviceId);

// Changes the video input device
room.camera.setVideoDevice(videoDeviceId);

Obtener los dispositivos de audio y vídeo del fabricante de la cámara

// Returns the current audio input device
const currentAudioDevice = await room.camera.getAudioDevice();

// Returns the current video input device
const currentVideoDevice = room.camera.getVideoDevice();

Configuración del dispositivo de salida de audio

Para obtener una matriz de dispositivos de salida de audio disponibles, llame a la función VideoExpress.getAudioOutputDevices() método:

const devices = await VideoExpress.getAudioOutputDevices();

Para obtener el ID de dispositivo y la etiqueta del dispositivo de salida de audio actual, llame a la función VideoExpress.getActiveAudioOutputDevice() método:

const device = await VideoExpress.getActiveAudioOutputDevice();
console.log(device.deviceId, device.label);

Para configurar el dispositivo de salida de audio, llame al VideoExpress.setAudioOutputDevice() método, pasando un identificador de dispositivo:

const devices = await VideoExpress.setAudioOutputDevice(deviceId);

El siguiente código muestra cómo implementar métodos para recorrer los dispositivos de salida de audio disponibles disponibles:

const currentAudioIndex;

const devices = await VideoExpress.getAudioOutputDevices;
const currentDevice = await devices.getActiveAudioOutputDevice();
  devices.forEach((device, index) => {
    if (device.label === currentDevice.label) {
      currentAudioIndex = index;
    }
  });

const cycleAudioOutput = () => {
  currentAudioIndex += 1;
  let deviceId = devices[currentAudioIndex % devices.length].deviceId;
  VideoExpress.setAudioOutputDevice(deviceId);
};

Creación de un editor de previsualización

Si lo deseas, puedes configurar un elemento de vista previa del editor antes de unirte a la sala:

const previewPublisher = new VideoExpress.PreviewPublisher('previewContainer');
await previewPublisher.previewMedia(
  publisherOptions: {
    targetElement: 'previewContainer',
    publisherProperties: {
      resolution: '1280x720'
    },
  },
);

Se solicita al usuario que conceda acceso a la cámara y al micrófono. Si el usuario concede el acceso, la promesa devuelta por el previewPublisher.previewMedia() se resuelve. En caso contrario, se rechaza.

Puede utilizar el editor de vista previa para que el usuario seleccione la cámara y el micrófono antes de entrar en la sala:

// Get the current audio input device
const currentAudioDevice = await previewPublisher.getAudioDevice();

// Change the audio input device
previewPublisher.setAudioDevice(audioDeviceId);

// Get the current video input device
const currentVideoDevice = previewPublisher.getVideoDevice();

// Change the video input device
previewPublisher.setVideoDevice(videoDeviceId);

Para obtener una serie de dispositivos de entrada de audio y vídeo disponibles, llame a la función VideoExpress.getDevices() método:

const devices = await VideoExpress.getDevices();

El siguiente código muestra cómo implementar métodos para recorrer los dispositivos de entrada de audio y vídeo disponibles dispositivos de entrada de audio y vídeo disponibles:

let currentAudioIndex;
let currentVideoIndex;

VideoExpress.getDevices((err, devices) => {
  audioInputs = devices.filter((device) => device.kind === 'audioInput');
  // Find the right starting index for cycleMicrophone
  audioInputs.forEach((device, index) => {
    if (device.label === previewPublisher.getAudioSource().label) {
      currentAudioIndex = index;
    }
  });

  currentAudioIndex = devices
    // Get all video inputs
    .filter((device) => device.kind === 'audioInput')
    // Find the right starting index for cycleMicrophone
    .findIndex((device) => device.label === previewPublisher.getAudioSource().label);

  currentVideoIndex = devices
    // Get all video inputs
    .filter((device) => device.kind === 'videoInput')
    // Find the right starting index for cycleCamera
    .findIndex((device) => device.label === previewPublisher.getVideoDevice().label);
});

const cycleMicrophone = () => {
  currentAudioIndex += 1;
  let deviceId = audioInputs[currentAudioIndex % audioInputs.length].deviceId;
  previewPublisher.setAudioSource(deviceId);
};

const cycleCamera = () => {
  currentVideoIndex += 1;
  let deviceId = videoInputs[currentVideoIndex % videoInputs.length].deviceId;
  previewPublisher.setVideoSource(deviceId);
};

Antes de unirte a la sala, puedes eliminar el editor de vista previa (quitándolo de la página):

previewPublisher.destroy();

Activar y desactivar los vídeos publicados

Acceso al audio/vídeo del editor de la cámara

// Check whether a camera publisher video is enabled or not:
room.camera.isVideoEnabled();

// Check whether a camera publisher audio is enabled or not:
room.camera.isAudioEnabled();

// Enable the camera publisher's video:
room.camera.enableVideo();

// Disable the camera publisher's video:
room.camera.disableVideo();

// Enable the camera publisher's audio:
room.camera.enableAudio();

// Disable the camera publisher's audio:
room.camera.disableAudio();

Activar y desactivar el audio y el vídeo de un abonado con cámara

Estos métodos afectan únicamente al audio y al vídeo del suscriptor del cliente local.

// Check whether a camera subscriber's video is enabled or not:
participant.camera.isVideoEnabled();

// Check whether a camera subscriber's audio is enabled or not:
participant.camera.isAudioEnabled();

// Enable a camera subscriber's video:
participant.camera.enableVideo();

// Disable a camera subscriber's video:
participant.camera.disableVideo();

// Enable a camera subscriber's audio:
participant.camera.enableAudio();

// Disable a camera subscriber's audio:
participant.camera.disableAudio();

Configuración de filtros de vídeo

Puedes configurar los filtros de desenfoque de fondo y de sustitución de fondo en un CameraPublisher vídeo con el CameraPublisher.setVideoFilter() método. Puede eliminar filtros con el método CameraPublisher.clearVideoFilter() método.

// Applying a background blur filter
room.camera.setVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'high'
});

// Removing the filter
room.camera.clearVideoFilter();

Configuración de imágenes para cuando el vídeo está desactivado

Puede establecer la imagen de fondo de un vídeo con el botón setDisabledImageURI método disponible para el CameraSubscriber, CameraPublisher, ScreenSubscriber, ScreenPublisher, y PreviewPublisher clases. Esta imagen aparecerá cuando el vídeo esté silenciado.

const disabledImageURI = 'https://path-to.file/dog-dance.jpg';
room.camera.setDisabledImageURI(disabledImageURI);

Configuración de las iniciales para cuando un vídeo está desactivado

Puedes configurar el fondo de un vídeo para que tenga entre uno y dos personajes con el participantInitials opción de la Constructor Room(). Las iniciales aparecerán cuando el vídeo esté en silencio y el disabledImageURI No se ha establecido.

const room = new VideoExpress.Room({
  apiKey: '4815162342',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbG...',
  participantInitials: 'HI',
});

Detección de altavoces activos

El gestor de maquetación de Video Express ordena automáticamente los elementos de vídeo en el DOM HTML y ajusta el diseño en pantallas móviles. El gestor de diseño resalta automáticamente los altavoces activos en una Sala. La maquetación se ajusta automáticamente para aumentar el tamaño del orador activo. El gestor de maquetación amplía automáticamente un vídeo de pantalla compartida, si existe. El gestor de muestra automáticamente el altavoz activo si está oculto.

Para activar el resaltado de altavoz activo, ajuste el managedLayoutOptions.speakerHighlightEnabled opción de la Constructor Room() a true. Para personalizar el color de resaltado, ajuste el managedLayoutOptions.speakerHighlightColor de la Room() constructor.

El objeto Room envía un activeSpeakerChanged evento que se produce cuando hay un nuevo participante hablando en la sala. Cuando se activa este evento, puedes añadir efectos en la interfaz de usuario en función de qué participante esté hablando en ese momento.

room.on('activeSpeakerChanged', (participant) => {
  console.log('Active speaker: ', participant.name);
});

El evento emite un objeto Participante, que identifica al orador activo.

Compartir pantalla

Para iniciar la pantalla compartida, llame al Room.startScreensharing() método:

room.startScreensharing('screenContainer')
  .then(() => console.log('Started screen sharing'))
  .catch((err) => console.err(err));

El método recibe un parámetro opcional: el elemento HTML de destino que será el contenedor del vídeo para compartir pantalla. Puede ser un HTMLElement o una cadena (el parámetro id de del elemento HTML). Si no se pasa ningún parámetro, el contenedor es el elemento screenPublisherContainer propiedad del managedLayoutOptions parámetro pasado a la Constructor Room(), o al roomContainer propiedad pasada a la Room() constructor. Si no se especifica ninguna de estas opciones, el vídeo del emisor de la pantalla compartida se añade como elemento secundario del body elemento de la página HTML.

Se pide al usuario que autorice el acceso a la pantalla. Si el usuario concede el acceso a la pantalla la Promesa devuelta por el Room.startScreensharing() El método se resuelve cuando comienza el uso compartido de pantalla. De lo contrario, la promesa se rechaza.

Para detener el uso compartido de pantalla, llama al Room.stopScreenSharing() método:

room.stopScreenSharing();

Cuando se inicia el editor de pantalla compartida, se añade automáticamente el correspondiente abonado de pantalla compartida al gestor de maquetación de la página de cada uno de los participantes. se añade automáticamente al gestor de maquetaciones de la página de cada participante.

Acceder al audio/vídeo del editor de pantalla compartida

El siguiente código comprueba si un vídeo del editor de pantalla compartida está activado o no:

room.screen.isVideoEnabled();

El siguiente código comprueba si el audio del editor de pantalla compartida está activado o no:

room.screen.isAudioEnabled();

Para habilitar el vídeo del editor que comparte su pantalla:

room.screen.enableVideo();

Para desactivar el vídeo del editor de pantalla compartida:

room.screen.disableVideo();

Para activar el audio del editor de pantalla compartida:

room.screen.enableAudio();

Para desactivar el audio del emisor en la función de compartir pantalla:

room.screen.disableAudio()

Detectar cuándo otros clientes publican flujos de pantalla compartida

Cuando otros usuarios publican transmisiones en las que comparten pantalla, el gestor de maquetación de Video Express añade automáticamente el vídeo a la página HTML.

Un objeto Participante envía un screenCreated cuando el participante (no el usuario local) publica un flujo de pantalla compartida:

participant.on('screenCreated', (screenSubscriber) => {
  console.log('new screen-sharing stream for ', participant.name);
});

El evento emite un ScreenSubscriber objeto. El objeto ScreenSubscriber incluye métodos para activar y desactivar la reproducción de audio y de vídeo para el flujo de pantalla compartida en el cliente local (véase Activar y desactivar el audio y el vídeo de un participante en una sesión de pantalla compartida).

Un objeto Participante envía un screenDestroyed cuando un participante (no el usuario local) deja de publicar un flujo de cámara:

participant.on('screenDestroyed', () => {
  console.log('screen-sharing stream destroyed for ', participant.name);
});

Activar y desactivar el audio y el vídeo de un participante en una sesión de pantalla compartida

// Check whether a screen-sharing subscriber video is enabled or not:
participant.screen.isVideoEnabled();

// Check whether a screen-sharing subscriber audio is enabled or not:
participant.screen.isAudioEnabled();

// Enable a screen-sharing subscriber's video:
participant.screen.enableVideo();

// Disable a screen-sharing subscriber's video:
participant.screen.disableVideo();

// Enable a screen-sharing subscriber's audio:
participant.screen.enableAudio();

// Disable a screen-sharing subscriber's audio:
participant.screen.disableAudio();

Eventos

Los eventos de Video Express utilizan el emisor de eventos patrón.

Para añadir escuchadores de eventos a un objeto, se llama a su función on() método. Por ejemplo, el siguiente código añade un oyente para el connected Envío de eventos por parte del objeto Room:

room.on('connected', () => {
  console.log('Connected');
});

El on() toma dos parámetros: el nombre del evento (una cadena) y una función que se llama cuando se envía el evento.

Para algunos eventos, se pasan argumentos a la función de devolución de llamada. Se dice que el evento se dice que emitir estos objetos. Por ejemplo, la habitación disconnected emite un mensaje reason cadena:

room.on('disconnected', (reason) => {
  console.log('Disconnected:', reason);
});

La habitación participantLeft emite dos objetos: un objeto Participante y un objeto reason cadena:

room.on('connected', (participant, reason) => {
  console.log('participant left: ', participant.name);
  console.log('reason: ', reason);
});

Funciones avanzadas

Cifrado de extremo a extremo

Para utilizar el cifrado de extremo a extremo, crea una instancia de la Room con un secreto de encriptación:

const room = new VideoExpress.Room({
  apiKey: '44444444',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbG...',
  encryptionSecret: 'this-is-a-secret',
});

Una vez creada una sala con un secreto de cifrado, puede actualizarse para utilizar un nuevo secreto llamando a la función Room.setEncryptionSecret(encryptionSecret) método:

room.setEncryptionSecret('this-is-a-secret');

Nota: Para poder utilizar el cifrado de extremo a extremo, primero es necesario habilitarlo en los SDK del servidor. Consulta el Guía del desarrollador de Video Express.

Señalización

Una vez que te hayas unido a una sala, puedes utilizar el Room.signal() método para enviar una señal a uno o varios participantes de la sala.

El siguiente código envía una señal a todos los participantes de la Sala:

room.signal({
  data: 'hello.'
});

El siguiente código envía una señal a un participante específico de la Sala:

room.signal({
  to: participant, // this is a Participant object
  data: `hello ${participant.name}.`
});

Puede incluir un type de la señal options para ayudar a identificar la señal:

room.signal({
  type: 'greeting',
  data: `hello.`
});

Cuando se recibe una señal, el objeto Room envía un comando signal evento, que emite un objeto `SignalEvent` que define la señal:

room.on('signal', (signalEvent) => {
  console.log(`Signal received from ${signalEvent.from}. Data: ${signalEvent.data}.`);
});

Cuando una señal que incluye un type el objeto Room envía un mensaje signal:type evento, que emite un objeto SignalEvent que define la señal:

room.on('signal:greeting', (signalEvent) => {
  console.log(`Signal received from ${signalEvent.from}. Data: ${signalEvent.data}.`);
});

Para más información, consulte el Room.signal() y el señal y señal: eventos En el vídeo Documentación de referencia rápida. Consulta también el Resumen sobre la señalización.

Configuración de una URL de proxy

Con la función de proxy IP, los clientes dirigen todo el tráfico de Internet (excepto los flujos multimedia) a través de su servidor proxy. El tráfico no multimedia incluye la comunicación con los servidores de Video API y la infraestructura de registro. y la infraestructura de registro.

La función de proxy IP está disponible como funcionalidad adicional.

El siguiente código establece la URL del servidor proxy IP. Llámelo antes de llamar a la función Room() constructor:

VideoExpress.setProxyUrl('https://123.123.123.123:8080');

Para más información, consulte el Guía para desarrolladores de proxy IP.

Uso de servidores TURN personalizados

La función configurable del servidor TURN está disponible como un funcionalidad adicional. Para configurar los servidores TURN utilizados por el cliente Video Express, configure las opciones del iceConfig propiedad del options del Constructor Room().

Para más información, consulte el Guía para desarrolladores del servidor TURN configurable.

Utilización de los datos de conexión

Cuando se llama a la conexión con una sala de Video Express, se pasa un token de conexión. Un token puede tener una cadena de datos de conexión opcional, que contiene metadatos. Puede acceder a estos datos con la función Room.participantConnectionData y Participant.connectionData propiedades.

Código del lado del servidor (Node.js)

Este ejemplo muestra cómo añadir datos de conexión al generar un token utilizando el SDK de OpenTok Node:

// Generating token from your server
const token = opentok.generateToken(sessionId, {
  role: 'moderator',
  data: '{"disabledImageURI":"https://path-to.file/jason.jpg"}',
});

Este ejemplo muestra cómo habilitar el cifrado de extremo a extremo al crear una nueva sesión utilizando el SDK de OpenTok para Node:

opentok.createSession({
  mediaMode: 'routed',
  e2ee: true, 
});

Código del lado del cliente (Video Express)

// Setting a participant's disabledImageURI with data from token
participant.on('cameraCreated', (cameraSubscriber) => {
  // connectionData is a JSON string from some your server
  const { connectionData } = participant;
  const { disabledImageURI } = JSON.parse(connectionData);
  cameraSubscriber.setDisabledImageURI(disabledImageURI);
});

Para más información, consulte Visión general de la creación de tokens.

Utilización de Video Express en el entorno empresarial

Actualmente, Vonage Video Express solo ofrece un entorno Estándar. Sin embargo, puedes utilizar proyectos Enterprise con Video Express. De este modo, se garantiza que Video Express utilice los servidores de señalización y de medios de OpenTok dedicados a las aplicaciones de los socios que utilizan el entorno Enterprise. Esto proporciona una mayor estabilidad frente a los cambios y una mayor resiliencia ante los picos de carga de la plataforma.

Uso de Video Express en aplicaciones móviles

Véase el Demostración de Vonage Video Express para iOS y Android en GitHub. Esta aplicación utiliza Video Express en vistas web (como WKWebView en iOS y WebView en Android) para aplicaciones móviles.

Cómo utilizar Video Express con React

Véase el Demostración de Vonage Video Express React Aplicación en GitHub. Esta aplicación utiliza Video Express y React para crear una aplicación de videoconferencias con múltiples participantes. Además de las funciones que ofrece Video Express, la aplicación incluye la selección del nombre de la sala y de los participantes, el archivo (grabación) y mucho más.

Problemas conocidos y limitaciones

Vonage Video Express funciona sobre OpenTok.js, la Video API de Vonage Video para JavaScript. Todos los clientes que se conecten a una sala de Vonage Video Express deben utilizar Vonage Video Express. El uso de otros SDK de cliente de la Video API de Vonage Video (incluidos los clientes web creados directamente mediante las API de OpenTok.js) puede desactivar algunas funciones de Vonage Video Express.

Existen algunas limitaciones en las funciones de OpenTok.js y de la plataforma Video API que Vonage Video Express no admite:

• Video Express no es compatible con grandes retransmisiones interactivas porque Video Express actualmente requiere que cada cliente que se une a una sala publique un flujo de cámara.

• Video Express puede tardar un poco más en conectarse cuando se utiliza con el
  Lista de direcciones IP permitidas función. Video Express se centra en simplificar la experiencia del desarrollador. Por esta razón, Video Express tratará de descargar los archivos de configuración a través de CDN (que puede ser bloqueado por el firewall) antes de utilizar las direcciones de la lista de IP permitidas. Usted no puede especificar que un cliente debe utilizar las direcciones IP permitidas sólo (como lo haría con el ipWhitelist opción en OpenTok.js OT.initSession() método). Un cliente de Video Express puede tardar un poco más en conectarse que un cliente que utilice OpenTok.js configurado con el ipWhitelist opción configurada en true al utilizar Lista de direcciones IP permitidas con cortafuegos que bloquean las redes de distribución de contenidos.

Participantes en Video Express se corresponden con OpenTok conexiones. Las transmisiones de la cámara y de pantalla compartida en Video Express corresponden a OpenTok arroyos. Los datos y eventos para conexiones y flujos aparecen en herramientas para desarrolladores como Inspector, Insights y otros. Video Express proporciona identificadores de conexión a través de Participant.id, Room.participantId, y las claves de Room.participants, que puede ser usado para identificar usuarios específicos para eventos y datos de conexión y streaming. Algunas funciones que requieren identificadores de conexión y flujo no son compatibles con Video Express. Estas incluyen:

• Más Funciones de moderación. Sin embargo, puede utilizar el método REST API para obligar a todas las secuencias de una sala de Video Express a silenciar el audio (aunque no puede incluir una lista de identificadores de flujo para excluir). Próximamente habrá más funciones de moderación de Video Express.

• Selección de flujos que se incluirán en un archivo o retransmisión en directo.

• Cambio de la clase de diseño para un archivo o retransmisión en directo que utiliza un diseño personalizado.

Vonage Video Express no proporciona acceso a la subyacente OpenTok.js Editorial y Suscriptor objetos. Por lo tanto, no puedes utilizar el getStats() y getRtcStatsReport() métodos de estos objetos. Video Express optimiza automáticamente la velocidad de fotogramas y la resolución de todas las transmisiones de vídeo, por lo que no es necesario llamar al setPreferredFrameRate() y setPreferredResolution() métodos para un suscriptor o un editor.

Para obtener más información sobre los problemas conocidos y los solucionados, consulte la página Notas de la versión de Vonage Video Express.

Para obtener más información sobre los problemas conocidos relacionados con OpenTok.js, consulta el Problemas conocidos de OpenTok.js.