OpenTok.js

A biblioteca OpenTok.js permite que você utilize sessões de vídeo na web com tecnologia da Video API da Vonage.

• Visão geral do SDK
• Referência da API
• Tutoriais
• Amostras
• Notas de lançamento

Todos os aplicativos que utilizam a Video API da Vonage são compostos por duas partes:

• O lado do cliente, que utiliza o SDKs do cliente OpenTok e é executado no navegador ou no aplicativo móvel do usuário
• O lado do servidor, que utiliza o SDKs de servidor do OpenTok e é executado no seu servidor para transmitir as informações de autenticação ao cliente

O Client SDK do cliente para a criação de aplicativos baseados na web que utilizam a Video API da Vonage é OpenTok.js. Essa biblioteca JavaScript oferece a maior parte das funcionalidades essenciais para o seu aplicativo, incluindo:

• Conectando-se a uma sessão
• Publicação de fluxos em uma sessão
• Inscrição em streams durante uma sessão

Também estão disponíveis SDKs para clientes para iOS e Android. Todos os SDKs de clientes do OpenTok podem interagir entre si. Você pode saber mais sobre os conceitos básicos dos clientes, servidores e sessões do OpenTok, entre outros assuntos, em nosso Noções básicas sobre a Video API página.

Observações importantes

• Chrome M136 no Windows – problema na detecção de dispositivos de áudio. Estamos cientes de um problema no Chrome M136 no Windows, em que o navegador pode, ocasionalmente, responder lentamente ou apresentar falhas ao recuperar informações do dispositivo de áudio. Esse é um problema conhecido e já foi corrigido na versão 137.0.7150.0 do Chrome; a correção também foi incorporada a uma atualização futura do Chrome 136, com lançamento previsto para breve. Enquanto isso, caso você encontre esse problema, recomendamos reverter para o Chrome 135 e fixá-lo, ou usar um navegador alternativo. Entre em contato com o suporte caso precise de ajuda para implementar uma solução alternativa.
• Problemas corrigidos no Safari 15.4 e 15.5. As versões 15.4 e 15.5 do Safari (que vêm com o iOS 15.4 e 15.5 e o macOS 12.3 e 12.4) corrigem os seguintes problemas, que poderiam afetar aplicativos que utilizam o OpenTok.js (no Safari):
  • Problemas de áudio ao usar determinados modelos de fones de ouvido Bluetooth. Em alguns modelos de fones de ouvido Bluetooth, o áudio pode falhar. Isso Bug do WebKit foi corrigido no Safari 15.4.
  • Problemas de eco ao alternar entre microfones no Safari do macOS. A troca do microfone utilizado por um emissor pode causar um eco no áudio do emissor. O eco não foi percebido pelo ouvinte. Isso Bug do WebKit foi corrigido no Safari 15.5.
  • Falha crítica na publicação de vídeos H.264 em sessões roteadas no iOS 15.1. No iOS 15.1, a publicação de vídeos H.264 em sessões roteadas falhava. Isso Bug do WebKit foi corrigido no Safari 15.4.
  • Baixo volume de áudio no Safari do iOS. Isso Bug do WebKit foi corrigido no Safari 15.4.
• Criptografia de ponta a ponta — No OpenTok.js 2.27.0, a criptografia de ponta a ponta não funcionará com clientes que utilizem uma versão anterior do OpenTok.js. Ao atualizar seu aplicativo para usar o OpenTok.js 2.27.0 ou superior, certifique-se de que todos os clientes estejam usando o OpenTok.js 2.27.0 ou superior, caso o aplicativo utilize criptografia de ponta a ponta.

Interoperabilidade

A versão atual da biblioteca OpenTok.js, 2.35.1, é compatível com aplicativos OpenTok desenvolvidos com a versão 2.33 ou superior dos SDKs do cliente OpenTok:

• OpenTok.js
• SDK do OpenTok para Android
• SDK do OpenTok para iOS
• SDK do OpenTok para Windows
• SDK do OpenTok para macOS
• SDK do OpenTok para Linux
• SDK do OpenTok para React Native

Instalação

Para carregar o OpenTok.js na sua página da web, adicione a seguinte tag de script:

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

Instalação via GitHub Packages

