Vonage Video Express

Aviso de descontinuação

O Vonage Video Express está obsoleto. Embora a biblioteca continue disponível para integrações existentes, recomendamos que todos os novos projetos e clientes que pretendam migrar utilizem o Aplicativo de referência da Video API.

Por que essa mudança?

O Aplicativo de referência da Video API oferece uma base mais robusta, moderna e personalizável para o desenvolvimento de aplicativos de vídeo com múltiplos participantes. Ela oferece:

  • Melhores práticas: Implementação atualizada dos SDKs do Core Video.
  • Interface do usuário pronta para produção: Componentes altamente personalizáveis para a Web, iOS e Android.
  • Recursos avançados: Melhor suporte a layouts complexos e aos recursos dos navegadores modernos.

Próximos passos:

Introdução

O Vonage Video Express é uma biblioteca JavaScript para criar rapidamente um aplicativo web de videoconferência com vários participantes. Ele funciona com base na Video API do Vonage para JavaScript.

Observações importantes:

Antes de usar o Video Express, certifique-se de ativar o complemento do Video Express no seu Account.

  1. Acesse o seu Video API Account e clique em Configurações da conta no menu à esquerda.
  2. Na lista de Complementos da conta, encontrar Video Express e clique em Adicionar à Account. Em seguida, siga as instruções restantes para ativar o complemento.

Atualmente, o Vonage Video Express 1.0 suporta 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.

Um guia rápido

  1. Instale o pacote Video Express:
  • Instalação usando o npm pacote

    npm i --save @vonage/video-express
  • Também podemos usar uma tag de script no <head> seção da página HTML, para incluir o Vonage Video Express em nosso aplicativo

    <script src="https://static.opentok.com/v1/js/video-express.js"></script>
    
  1. 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 salve o arquivo e inclua-o no seu head seção:

<link rel="stylesheet" href="/path/to/video-express-styles.css" media="screen" charset="utf-8">
  1. Adicione um div elemento dentro do body seção. Esta será a contêiner de quarto. O SDK irá inserir todos os seus componentes DOM dentro deste contêiner:
<body>
  <div id="roomContainer"></div>
</body>
  1. Use este trecho de código para criar uma sala e para participar a videoconferência. Para criar o objeto “sala”, você precisará fornecer sua chave de API do OpenTok, um ID de sessão do OpenTok e um token para a sessão:
<script type="text/javascript">
  const room = new VideoExpress.Room({
    apiKey: '', // add your OpenTok API key
    sessionId: '', // add your OpenTok Session ID
    token: '', // add your OpenTok token
    roomContainer: 'roomContainer',
  });

  room.join();
</script>

Consulte os guias para desenvolvedores da OpenTok em Criação de sessão e Criação de tokens.

Mais recursos

Veja o Referência da API do Video Express e guia do desenvolvedor.

E confira esses aplicativos de exemplo no GitHub:

  • aplicativo-video-express-React — Um aplicativo de videoconferência com vários participantes desenvolvido com o Video Express e o Create React App. Além dos recursos oferecidos pelo Video Express, o aplicativo inclui a seleção do nome da sala e dos participantes, arquivamento (gravação) e muito mais.

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