Comunicação p2p em tempo real na Web

WebRTC

@guiseek

/guiseek

Guilherme Siquinelli

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

devparana.mx

github.com/developerparana/recursos

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

w3.org/TR/webrtc

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

  1. A quer se comunicar com B
     
  2. A encontra caminhos públicos para se conectar a B
     
  3. B encontra caminhos públicos para se conectar a A
     
  4. A e B coletam requisitos para se comunicarem
    criptografia, codecs de vídeo / áudio, endereços IP e etc
     
  5. A e B sinalizam informações coletadas para a sessão
    WebSockets, HTTP fetch, Tweet, WhatsApp, QRCode e etc
     
  6. A se conecta a B com o menor caminho encontrado
  1. A quer se comunicar com B
  2. A encontra caminhos públicos para se conectar a B
  3. B encontra caminhos públicos para se conectar a A
  4. A e B coletam requisitos para se comunicarem criptografia, codecs de vídeo / áudio, endereços IP e etc
  5. A e B sinalizam informações coletadas para a sessão WebSockets, HTTP fetch, Tweet, WhatsApp, QRCode e etc
  6. 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

https://caniuse.com/mdn-api_rtcpeerconnection​

Navegadores Mobile

https://caniuse.com/?search=rtcpeerconnection

Navegadores Mobile

https://caniuse.com/?search=rtcpeerconnection

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)

https://speek.video

Perguntas?

Podcast 252 WebRTC

lambda3

Obrigado a

atenção de todos!

@guiseek

/ guiseek

Guilherme Siquinelli

Made with Slides.com