Combine ponto de conexão e sinalização

event 29 de agosto de 2018 às 6:12 am

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

  1. 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 ?
  2. O exemplo tem o nome da sala foo em código puro, Qual seria a melhor forma para permitir outros nomes de sala ?
  3. Como os usuários compartilham o nome da sala? Tente construir uma alternativa para compartilhar os nomes de sala.
  4. 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.

Deixe uma resposta

// Posts Recentes

Formulário Respondeu!