Guia do Desenvolvedor do Video Express

Este guia para desenvolvedores fornece informações detalhadas sobre como usar o Video Express.

Sobre o Video Express

O Vonage Video Express é uma biblioteca JavaScript para criar rapidamente um aplicativo web de videoconferência com múltiplos participantes. Ele funciona com base no OpenTok.js, a Video API do Vonage Video para aplicativos web.

Configurar o Video Express sala, com base em uma sessão da Video API, para permitir que vários clientes baseados na web se conectem.

O Video Express inclui o seguinte:

A gerenciador de layout, que se encarrega de organizar os elementos de vídeo na página HTML
Um gerenciador de qualidade que otimiza continuamente a resolução da transmissão e a taxa de quadros, reduzindo o uso de largura de banda do cliente.
Um gerenciador de experiência que define dinamicamente a prioridade dos palestrantes e silencia automaticamente os participantes que entram em reuniões maiores (consulte Detecção de alto-falante ativo).
Um Room Manager, que lida com a interação de baixo nível com o WebRTC e fornece primitivas de nível superior, com as quais é mais fácil trabalhar.

Carregando a biblioteca do Video Express

O Video Express está disponível como um módulo Node em npmjs.com:

npm i --save @vonage/video-express

Você também pode carregar a biblioteca Video Express usando um script marcar uma página HTML:

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

Atualmente, o Vonage Video Express não inclui uma interface de usuário padrão. Portanto, você precisará adicionar CSS para definir o estilo dos componentes da sala em seu aplicativo:

Para começar rapidamente, copie o video-express-styles.css arquivo e inclua-o no head seção da página usando o Video Express:

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

Entrar em uma sala e transmitir o vídeo da câmera

Ligue para o Room construtor para entrar em uma sala do Video Express

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

O apiKey, sessionId, e token são o ID do aplicativo do seu aplicativo de vídeo, um ID de sessão para a sala e um token. O token deve incluir a função “publisher”. Você pode obter o ID do aplicativo no seu Painel do Cliente da Vonage, na seção "Criar e gerenciar" e, em seguida, "Applications". Crie IDs de sessão e tokens usando o SDKs de servidor.

O código a seguir cria uma instância de `Room` (com todos os 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",
  }
});

O código a seguir cria uma instância de `Room`, mas exclui os contêineres da câmera e do compartilhamento de tela:

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

Quando o cliente entra na sala, o objeto Room dispara um connected evento:

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

Veja Eventos para obter mais informações sobre o modelo de eventos do Video Express.

Ao entrar em uma sala, o Video Express cria um emissor de câmera para o cliente. Isso transmite o vídeo do cliente para os demais participantes da sala. O usuário é solicitado a conceder acesso à câmera e ao microfone. Se o usuário negar o acesso à câmera e ao microfone, o cliente será desconectado da sala, já que não é permitido entrar em uma sala sem transmitir o fluxo da câmera.

Importante: O Vonage Video Express 1.0 suporta atualmente 25 participantes simultâneos em uma sala. Se você adicionar mais de 25 pessoas a uma sessão, será necessário garantir que o desempenho da rede e do hardware dos participantes seja suficiente.

Sair de uma sala

Para sair da sala, feche a janela do navegador ou ligue para o leave() método do objeto Room:

room.leave();

Detectar quando o cliente local sai da sala

O objeto `Room` dispacha um disconnected evento que ocorre quando o cliente sai da sala:

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

O evento emite reason string que identifica o motivo pelo qual o cliente se desconectou.

O objeto `Room` dispacha reconnecting e reconnected eventos que ocorrem se o cliente perder a conexão com a sala e se reconectar:

// 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 quando outros clientes entram e saem da sala

O objeto `Room` dispacha um participantJoined evento em que outro participante (que não seja o usuário local) entra na sala:

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

O evento emite um objeto Participant que identifica o participante que entrou na sessão. Veja a documentação de referência.

O objeto `Room` dispacha um participantLeft evento que ocorre quando um participante (que não seja o usuário local) sai da sala:

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

O evento emite um objeto Participant que identifica o participante que saiu e um reason string que indica o motivo da saída do cliente. Veja a documentação de referência.

Detectar quando outros clientes publicam transmissões de câmera

Quando outros usuários publicam transmissões de câmera, o gerenciador de layout do Video Express adiciona automaticamente o vídeo à página HTML.

