Testando seu código em um navegador
Neste momento, o seu app.js O arquivo deve ficar mais ou menos assim (com alguns ajustes):
// replace these values with those generated in your Video API account
var applicationId = "YOUR_APP_ID";
var sessionId = "YOUR_SESSION_ID";
var token = "YOUR_TOKEN";
initializeSession();
// Handling all of our errors here by alerting them
function handleError(error) {
if (error) {
alert(error.message);
}
}
function initializeSession() {
const session = OT.initSession(applicationId, sessionId);
// Subscribe to a newly created stream
session.on('streamCreated', function(event) {
session.subscribe(event.stream, 'subscriber', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
});
// Create a publisher
const publisher = OT.initPublisher('publisher', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
// Connect to the session
session.connect(token, function(error) {
// If the connection is successful, publish to the session
if (error) {
handleError(error);
} else {
session.publish(publisher, handleError);
}
});
}
No seu código finalizado, você deve ter valores fixos para substituir YOUR_APP_ID, YOUR_SESSION_ID e YOUR_TOKEN — se você ainda não fez isso, consulte Configurando a autenticação acima.
- Abra o
index.htmlabra o arquivo no seu navegador clicando duas vezes nele. - O navegador solicitará permissão para usar sua câmera e seu microfone; vá em frente e conceda o acesso.
- Você deve se ver aparecer na tela.
A seguir, podemos testar como fica quando outra pessoa se conecta. Embora nosso código não esteja acessível pela internet, podemos simular isso abrindo esta página em outra janela.
- Desative o microfone para evitar qualquer eco.
- Copie a URL da barra de endereços do seu navegador.
- Abra uma nova janela ou aba e cole o endereço para abrir o arquivo.
- Agora você deve se ver duas vezes (com uma imagem espelhada da outra, dependendo do seu navegador).
Dica para solução de problemas: Se nenhum vídeo estiver sendo exibido na página, abra a aba “console” nas ferramentas do seu navegador (command+option+i no Mac, CTRL+i no Windows) e verifique se há erros. O problema mais provável é que sua chave de API, ID de sessão ou token não esteja configurado corretamente. Como você inseriu suas credenciais diretamente no código, também é possível que seu token tenha expirado.
Bate-papo por vídeo básico
Aprenda os conceitos básicos da plataforma Vonage Video API, incluindo como os usuários podem se comunicar por vídeo, voz e mensagens. Explore um fluxo básico da Vonage Video API.