Crie seu app de vídeo chat com WebRTC
Tags: webrtc, streaming, video, chat
Published: 2020-10-08 15:34:51

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](https://bitbucket.org/pcmporto/api-p2p-video-chat/src/master/).

###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](https://webrtc.org/).

###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](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Connectivity#:~:text=for%20your%20needs.-,ICE%20candidates,or%20through%20a%20TURN%20server)).

![Stun Server](https://dev-to-uploads.s3.amazonaws.com/i/bury8yev46ykj6zu3qqy.jpg)

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](https://bloggeek.me/webrtc-turn/). Esta ferramenta tem o objetivo de intermediar o tráfego de dados entre os pares.

![Turn Server](https://dev-to-uploads.s3.amazonaws.com/i/93k2i75fmbyn4ir3s6sz.jpg)

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](https://github.com/coturn/coturn).

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](https://dev-to-uploads.s3.amazonaws.com/i/kv67l4gsakeze2nfk0lg.jpg)

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](https://www.scaledrone.com/), 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)](https://www.voip-info.org/srtp/) para vídeo e audio, e [DTLS (Datagram Transport Layer Security)](https://www.3cx.com/webrtc/dtls/) 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](https://dev-to-uploads.s3.amazonaws.com/i/h02hdos30hngacqdhvzz.jpg)

####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](https://tools.ietf.org/html/rfc4566)) 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](https://dev-to-uploads.s3.amazonaws.com/i/wnvdx8k0umsscc1eo1ua.jpg)

No vídeo a seguir temos o teste do Projeto e mais detalhes sobre o código fonte.
{% youtube nu7vew-zypY %}

Criei este vídeo auxiliar na instalação e execução do projeto.
{% youtube DSf4K7jL18Y %}

###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.