Um objeto Participant despacha um cameraCreated evento que ocorre quando um participante (não o usuário local) publica um fluxo de câmera:

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

O evento emite um CameraSubscriber objeto. O objeto CameraSubscriber inclui métodos para ativar e desativar a reprodução de áudio e vídeo no cliente local (consulte Ativando e desativando o áudio e o vídeo de um assinante de câmera).

Um objeto Participant despacha um cameraDestroyed evento que ocorre quando um participante (não o usuário local) interrompe a transmissão de uma câmera:

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

Interface do usuário e layout

O Video Express inclui um gerenciador de layout que organiza automaticamente os elementos de vídeo no DOM HTML e ajusta o layout em telas de dispositivos móveis. O gerenciador de layout destaca automaticamente os participantes ativos em uma sala. O layout se ajusta automaticamente para ampliar a imagem dos participantes ativos. O gerenciador de layout amplia automaticamente o vídeo compartilhado na tela, caso haja um.

O gerenciador de layout colocará um vídeo de compartilhamento de tela no bloco maior do layout, mesmo que a opção “palestrante ativo” esteja ativada.

Você pode definir o screenPublisherContainer e cameraPublisherContainer opções do Room() estrutura para que os vídeos publicados pelo cliente local — sejam eles de câmera ou de compartilhamento de tela — apareçam fora da interface do usuário do gerenciador de layout.

Em um dispositivo móvel, o gerenciador de layout exibe apenas 4 vídeos de câmera. Além disso, os vídeos de compartilhamento de tela e do palestrante ativo ocupam toda a tela em um dispositivo móvel. Você pode usar o participantJoined e participantLeft eventos disparados pelo objeto Room para exibir um indicador personalizado na interface do usuário que mostre o número total de participantes em uma sala.

Por padrão, o gerenciador de layout determina automaticamente se um cliente está sendo executado em um dispositivo móvel, com base no agente do usuário do cliente. O managedLayoutOptions parâmetro do Construtor Room() inclui um opcional deviceLayoutMode propriedade. Defina-a como "desktop" ou "mobile" para definir explicitamente o layout do dispositivo.

Opções de layout

Existem dois layouts:

grid — Os vídeos estão dispostos em um layout em grade.
active-speaker — O orador ativo (o participante que está falando no momento) é automaticamente destacado em um elemento DOM maior.

O Room() O construtor inclui um managedLayoutOptions parâmetro que permite definir o layout ao entrar em uma sala:

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

Você também pode alterar o modo de layout chamando a função Room.setLayoutMode() método:

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

O managedLayoutOptions parâmetro do Construtor Room() também inclui um opcional deviceLayoutMode propriedade. Defina-a como "desktop" ou "mobile" para definir explicitamente o layout do dispositivo. Por padrão, o gerenciador de layout determina automaticamente se um cliente está sendo executado em um dispositivo móvel, com base no agente de usuário do cliente.

O opcional mediaShutoffThreshold parâmetro do Construtor Room() define um limite para o número atual de participantes na sala (no momento da entrada) que impedirá que o CameraPublisher do cliente local publique áudio e vídeo.

O opcional maxVideoParticipantsOnScreen parâmetro do Construtor Room() define o número máximo de vídeos do CameraSubscriber exibidos simultaneamente em uma sala. Isso afeta apenas a exibição de vídeos no cliente local.

Como alterar a câmera e o microfone utilizados

Configurando os dispositivos de áudio/vídeo do editor da câmera

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

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

Obtendo os dispositivos de áudio/vídeo do provedor da câmera

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

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

Configurando o dispositivo de saída de áudio

Para obter uma lista dos dispositivos de saída de áudio disponíveis, chame a função VideoExpress.getAudioOutputDevices() método:

const devices = await VideoExpress.getAudioOutputDevices();

Para obter o ID e o nome do dispositivo de saída de áudio atual, chame a função VideoExpress.getActiveAudioOutputDevice() método:

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

Para definir o dispositivo de saída de áudio, chame a função VideoExpress.setAudioOutputDevice() método, passando um ID de dispositivo:

const devices = await VideoExpress.setAudioOutputDevice(deviceId);

O código a seguir mostra como implementar métodos para alternar entre os dispositivos de saída de áudio disponíveis:

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);
};

