DEV Community

Cover image for Crie seu app de vídeo chat com WebRTC
Paulo Porto
Paulo Porto

Posted on • Updated on

Crie seu app de vídeo chat com WebRTC

Este artigo é um exemplo/tutorial de como utilizar WebRTC para chamadas de vídeos e troca de mensagens de texto.

Download do código fonte aqui.

O que é WebRTC?

WebRTC (Web Real Time Communication) é um projeto open source que visa prover comunicação em tempo real p2p (peer-to-peer) dentro dos navegadores sem a necessidade de plugins externos.

Basicamente, com um navegador compatível (Chrome, Mozilla Firefox, Maxthon Cloud Browser e Opera) você pode conectar-se a outra pessoa para realizar chamadas de vídeo/voz, transferir arquivos e enviar mensagens.

Veja mais aqui.

Como funciona?

Para conectar dois pares, cada par precisa conectar a um STUN Server (Session Traversal Utilities for NAT) para descobrir seu ip público e quais portas e protocolos disponíveis (Ice Candidates).

Stun Server

Existe uma lista enorme de STUN Servers disponíveis para uso gratuito.

Quando a rede não permite uma conexão direta, necessita a utilização de um Turn (Traversal Using Relays around NAT) server. Esta ferramenta tem o objetivo de intermediar o tráfego de dados entre os pares.

Turn Server

Infelizmente, Turn servers tem grande consumo de rede e este é o principal motivo para que eles não sejam gratuitos. Existem diversas empresas que oferecem este serviço, mas você pode configurar o seu próprio Turn Server. Veja um exemplo aqui.

Os pares não tem conhecimento da existência um do outro, por isso para gerir a conexão entre os pares é necessário um Signaling Server.

Signaling Server

O Signaling Server, por sua vez, não cuida do tráfego de media, ele apenas permite que os pares negociem uma conexão.

Existem soluções prontas como esta, mas nosso objetivo é criar nosso próprio Signaling Server.

Segurança

A WebRTC é padronizada pelo W3C e para evitar que terceiros interceptem a transmissão, sua implementação obriga a utilização de criptografia SRTP (Real-Time Transport Protocol) para vídeo e audio, e DTLS (Datagram Transport Layer Security) para os outros dados.
Para ter acesso aos recursos de áudio e vídeo é necessário autorização do usuário.

O Projeto

Este projeto consiste em usar WebRTC para a criação de um app para vídeo chat e troca de mensagens de texto, e também um Signaling Server utilizando Node JS, Express e SocketIO.

Index Room form

Processo

  1. Peer A acessa a página e autoriza a utilização do microfone e da câmera.
  2. Peer A Informa qual sala deseja entrar.
  3. Signaling Server notifica aos outros usuários presentes na sala que um novo acabou de entrar.
  4. Peer B que já estava na sala envia uma proposta de conexão p2p (Offer SDP) para o novo usuário.
  5. Peer A através do Signaling server recebe a proposta e retorna o aceite.
  6. Peer B através do Signaling server recebe o aceite e ambos estão conectados.
  7. Peer A e o Peer B trocam Ice Candidates pelo Signaling server

Fluxo

No vídeo a seguir temos o teste do Projeto e mais detalhes sobre o código fonte.

Criei este vídeo auxiliar na instalação e execução do projeto.

Conclusão

A WebRTC é bem simples de implementar e é uma tecnologia promissora que grandes apps como Google Meet, Google Hangouts, Facebook Messsenger e Discord já utilizam.

Os serviços de VPN privada solicitam que seus clientes desativem o recurso no navegador, pois alguns sites utilizam a tecnologia para descobrir o IP real usuário e com isso criar uma falha de segurança nos serviços.

Portanto, esta é uma tecnologia segura e, sem dúvida, uma boa opção para quem está desenvolvendo APPs voltados para comunicação.

Latest comments (10)

Collapse
 
carlos_cirne profile image
Carlos Cirne

Amigo o meu funcionou certinho no servidor com android e pc so que com ios quando eu entro na sala primeiro no ios e pelo pc ou android entro depois consigo ver a camera do iphone mas no iphone fica tudo preto. no iphone quando entro numa sala ele fica travado em requesting offers. eu permito a camera quando carrega mas mesmo assim fica tudo preto quando inicia. sabe o que pode ser? tentei no chrome ios tbm e nada

Collapse
 
sitessac profile image
sitessac

Paulo, chat tem bastante tutoriais por ai, não tão bom quanto o seu, mas tem como fazer um de live streaming com webrtc? Parece tão fácil, tem até tutorial do próprio webrtc, lá eles capturam a webcam e exibem em outros players mas na mesma página, tentei de várias formas mas não consigo exibir em outras páginas, tipo um embed daquela live por exemplo. Link do tutorial do webrtc webrtc.github.io/samples/src/conte...

Collapse
 
marcomello95 profile image
Marco Mello

Não consegui rodar aqui. Estou rodando local na minha máquina, e tentando conectar com o celular, o celular vai para página e fica só carregando. Consegue me ajudar?

Collapse
 
cesarpaulomp profile image
Paulo Porto

Oi! Isso ocorre pq você não tem um certificado na url. Da uma olhadinha nesse video aqui! youtu.be/DSf4K7jL18Y

Collapse
 
mkall_rsl profile image
Marcelo Kahl

Paulo, gostaria de entrar em contato com vc sobre esta solução e desenvolvimento via app. fico no seu aguardo

Collapse
 
cesarpaulomp profile image
Paulo Porto

Olá Marcelo, infelizmente não estou disponível como freelancer. Posso te ajudar de outra forma?

Collapse
 
pauloizidorio profile image
PI.Dev

Paulo Porto,
Qual a diferença desse para os outros dois artigos anteriores que falar sobre Crie seu servidor de Live Streaming privado ?

Collapse
 
sitessac profile image
sitessac

esse é um chat, pra conversa, onde os dois se vêem, os outros dois é para um só se exibir para vários.

Collapse
 
cesarpaulomp profile image
Paulo Porto

PI, a part 1 é apenas uma configuração mais simples.
Na part 2 eu ensino como utilizar o ffmpeg para customizar.
Por exemplo você pode utilizar o ffmpeg para entregar em diferentes resoluções.

Collapse
 
pauloizidorio profile image
PI.Dev

ótimo artigo, está de parabéns Paulo Porto!