O que você vai apreender ?
Nessa etapa, você descobrirá como :
- Executar um serviço de sinalização WebRTC usando Socket.IO executando no Node.js.
- Usar esse serviço para trocar metadados WebRTC entre pares.
Uma versão completa dessa etapa está na pasta step-05.
Substitua o HTML e JavaScript
Substitua o conteúdo do index.html pelo seguinte:
<!DOCTYPE html>
<html>
<head>
<title>Realtime communication with WebRTC</title>
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<div id="videos">
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/main.js"></script>
</body>
</html>Substitua o js/main.js pelo conteúdo de step-05/js/main.js.
Execute o servidor Node.js
Se você não estiver seguindo este tutorial de seu diretório de trabalho, você pode precisar instalar as dependências da pasta step-05 ou sua pasta de trabalha atual. Execute o comando a seguir no seu diretório de trabalho:
npm install
Depois de instalado, se o servidor Node.js não estiver em execução, inicie-o chamando o seguinte comando no diretório de trabalho:
node index.js
Certifique de estar usar a versão do index.js da etapa anterior que implementa o Socket.IO. Para mais informações sobre o Node and Socket.IO, reveja a seção "Configurar um serviço de sinalização para troca de mensagens".
Em seu navegador, abra localhost:8080.
Abra localhost:8080 novamente, em uma nova aba ou janela. Um elemento de vídeo exibirá o stream de getUserMedia() e o outro exibirá o 'remote' vídeo transmitido via conexão via RTCPeerconnection.Veja o registro no console do navegador.
Pontos Bônus
- Esta aplicação só suporta um chat de vídeo de um-para-um. Como você poderia mudar o projeto para permitir que uma pessoa compartilhe a mesma sala de chat de vídeo ?
- O exemplo tem o nome da sala foo em código puro, Qual seria a melhor forma para permitir outros nomes de sala ?
- Como os usuários compartilham o nome da sala? Tente construir uma alternativa para compartilhar os nomes de sala.
- Como você poderia mudar o app.
O que você aprendeu
Nesta etapa você aprendeu como to:
- Executar um serviço de sinalização usando o Socket.IO executando no Node.js
- Usar este serviço para trocar metadados WebRTC entre pontos.
Uma versão completa dessa etapa está na pasta step-05.
Dicas
Estatísticas WebRTC e dados de depuração estão disponíveis em chrome://webrtc-internals.
- Estatísticas WebRTC e dados de depuração estão disponíveis em chrome://webrtc-internals.
- test.webrtc.org pode ser usado para verificar seu ambiente local e testar sua câmera e microfone.
- Se você tiver problemas com cache, tente o seguinte:
- Faça uma atualização forçada mantendo pressionada a tecla ctrl e clicando no botão Recarregar
- Reinicie o browser
- Execute npm cache clean na linha de comando.
Próximo
Descubra como tirar uma foto, obter dados da imagem, e compartilhá-los entre pares remotos.
