Guía del desarrollador de Video Express

Esta guía del desarrollador proporciona información detallada sobre el uso de Video Express.

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ónbasado en una sesión de Video API, para permitir que que se reúnan varios clientes basados en la 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 del flujo y la frecuencia de imagen, reduciendo el uso 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 activa de altavoces).

  • 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.

Carga de la biblioteca Video Express

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

npm i --save @vonage/video-express

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, deberás agregar CSS para dar estilo a los componentes de la sala en tu aplicación:

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

Unirse a una sala y publicar un flujo de cámara

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

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
});

En apiKey, sessionIdy token son el ID de Aplicación para su aplicación de vídeo, un ID de sesión para la sala, y un token. El token debe incluir un rol de "editor". Obtienes la Id. de aplicación en tu panel de cliente de Vonage en "Build & Manage" y luego "Applications".. Crear identificadores de sesión y tokens utilizando la función SDK para servidores.

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

const room = new VideoExpress.Room({
  apiKey:'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbGciOiJIU[...]",
  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: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbGciOiJIU[...]",
  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 más información sobre el modelo de eventos de Video Express.

Al entrar en una sala, Video Express crea un editor de cámara para el cliente. Este envía el vídeo del cliente a los demás participantes de la sala. Al usuario se le pide que permita el acceso a la cámara y al micrófono. Si el usuario niega 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 un flujo de cámara.

Importante: Vonage Video Express 1.0 actualmente admite 25 participantes simultáneos en una sala. Si agregas más de 25 personas en una sesión, deberás asegurarte de que el de los participantes sea suficiente.

Salir de una habitación

Para salir de la sala, cierre la ventana del navegador o llame al leave() del objeto 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 que identifica la razón por la que el cliente se desconectó.

El objeto Room envía 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 entran y salen de la Sala

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 cuando 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 que indica el motivo de la baja del cliente. Véase la documentación de referencia.

Detección de cuándo otros clientes publican secuencias 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 la reproducción de 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 ordena automáticamente los elementos de vídeo en el DOM HTML y ajusta el diseño en pantallas móviles. El gestor de disposición resalta automáticamente los altavoces activos en una Sala. El diseño se ajusta automáticamente para agrandar los altavoces activos. El gestor de disposición amplía automáticamente un vídeo de pantalla compartida, si lo hay.

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() para que el vídeo de los vídeos publicados por el cliente local y los vídeos de pantalla compartida del cliente local aparezcan fuera de la interfaz de usuario del gestor de presentació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 Sala para tener un indicador de interfaz de usuario personalizado que muestre el número total de participantes en una sala.

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. basándose en el agente de usuario del cliente. La dirección managedLayoutOptions del Constructor Room() incluye un deviceLayoutMode propiedad. Establézcala en "desktop" o "mobile" a establecer explícitamente la disposición del dispositivo.

Opciones de diseño

Hay dos diseños:

  • grid - Los vídeos se organizan en una 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.

En Room() incluye un constructor managedLayoutOptions que le permite establecer el cuando te unes a una Sala:

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
  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

En managedLayoutOptions del Constructor Room() también incluye un deviceLayoutMode propiedad. Establézcala en "desktop" o "mobile" a establecer explícitamente la disposición del dispositivo. Por defecto, el gestor de diseño determina automáticamente si un cliente se ejecuta en un dispositivo móvil, basándose en el agente de usuario del cliente. 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/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);

Obtención de dispositivos de audio/vídeo del editor 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() pasando un ID 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

Opcionalmente, puede configurar un elemento editor de vista previa antes de unirse a la sala:

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

Se pide al usuario que permita el acceso a la cámara y al micrófono. Si el usuario concede 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 entrar en la sala, puede destruir el editor de vista previa (eliminándolo de la página):

previewPublisher.destroy();

Activar y desactivar el vídeo publicado

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 sólo afectan al audio y al vídeo del abonado 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();

Establecer filtros de vídeo

Puede establecer filtros de desenfoque de fondo y 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();

Establecer imágenes para cuando un vídeo está desactivado

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

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

Detección activa de altavoces

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 cuando haya un nuevo orador activo en la sala. Cuando se envía este evento, puede añadir efectos de interfaz de usuario basados en qué participante está hablando activamente.

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 a la roomContainer propiedad pasada a la Room() constructor. Si no se especifica ninguno de ellos, el vídeo del editor de pantalla compartida se añade como hijo de body 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() se resuelve cuando la pantalla compartida se inicia. De lo contrario, se rechaza la Promesa.

Para detener el uso compartido de la pantalla, llame 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 activar el vídeo del editor de pantalla compartida:

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 editor de pantalla compartida:

room.screen.disableAudio()

Detectar cuándo otros clientes publican flujos de pantalla compartida

Cuando otros usuarios publican secuencias para compartir pantalla, 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 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 PantallaSuscriptor 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 abonado que comparte pantalla).

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 abonado que comparte pantalla

// 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 la función 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 una escucha para el método connected envío de eventos por la Sala de la sala:

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

En 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 emite estos objetos. Por ejemplo, la Sala 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, instancie la función Room con un secreto de encriptación:

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
  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: El cifrado de extremo a extremo debe activarse primero a través de los SDK del servidor. Consulte el Guía del desarrollador de Video Express.

Señalización

Una vez que se haya unido a una sala, puede utilizar la función 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 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 la documentación de referencia de Video Express. Consulte también la sección Visión general de la señalización.

Establecer una URL 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 función 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 de servidor TURN configurable está disponible como un función 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 del desarrollador 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"}',
});

Código 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 sólo ofrece un entorno estándar. Sin embargo, puedes utilizar proyectos Enterprise con Video Express. Esto garantiza que Video Express utilice la infraestructura de Vonage. de señalización y servidores de medios que están dedicados a aplicaciones de socios que utilizan el entorno Enterprise. Esto ofrece una mayor estabilidad ante los cambios y más resistencia 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.

Problemas conocidos y limitaciones

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

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

  • Video Express no admite grandes emisiones 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 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 en OpenTok.js OT.initSession() ). Un cliente Video Express puede tardar tardar un poco más en conectarse que un cliente que utilice OpenTok.js configurado con el método ipWhitelist en true al utilizar Lista de IP permitidas con cortafuegos que bloquean las redes de distribución de contenidos.

Participantes en Video Express corresponden a conexiones. La cámara y los flujos de pantalla compartida en Video Express corresponden a 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.participantIdy 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 los 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 Abonado objetos. Por lo tanto, no se puede utilizar el getStats() y getRtcStatsReport() de estos objetos. Video Express optimiza automáticamente la frecuencia de imagen y la resolución de todos los flujos de vídeo, por lo que no es necesario llamar a el setPreferredFrameRate() y setPreferredResolution() métodos para un abonado o 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.