Criação de um editor de visualização

Opcionalmente, você pode configurar um elemento de visualização do editor antes de entrar na sala:

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

O usuário é solicitado a conceder acesso à câmera e ao microfone. Se o usuário conceder o acesso, a promessa retornada pelo previewPublisher.previewMedia() O método é resolvido. Caso contrário, ele é rejeitado.

Você pode usar o visualizador de pré-visualização para que o usuário selecione a câmera e o microfone antes de entrar na 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 obter uma lista dos dispositivos de entrada de áudio e vídeo disponíveis, chame a função VideoExpress.getDevices() método:

const devices = await VideoExpress.getDevices();

O código a seguir mostra como implementar métodos para alternar entre os dispositivos de entrada de áudio e vídeo disponíveis:

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 na sala, você pode excluir o editor de visualização (removendo-o da página):

previewPublisher.destroy();

Ativar e desativar vídeos publicados

Acesso ao áudio/vídeo do editor da câmera

// 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();

Ativando e desativando o áudio e o vídeo de um assinante de câmera

Esses métodos afetam o áudio e o vídeo apenas no assinante do 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();

Configurando filtros de vídeo

Você pode definir filtros de desfoque de fundo e de substituição de fundo para um CameraPublisher vídeo transmissão com o CameraPublisher.setVideoFilter() método. É possível remover filtros com o CameraPublisher.clearVideoFilter() método.

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

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

Configurar imagens para quando um vídeo estiver desativado

Você pode definir a imagem de fundo de um vídeo com o setDisabledImageURI método disponível para o CameraSubscriber, CameraPublisher, ScreenSubscriber, ScreenPublisher, e PreviewPublisher aulas. Esta imagem aparecerá quando o vídeo estiver sem som.

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

Detecção de alto-falante ativo

O gerenciador de layout do Video Express organiza automaticamente os elementos de vídeo no DOM HTML e ajusta o layout em telas de dispositivos móveis. O gerenciador de layout destaca automaticamente os participantes ativos em uma sala. O layout se ajusta automaticamente para ampliar a imagem do participante ativo. O gerenciador de layout amplia automaticamente um vídeo de compartilhamento de tela, caso haja algum. O gerenciador de layout exibe automaticamente o participante ativo caso ele esteja oculto.

Para ativar o destaque do alto-falante ativo, defina o managedLayoutOptions.speakerHighlightEnabled opção do Construtor Room() para true. Para personalizar a cor do destaque, defina o managedLayoutOptions.speakerHighlightColor opção do Room() construtor.

O objeto Room dispacha um activeSpeakerChanged evento que ocorre quando há um novo participante falando na sala. Quando esse evento é disparado, você pode adicionar efeitos na interface do usuário com base em qual participante está falando no momento.

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

O evento emite um objeto Participant, identificando quem está falando no momento.

Compartilhamento de tela

Para iniciar o compartilhamento de tela, ligue para o Room.startScreensharing() método:

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

O método aceita um parâmetro opcional: o elemento HTML de destino que servirá como contêiner do vídeo compartilhado na tela. Pode ser um HTMLElement ou uma string (o id do elemento HTML). Se nenhum parâmetro for passado, o contêiner é o screenPublisherContainer propriedade do managedLayoutOptions parâmetro passado para o Construtor Room(), ou para o roomContainer propriedade passada para o Room() constructor. Se nenhuma dessas opções for especificada, o vídeo do emissor do compartilhamento de tela é adicionado como um elemento filho do body elemento da página HTML.

O usuário é solicitado a conceder acesso à tela. Se o usuário conceder acesso à tela, a Promise retornada pela Room.startScreensharing() O método é resolvido quando o compartilhamento de tela é iniciado. Caso contrário, a Promise é rejeitada.

Para interromper o compartilhamento de tela, ligue para o Room.stopScreenSharing() método:

room.stopScreenSharing();

Quando o emissor do compartilhamento de tela é iniciado, um assinante correspondente desse compartilhamento é automaticamente adicionado ao gerenciador de layout na página de cada um dos demais participantes.

Acesso ao áudio/vídeo do apresentador que está compartilhando a tela

O código a seguir verifica se o vídeo do emissor no compartilhamento de tela está ativado ou não:

room.screen.isVideoEnabled();

O código a seguir verifica se o áudio do emissor no compartilhamento de tela está ativado ou não:

