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).
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.
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.
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.
Processo
- Peer A acessa a página e autoriza a utilização do microfone e da câmera.
- Peer A Informa qual sala deseja entrar.
- Signaling Server notifica aos outros usuários presentes na sala que um novo acabou de entrar.
- Peer B que já estava na sala envia uma proposta de conexão p2p (Offer SDP) para o novo usuário.
- Peer A através do Signaling server recebe a proposta e retorna o aceite.
- Peer B através do Signaling server recebe o aceite e ambos estão conectados.
- Peer A e o Peer B trocam Ice Candidates pelo Signaling server
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.
Top comments (10)
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
Paulo Porto,
Qual a diferença desse para os outros dois artigos anteriores que falar sobre Crie seu servidor de Live Streaming privado ?
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.
esse é um chat, pra conversa, onde os dois se vêem, os outros dois é para um só se exibir para vários.
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...
Paulo, gostaria de entrar em contato com vc sobre esta solução e desenvolvimento via app. fico no seu aguardo
Olá Marcelo, infelizmente não estou disponível como freelancer. Posso te ajudar de outra forma?
ótimo artigo, está de parabéns Paulo Porto!
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?
Oi! Isso ocorre pq você não tem um certificado na url. Da uma olhadinha nesse video aqui! youtu.be/DSf4K7jL18Y