Streaming p2p de áudio, vídeo e dados na web
WebRTC - Workshop
W3C Recommendation

Guilherme Siquinelli
nickname guiseek


github // github.com/guiseek
profile // guiseek.dev
twitter // twitter.com/guiseek

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
O que veremos
- O que é a WebRTC e como ela funciona
- Implementar um App em tempo record
- Demo, ligação com app criado por nós
WebRTC
Padrões, protocolos e APIs JavaScript
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
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

Peculiaridades WebRTC
P2P
Conexões diretas ponto a ponto geralmente fornecem baixa latência.
Privacidade
Troca de informações de forma realmente privada.
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
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


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.onopen = console.log
channel.onmessage = 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)
}
const onDataChannel = (peer) => ({ channel }) => {
const peerChannel = channel
peerChannel.onmessage = console.log
peerChannel.onopen = console.log
peer.channel = peerChannel
}
const peer = new RTCPeerConnection()
peer.onicecandidate = onIceCandidate(peer)
peer.ondatachannel = onDataChannel(peer)
Peer 2
peer.setRemoteDescription(/* session */)
peer.createAnswer().then(onAnswer(peer))
Peer 1
peer.setRemoteDescription(/* session */)
Padrões e protocolos
Camada de aplicação
Camada de transporte
Camada de rede
HTTP
WebSock
SRTP
SDP
STUN
ICE
TURN
TLS
TCP
DTLS
UDP
SCTP
DTLS
UDP
IP

Criptografia a nível de protocolo
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.
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 - Workshop
By Guilherme Siquinelli
WebRTC - Workshop
Streaming p2p de áudio, vídeo e dados na web
- 254