room.screen.isAudioEnabled();

Para ativar o vídeo do criador que está compartilhando a tela:

room.screen.enableVideo();

Para desativar o vídeo do apresentador que está compartilhando a tela:

room.screen.disableVideo();

Para ativar o áudio do apresentador que está compartilhando a tela:

room.screen.enableAudio();

Para desativar o áudio do apresentador durante o compartilhamento de tela:

room.screen.disableAudio()

Detectar quando outros clientes publicam transmissões de compartilhamento de tela

Quando outros usuários publicam transmissões com compartilhamento de tela, o gerenciador de layout do Video Express adiciona automaticamente o vídeo à página HTML.

Um objeto Participant despacha um screenCreated evento que ocorre quando o participante (não o usuário local) publica uma transmissão de compartilhamento de tela:

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

O evento emite um ScreenSubscriber objeto. O objeto ScreenSubscriber inclui métodos para ativar e desativar a reprodução de áudio e vídeo para a transmissão de compartilhamento de tela no cliente local (consulte Ativar e desativar o áudio e o vídeo de um participante que está compartilhando a tela).

Um objeto Participant despacha um screenDestroyed evento que ocorre quando um participante (não o usuário local) interrompe a transmissão de uma câmera:

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

Ativar e desativar o áudio e o vídeo de um participante que está compartilhando a tela

// 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

Os eventos do Video Express utilizam o emissor de eventos padrão.

Para adicionar ouvintes de evento a um objeto, basta chamar seu on() método. Por exemplo, o código a seguir adiciona um ouvinte para o connected envio de eventos pelo objeto Room:

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

O on() O método recebe dois parâmetros: o nome do evento (uma string) e uma função de retorno de chamada que é chamada quando o evento é disparado.

Em alguns eventos, os argumentos são passados para a função de retorno de chamada. Diz-se que o evento é emitir esses objetos. Por exemplo, a Sala disconnected o evento emite um reason string:

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

O Quarto participantLeft O evento emite dois objetos — um objeto Participant e um reason string:

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

Recursos avançados

Criptografia de ponta a ponta

Para usar a criptografia de ponta a ponta, instancie o Room objeto com um segredo de criptografia:

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

Depois que uma sala é criada com um segredo de criptografia, ela pode ser atualizada para usar um novo segredo chamando a função Room.setEncryptionSecret(encryptionSecret) método:

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

Observação: A criptografia de ponta a ponta precisa ser habilitada primeiro por meio dos SDKs do servidor. Consulte o Guia do desenvolvedor do Video Express.

Sinalização

Depois de entrar em uma sala, você pode usar o Room.signal() método para enviar um sinal a um ou mais participantes na sala.

O código a seguir envia um sinal a todos os participantes da sala:

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

O código a seguir envia um sinal para um participante específico da sala:

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

Você pode incluir um type propriedade do sinal options para ajudar a identificar o sinal:

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

Quando um sinal é recebido, o objeto Room despacha um signal evento, que emite um objeto SignalEvent que define o sinal:

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

Quando um sinal que inclui um type assim que é recebido, o objeto Room despacha um signal:type evento, que emite um objeto SignalEvent que define o sinal:

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

Para obter mais informações, consulte o Room.signal() e o sinal e sinal: eventos no vídeo Documentação de referência rápida. Consulte também o Visão geral da sinalização.

Como definir uma URL de proxy

Com o recurso de proxy de IP, os clientes encaminham todo o tráfego da Internet (exceto transmissões de mídia) por meio do seu servidor proxy. O tráfego que não é de mídia inclui a comunicação com os servidores da Video API e a infraestrutura de registro.

O recurso de proxy de IP está disponível como um recurso adicional.

O código a seguir define a URL do servidor proxy IP. Chame-o antes de chamar o Room() construtor:

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

Para obter mais informações, consulte o Guia do desenvolvedor de proxy IP.

Utilização de servidores TURN personalizados

O recurso configurável do servidor TURN está disponível como um recurso adicional. Para configurar os servidores TURN utilizados pelo cliente Video Express, defina as opções do iceConfig propriedade do options parâmetro do Construtor Room().

Para obter mais informações, consulte o Guia do desenvolvedor do servidor TURN configurável.

Utilização dos dados de conexão

