Comunicação p2p em tempo real na Web
WebRTC


Guilherme Siquinelli
Arquiteto Front-end e Co-fundador da comunidade DevParaná


Erga a mão quem
- Já tinha ouvido falar sobre APIs WebRTC
-
Já viu alguma aplicação usando WebRTC
- Já desenvolveu algum app com WebRTC
- Tem algo usando WebRTC em produção
W3C Recommendation
WebRTC
Padrões, protocolos e APIs JavaScript
O que veremos
- O que é a WebRTC e como ela funciona
-
Alguns exemplos de casos de uso reais
- Hands On de conexão WebRTC ao vivo
- Demo, ligação com app criado por mim
Padrões
- Acesso a câmera, áudio, microfone e tela
- Conexão direta entre 2 navegadores web
- Técnica de travessia NAT para transporte
- Codecs de qualidade isentos de royalties
3 APIs principais
- RTCPeerConnection
- RTCDataChannel
- MediaStream
E mais algumas

Tiremos nossas próprias conclusões
RTCPeerConnection
Comunicação de dados para áudio e vídeo
RTCDataChannel
Comunicação de dados entre aplicativos
MediaStream
Acesso à fluxos de
áudio e vídeo
Media Stream
addTrack
onaddtrack

Mais simples?
Casos de uso
-
Telefonia VoIP
-
Mensagens rápidas
-
Envio de arquivos
-
CDN descentralizada
-
Telemedicina
-
Educação a distância
-
Comunicação pessoal
-
Call centers
-
Entretenimento
-
Game multiplayer
-
Vigilância remota
-
Internet das coisas
-
Bots e Drones
-
Bancos e seguros
-
Carros autônomos
Com a criatividade humana, os itens anteriores são apenas o começo pra uma nova forma de comunicação

Peculiaridades WebRTC
P2P
Conexões diretas ponto a ponto geralmente fornecem baixa latência.
Privacidade
Troca de informações de forma realmente privada.
Eficiência
Por ser ponto a ponto, elimina a necessidade de serializar e re-codificar em cada etapa do processo
Simplicidade
Oferecer aplicativos RTC ricos e de alta qualidade, como teleconferência de áudio e vídeo e troca de dados ponto a ponto, requer muitas novas funcionalidades no navegador
A ponta do Iceberg
Sinalização, descoberta de pares, negociação de conexão, segurança e camadas inteiras de novos protocolos são apenas alguns componentes necessários para reunir tudo
Outras vantagens
- Seu navegador, sem plugins...
- Feita sinalização, 100% P2P
- Tráfego criptografado por padrão
Até onde vai?
WebRTC é projetado para que funcione com tecnologias já existentes, como VoIP, clientes SIP,
incluindo PSTN ou rede de telefonia pública...
Especificação ativa
Ainda que já habilitado e funcionando,
as APIs do navegador e dos níveis de
transporte e protocolo encontram-se
em desenvolvimento e podem mudar
no futuro

Desvantagens
- Suporte de navegadores
- Sinalização
- Escalabilidade
Onde usar WebRTC
- Entrega de áudio e vídeo de baixa latência em navegadores ou celulares.
- Streaming de baixa latência de dados binários ou eventos, como entradas de teclado, mouse ou gamepad.
- Streaming de jogos para navegador.
Onde não usar WebRTC
- Distribuição em grande escala de mídia pré-gravada ou já renderizadas.
- Streaming em vídeo não compatível com navegadores modernos.
- Compatibilidade com navegadores mais antigos.
Como funciona

-
A quer se comunicar com B
-
A encontra caminhos públicos para se conectar a B
-
B encontra caminhos públicos para se conectar a A
-
A e B coletam requisitos para se comunicarem
criptografia, codecs de vídeo / áudio, endereços IP e etc
-
A e B sinalizam informações coletadas para a sessão
WebSockets, HTTP fetch, Tweet, WhatsApp, QRCode e etc
- A se conecta a B com o menor caminho encontrado








- A quer se comunicar com B
- A encontra caminhos públicos para se conectar a B
- B encontra caminhos públicos para se conectar a A
- A e B coletam requisitos para se comunicarem criptografia, codecs de vídeo / áudio, endereços IP e etc
- A e B sinalizam informações coletadas para a sessão WebSockets, HTTP fetch, Tweet, WhatsApp, QRCode e etc
- A se conecta a B com o menor caminho encontrado



Eventos DataChannel
open
message
bufferedmountlow
closing
close
error
open
bufferedamountlow
error
message
closing
close

open
O transporte de dados foi estabelecido ou restabelecido.
Event
const conn = new RTCPeerConnection(config);
const channel = conn.createDataChannel(label, {
ordered: true, maxRetransmits: 10
});
As propriedades de configuração do transporte de dados, como configurações de entrega de pedido e modo de confiabilidade, são configuradas pelo par subjacente, conforme o canal é criado.

Show me the code
Talk is cheap

Peer 1
const onIceCandidate = (peer) => ({ candidate }) => {
console.log(JSON.stringify(peer.localDescription))
}
const onOffer = (peer) => (o) => {
peer.setLocalDescription(o)
}
const peer = new RTCPeerConnection()
peer.onicecandidate = onIceCandidate(peer)
const channel = peer.createDataChannel('channel')
channel.onmessage = ({ data }) => {
console.log(`%c ${data}`, 'font-size: 24px')
}
channel.onopen = console.log
peer.createOffer().then(onOffer(peer))
Peer 2
const onIceCandidate = (peer) => ({ candidate }) => {
console.log(JSON.stringify(peer.localDescription))
}
const onAnswer = (peer) => (o) => {
peer.setLocalDescription(o)
}
let channel
const onDataChannel = (peer) => (event) => {
channel = event.channel
channel.onmessage = ({ data }) => {
console.log(`%c ${data}`, 'font-size: 24px')
}
channel.onopen = console.log
}
const peer = new RTCPeerConnection()
peer.onicecandidate = onIceCandidate(peer)
peer.ondatachannel = onDataChannel(peer)
Peer 2
/* Cole a sessão do peer 1 */
peer.setRemoteDescription( )
peer.createAnswer().then(onAnswer(peer))
Peer 1
/* Cole a sessão do peer 2 */
peer.setRemoteDescription( )
Padrões e protocolos
Camada de aplicação
Camada de transporte
Camada de rede
HTTP
WebSock
SRTP
SDP
STUN
ICE
TURN
TLS
DTLS
TCP
UDP
SCTP
IP
DTLS
Ice Candidate
STUN
SDP
NAT
Signaling



Criptografia a nível de protocolo



COVID-19

Navegadores

Navegadores Mobile

Navegadores Mobile

Conclusão
WebRTC não está trazendo a comunicação em tempo real para o navegador... não apenas.
WebRTC está levando os recursos da Web para o mundo das telecomunicações. Uma industria que trabalha com valores na casa de trilhões anualmente, com ótimas novas oportunidades.
Demo time
Speek Video
- Signaling NestJS
- WebApp Angular
- Progressive Web App
- Open source (MIT)


Perguntas?
Podcast 252 WebRTC
Obrigado a
atenção de todos!


Guilherme Siquinelli
WebRTC
By Guilherme Siquinelli
WebRTC
Comunicação p2p em tempo real na Web
- 759