Streaming p2p de áudio, vídeo e dados na web

WebRTC - Workshop

W3C Recommendation

w3.org/TR/webrtc

Guilherme Siquinelli

nickname guiseek

github  //  github.com/guiseek

profile  //  guiseek.dev

twitter  //  twitter.com/guiseek

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

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

  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

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)

https://speek.video

Perguntas?

Podcast 252 WebRTC

lambda3

Obrigado a

atenção de todos!

@guiseek

/ guiseek

Guilherme Siquinelli

WebRTC - Workshop

By Guilherme Siquinelli

Made with Slides.com

WebRTC - Workshop

Streaming p2p de áudio, vídeo e dados na web

  • 261

More from Guilherme Siquinelli