Ao chamar a função para entrar em uma sala do Video Express, você passa um token de conexão. Um token pode conter uma string de dados de conexão opcional, com metadados. Você pode acessar esses dados com o Room.participantConnectionData e Participant.connectionData propriedades.

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

Este exemplo mostra como adicionar dados de conexão ao gerar um token usando o SDK do OpenTok para Node.js:

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

Código do lado do 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 obter mais informações, consulte Visão geral da criação de tokens.

Como usar o Video Express no ambiente Enterprise

Atualmente, o Vonage Video Express oferece apenas um ambiente Padrão. No entanto, é possível utilizar projetos Enterprise com o Video Express. Isso garante que o Video Express utilize a infraestrutura da Vonage, servidores de sinalização e de mídia dedicados a Applications de parceiros que utilizam o ambiente Enterprise. Isso proporciona maior estabilidade diante de mudanças e maior resiliência contra picos de carga na plataforma.

Como usar o Video Express em aplicativos móveis

Veja o Demonstração do Vonage Video Express para iOS e Android aplicativo no GitHub. Esse aplicativo utiliza o Video Express em visualizações da web (como o WKWebView no iOS e o WebView no Android) para aplicativos móveis.

Problemas conhecidos e limitações

O Vonage Video Express funciona com base no OpenTok.js, a Video API do Vonage para JavaScript. Todos os clientes que se conectarem a uma sala do Vonage Video Express devem usar o Vonage Video Express. O uso de outros SDKs de cliente da Video API do Vonage (incluindo clientes web desenvolvidos diretamente com as APIs do OpenTok.js) pode desativar alguns recursos do Vonage Video Express.

Existem algumas limitações dos recursos do OpenTok.js e da plataforma Video API que o Vonage Video Express não oferece suporte:

O Video Express não é compatível com grandes transmissões interativas porque, atualmente, o Video Express exige que todos os clientes que entram em uma sala transmitam um fluxo de câmera.
O Video Express pode demorar um pouco mais para se conectar quando usado com o
Lista de IPs permitidos Recurso. O Video Express tem como objetivo simplificar a experiência do desenvolvedor. Por esse motivo, o Video Express tentará baixar os arquivos de configuração por meio de uma CDN (que pode estar bloqueada pelo seu firewall) antes de utilizar os endereços da lista de IPs permitidos. Não é possível especificar que um cliente utilize apenas os endereços IP permitidos (como seria o caso com o ipWhitelist opção no OpenTok.js OT.initSession() (método). Um cliente do Video Express pode demorar um pouco mais para se conectar do que um cliente que utilize o OpenTok.js configurado com o ipWhitelist opção definida como true ao usar Lista de IPs permitidos com firewalls que bloqueiam redes de distribuição de conteúdo.

Participantes no Video Express correspondem a conexões. As transmissões da câmera e do compartilhamento de tela no Video Express correspondem a correntes. Os dados e eventos relacionados a conexões e fluxos são exibidos em ferramentas de desenvolvimento como o Inspector, o Insights e outros. O Video Express fornece IDs de conexão, por meio de Participant.id, Room.participantId, e as chaves de Room.participants, que podem ser usados para identificar usuários específicos para conexão e eventos e dados de transmissão. Alguns recursos que exigem IDs de conexão e de transmissão não são compatíveis com o Video Express. Entre eles estão:

A maioria Recursos de moderação. No entanto, você pode usar o método da API REST para forçar o silenciamento do áudio em todas as transmissões de uma sala do Video Express (embora não seja possível incluir uma lista de IDs de transmissões a serem excluídas). Mais recursos de moderação do Video Express serão lançados em breve.
Seleção dos fluxos a serem incluídos em um arquivo ou transmissão ao vivo.
Alterando a classe de layout para um arquivo ou transmissão ao vivo que utiliza um layout personalizado.

O Vonage Video Express não oferece acesso ao OpenTok.js subjacente Editora e Assinante objetos. Portanto, não é possível usar o getStats() e getRtcStatsReport() métodos desses objetos. O Video Express otimiza automaticamente a taxa de quadros e a resolução de todos os fluxos de vídeo, de modo que não há necessidade de chamar o setPreferredFrameRate() e setPreferredResolution() métodos para um assinante ou editor.

Para obter detalhes sobre problemas conhecidos e problemas corrigidos, consulte o Notas de lançamento do Vonage Video Express.