Olá, mundo

Configure um chat de áudio e vídeo simples, acessível pelo navegador, em poucos minutos.

Pré-requisitos

Configuração básica do OpenTok código do lado do cliente na internet é relativamente simples, mas você precisará de algumas coisas para garantir que funcione corretamente:

  • Navegador Chrome ou Firefox — O OpenTok é compatível com vários navegadores, mas, para esta demonstração, recomendamos usar o Chrome ou o Firefox
  • Câmera e microfone — seu navegador solicitará que você conceda acesso a esses dispositivos

Configure um chat simples de áudio e vídeo com o OpenTok

A seguir, está um documento HTML editável carregado com o OpenTok.js biblioteca. Siga as etapas descritas abaixo do documento HTML para configurar rapidamente um chat básico do OpenTok.

Veja a caneta "Olá, Mundo" Incorporado (@tokbox) em CodePen.

Etapa 1 de 5: Autenticação

Copie o trecho de código abaixo e adicione-o ao HTML documento em // credentials (use o (botão “Copiar”.)

var apiKey = 'Gerando...';
var sessionId = 'Gerando...';
var token = 'Gerando...';

Você deve apresentar um documento válido Chave de API, ID da sessão, e token ao se conectar a uma sessão do OpenTok. Essas credenciais geralmente são geradas pelo seu servidor mas, desta vez, nós os criamos para vocês.

Tudo bem, já adicionei

Etapa 2 de 5: Conecte-se à sessão e crie um editor

Copie o trecho de código abaixo e adicione-o ao HTML documento em // connect to session. Isso criará um vídeo de editor; portanto, seu navegador poderá solicitar acesso à sua câmera e ao seu microfone.

var sessão = OT.initSession(apiKey, sessionId);

// criar editor
var publisher = OT.initPublisher();
sessão.conectar(token, função(err) {
       // publicar editor
       
});

Este código inicializa o sessão e editora e então conecta para a sessão. Você deverá ver seu vídeo no painel de saída.

OK, estou vendo meu vídeo. Voltar à etapa anterior

O vídeo não está aparecendo? Tente clicar no    ícone na barra de endereços para ajustar as permissões da sua webcam.

Etapa 3 de 5: Publicar o editor

Copie o trecho de código abaixo e adicione-o ao HTML documento em // publish publisher.

session.publish(publisher);

Este código publica o fluxo de áudio e vídeo para a sessão usando sua webcam e seu microfone.

OK, já adicionei. Voltar à etapa anterior

Etapa 4 de 5: Criar um assinante

Copie o trecho de código abaixo e adicione-o ao HTML documento em // create subscriber. Talvez seja necessário rolar a tela para baixo no documento HTML.

session.on('streamCreated', function(event) {
   sessão.inscrever-se(event.stream);
});

Este código permite que você inscrever-se aos novos fluxos publicados por outros clientes na sessão.

OK, já adicionei. Voltar à etapa anterior

Etapa 5 de 5: Adicione um segundo participante para criar um bate-papo por vídeo individual

Silencie o alto-falante do seu computador (para evitar feedback de áudio). Em seguida, clique no botão abaixo para abrir um segundo cliente em uma nova aba do navegador (usando o Codepen). Isso deve criar um segundo publisher, e você verá dois fluxos de vídeo na página.

Ao clicar no botão abaixo, um Codepen será aberto em uma nova aba do seu navegador; em seguida, você poderá voltar a esta aba.

Voltar à etapa anterior

É isso aí!

Você acabou de configurar um chat de vídeo 1 a 1 (muito) básico usando o OpenTok. Esse é um ótimo primeiro passo, mas o código usado aqui é uma implementação mínima, projetada para que você possa ver rapidamente o OpenTok em ação. Você precisará fazer mais algumas configurações antes de lançar um aplicativo em produção, incluindo a implantação de um servidor.

Próximos passos:

Voltar à etapa anterior