Além da instalação a partir do repositório do npm, os pacotes do Client SDK também estão disponíveis por meio de Registro NPM do GitHub Packages. Isso oferece um canal de distribuição alternativo para ambientes corporativos que exigem gerenciamento de pacotes baseado no GitHub.

Pacotes disponíveis

O pacote a seguir foi publicado no GitHub Packages:

• @opentok/client - Disponível em GitHub Packages (organização OpenTok)

Instruções de configuração

Para instalar pacotes do registro NPM do GitHub Packages, é necessário configurar o npm para se autenticar no GitHub:

1. Criar um token de acesso pessoal (PAT) do GitHub

Gere um token de acesso pessoal com read:packages escopo nas configurações da sua conta do GitHub.

2. Configure seu .npmrc arquivo

Adicione a seguinte configuração ao arquivo do seu projeto .npmrc arquivo ou seu nível de usuário ~/.npmrc arquivo:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@vonage:registry=https://npm.pkg.github.com

Substituir YOUR_GITHUB_TOKEN com seu token de acesso pessoal do GitHub.

3. Instale o pacote

Depois de configurado, você pode instalar o pacote usando o comando padrão `npm install`:

npm install @opentok/client

Nota sobre a disponibilidade do pacote

Tanto o registro tradicional do npm quanto o registro do GitHub Packages são mantidos em sincronia. Você pode escolher qualquer um dos métodos de distribuição, de acordo com as preferências de gerenciamento de pacotes da sua organização. O método tradicional de instalação do npm (por meio de npm install @opentok/client (do Registro padrão) continua sendo totalmente compatível e não requer nenhuma configuração adicional.

Para obter mais informações sobre como trabalhar com o registro NPM do GitHub Packages, consulte o Documentação do GitHub Packages.

Requisitos do sistema

Para garantir uma transmissão de vídeo confiável nos navegadores modernos, verifique se o seu dispositivo atende às seguintes especificações recomendadas:

• CPU: Um processador dual-core recente; um quad-core (por exemplo, Intel Core i5 / Ryzen 5) ou superior para resolução 1080p ou multitarefa pesada.
• GPU: Placa gráfica integrada moderna (Intel UHD/Iris Xe, AMD Radeon ou Nvidia Graphics) para 1080p; recomenda-se fortemente o suporte à decodificação por hardware para codificação de vídeo.
• Memória RAM: Pelo menos 8 GB para streaming no dia a dia; recomenda-se 16 GB se você mantiver muitas abas ou aplicativos abertos.
• Armazenamento: Recomenda-se o uso de SSD para um carregamento rápido e maior agilidade do sistema.
• Rede: Conectividade confiável à Internet; funciona por Wi-Fi, Ethernet ou rede móvel.
• Outros: A aceleração por hardware deve estar ativada no navegador para garantir o melhor desempenho.

Essas recomendações garantem uma reprodução estável, menor uso da CPU e um desempenho fluido durante a transmissão de vídeo.

Aprendendo a Construir

A melhor maneira de aprender a usar a biblioteca OpenTok.js é seguir nosso tutorial básico sobre bate-papo por vídeo para a web:

Ver tutorial

Depois de compreender os conceitos básicos da programação com o OpenTok.js, você poderá obter informações mais detalhadas e aprender a personalizar seu aplicativo com nosso Guias para desenvolvedores. Para investigar classes e métodos específicos da API, você pode consultar a Referência do OpenTok.js.

Compatibilidade com navegadores

Atualmente, a biblioteca OpenTok.js é compatível com:

• Google Chrome (versão mais recente)
• Google Chrome para Android (versão mais recente)
• Google Chrome para iOS (versão mais recente)
• Firefox (versão mais recente)
• Firefox para Android (versão mais recente)
• Suporte à versão beta do Firefox para iOS (versão de lançamento mais recente)
• Versões 79 e superiores do Microsoft Edge para Windows e macOS (versões do Edge baseadas no Chromium)
• Safari no macOS e no iOS (versão mais recente). Para obter informações sobre interoperabilidade de vídeo e outras questões, consulte o Compatibilidade com o navegador Safari página.
• Opera (apenas a versão mais recente para desktop)
• Electron (versão mais recente)
• Samsung Internet (versão mais recente)
• WebView (android.webkit.WebView) Nível de API do Android 36 ou superior
• WebView (wkwebview) iOS 18.6 ou superior

Importante: A versão 2.16 do OpenTok.js foi a última a oferecer suporte ao plug-in do OpenTok para o Internet Explorer. A versão 2.16 do OpenTok.js foi descontinuada em maio de 2020 para o ambiente Standard e em junho de 2020 para o ambiente Enterprise.

Suporte a Async/Await e Promise

A partir da versão 2.35.1, o JS SDK oferece suporte a async/await e padrões baseados em promessas, juntamente com a API existente baseada em callbacks. Essa mudança é totalmente compatível com versões anteriores — todo o código existente baseado em callbacks continua funcionando sem necessidade de modificações.

Estão disponíveis dois padrões, dependendo do método:

Métodos que anteriormente retornavam void (como, por exemplo, session.signal(), OT.getDevices() e outros) agora aceitam uma função de retorno opcional e também retornam um Promise. Veja a lista completa abaixo dos trechos de código:

// Callback style (still works)
session.signal({ data: 'hello' }, function(error) {
  if (error) { console.error(error); }
  else { console.log('Signal sent'); }
});

// Promise / async-await style (new in 2.35.1)
try {
  await session.signal({ data: 'hello' });
  console.log('Signal sent');
} catch (error) {
  console.error(error);
}

Métodos que anteriormente retornavam um objeto (como, por exemplo, OT.initPublisher(), session.publish(), e session.subscribe()) revelam uma nova .promise() função no próprio método. Veja a lista completa abaixo dos trechos de código:

// Callback style (still works)
const publisher = OT.initPublisher(targetElement, properties, function(error) {
  if (error) { console.error(error); }
});

// Promise / async-await style (new in 2.35.1)
try {
  const publisher = await OT.initPublisher.promise(targetElement, properties);
} catch (error) {
  console.error(error);
}

Métodos atualizados

Os métodos a seguir foram atualizados para oferecer suporte a promessas:

Funções que anteriormente retornavam void — o parâmetro de retorno de chamada agora é opcional e a função também retorna um Promise:

Funções que antes retornavam um objeto — um novo .promise() A função é disponibilizada no próprio método:

As definições do TypeScript foram atualizadas para refletir todas as novas assinaturas.

Números de versão

Você pode incluir a biblioteca OpenTok.js em sua página da web usando um <script> tag:

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

O número da versão do OpenTok.js é composto por três partes:

• O número da versão principal — Esse número (o primeiro) é incrementado quando há uma nova versão que inclui uma alteração na API que não é compatível com versões anteriores.
• O número da versão secundária — Esse número (o segundo número) é incrementado quando há uma nova versão que adiciona novas funcionalidades.
• O número da atualização — Esse número (o terceiro) é incrementado quando há uma nova versão que corrige bugs ou melhora o desempenho sem adicionar novas funcionalidades.

Por exemplo, a v2.4.0 corresponde à versão principal 2, à versão secundária 4 (da versão principal 2) e à revisão 0 (da v2.4). À medida que as versões de revisão são lançadas, as alterações são incluídas na revisão secundária raiz. Por exemplo, quando a v2.2.3 é lançada, suas alterações são incluídas na v2.2.

Para fazer referência a uma revisão específica, você pode incluir o número completo da versão (como “v2.4.0”) no src atributo. No entanto, recomendamos que você especifique apenas o número da versão principal. A Vonage oferece suporte oficial à versão atual da biblioteca. Caso esteja carregando uma versão mais antiga, solicitamos que você faça a atualização para aproveitar as correções de bugs e os recursos mais recentes da plataforma OpenTok.

Importante: Sempre utilize as bibliotecas que fornecemos sem alterações. Isso garante que você utilize o código mais recente, atualizado e testado. A Video API da Vonage não suporta o uso de bibliotecas modificadas.

Para obter mais informações sobre versões específicas do OpenTok.js, consulte o OpenTok notas de lançamento. Para saber quando novas versões do OpenTok.js forem disponibilizadas, acesse o Video API - Novos lançamentos página e clique no Siga botão.

Exemplos de código

Para ver exemplos de código, acesse nosso repositório video-api-web-samples no GitHub.

Documentação e mais informações

Veja o Referência da API do OpenTok.js e o Guias para desenvolvedores do OpenTok.

Para obter uma lista dos novos recursos e dos problemas conhecidos, consulte o notas de lançamento.