SlideShare une entreprise Scribd logo
1  sur  22
Télécharger pour lire hors ligne
José Luis Millán
Iñaki Baz Castillo
¿ Qué es WebRTC ?
●

Comunicación en tiempo real para la Web

●

WebRTC Media
–

●

Características del media transmitido

WebRTC API
–

API JavaScript para browsers
WebRTC Media
●

Características y requerimientos del media transmitido
–

RTP audio/vídeo

–

DataChannel (new)
●

●

Envío y recepción de datos custom en tiempo real

Codecs MTI (Must To Implement)
–

Audio: Opus, Alaw, Ulaw

–

Vídeo: VP8, H.264 (no decidido)
WebRTC Media
●

Establecimiento de media
–

–
●

Ambos peers encuentran el camino más rápido para transmitir
media de uno a otro
ICE / STUN / TURN

Seguridad
–

RTP audio/vídeo encriptado con DTLS-SRTP

–

DataChannel encriptado con DTLS (SCTP sobre DTLS sobre
UDP)

–

Media Consent (ICE garantiza que transmitimos media al
destino correcto)
WebRTC Media
●

¿Quién debe/puede implementar todos estos
requisitos?
–

Desktop Browsers (Chrome, Firefox, Internet Explorer,
Opera...)
●

¿ Smartphone Browsers ? mmm...

–
–
●

Apps en smartphones y tablets
Servidores (Asterisk, FreeSwitch, Google Hangouts...)

Interoperabilidad a nivel de media entre distintos
dispositivos
–

NOTA: Nadie ha hablado aún de señalización
WebRTC API
●

API JavaScript para browsers
–

getUserMedia(): solicitar permisos de micrófono y/o webcam

–

RTCPeerConnection: Clase JavaScript para iniciar una sesión
WebRTC con otro peer
●

Envío y recepción de múltiples MediaStream de audio/vídeo

●

DataChannel para envío y recepción de datos custom
WebRTC API
●

SDP Offer/Answer
–

API WebRTC para solicitar un SDP a nuestro browser
●

–

Recibimos el SDP del peer remoto
●

●

Y se lo enviamos al peer remoto
Y lo usamos a través del API WebRTC

¿Cómo transmitimos y recibimos el SDP?
–

WebSocket
●

SIP over WebSocket

●

XMPP/Jingle over WebSocket

●

Lo-que-sea over WebSocket

–

HTTP AJAX (para no recargar la página)

–

WebRTC no impone el tipo de de señalización en red
WebRTC F.A.Q.
Casos de Uso WebRTC
●

Póker online
–

●

ChatRoulette
–

●

¿Sólo Web?

Puesto de callcenter
–

●

Enseñemos nuestras partes íntimas, ¡pero sin Flash!

Un nuevo “Skype”
–

●

Nadie “llama” a nadie

¡Plugin para Asterisk!

Telefonía doméstica
–

mmm...
Casos de Uso WebRTC
●

Hacer feliz a tu abuela

¡¡¡ DEMO !!!
RetroRTC
Arquitectura RetroRTC
SIP over WebSocket
SIP over UDP/TCP
ICE
RTP

PSTN
Proyectos Relacionados
●

http://jssip.net

●

http://oversip.net
Muchas Gracias
●

A los asistentes

●

A Avanzada7 por organizar el VOIP2DAY
–

●

(el mejor evento de VoIP de Europa)

A todos los que lo hacen posible

@ibc_tw
@jomivi

Contenu connexe

En vedette

What to know about the air knife
What to know about the air knifeWhat to know about the air knife
What to know about the air knife
zimora_pattrick
 
Digital Techniques
Digital TechniquesDigital Techniques
Digital Techniques
kyliemarie88
 

En vedette (14)

Programas de ne t beans2
Programas de ne t beans2Programas de ne t beans2
Programas de ne t beans2
 
Rekha khurana
Rekha khuranaRekha khurana
Rekha khurana
 
What to know about the air knife
What to know about the air knifeWhat to know about the air knife
What to know about the air knife
 
I Hegels ånd
I Hegels åndI Hegels ånd
I Hegels ånd
 
Statistik kopie1lösungen
Statistik kopie1lösungenStatistik kopie1lösungen
Statistik kopie1lösungen
 
Preguntas
PreguntasPreguntas
Preguntas
 
Sitode
SitodeSitode
Sitode
 
Bhavishya
BhavishyaBhavishya
Bhavishya
 
Projeto construtivismo
Projeto construtivismoProjeto construtivismo
Projeto construtivismo
 
Social Media by Salony Creations
Social Media by Salony CreationsSocial Media by Salony Creations
Social Media by Salony Creations
 
Digital Techniques
Digital TechniquesDigital Techniques
Digital Techniques
 
Character Study
Character StudyCharacter Study
Character Study
 
Situación del espectro radioeléctrico en América Latina
Situación del espectro radioeléctrico en América LatinaSituación del espectro radioeléctrico en América Latina
Situación del espectro radioeléctrico en América Latina
 
Measuring and Monitoring Foot and Mouth Disease Occurrence Melissa McLaws EuFMD
Measuring and Monitoring Foot and Mouth Disease Occurrence Melissa McLaws EuFMDMeasuring and Monitoring Foot and Mouth Disease Occurrence Melissa McLaws EuFMD
Measuring and Monitoring Foot and Mouth Disease Occurrence Melissa McLaws EuFMD
 

Similaire à V2 d2013 jose l millan e iñaki baz - webrtc

voip2day 2012 - Js sip sip + webrtc (el futuro ya esta aqui) by iniaki baz y ...
voip2day 2012 - Js sip sip + webrtc (el futuro ya esta aqui) by iniaki baz y ...voip2day 2012 - Js sip sip + webrtc (el futuro ya esta aqui) by iniaki baz y ...
voip2day 2012 - Js sip sip + webrtc (el futuro ya esta aqui) by iniaki baz y ...
VOIP2DAY
 
Webinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - QuobisWebinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - Quobis
Quobis
 
Conceptos sobre Streaming
Conceptos sobre StreamingConceptos sobre Streaming
Conceptos sobre Streaming
Francesc Perez
 
Negociacion de Codecs en Asterisk
Negociacion de Codecs en AsteriskNegociacion de Codecs en Asterisk
Negociacion de Codecs en Asterisk
Moises Silva
 
Configuración de escenarios reales con asterisk
Configuración de escenarios reales con asteriskConfiguración de escenarios reales con asterisk
Configuración de escenarios reales con asterisk
Diego Llanes
 

Similaire à V2 d2013 jose l millan e iñaki baz - webrtc (20)

[4K Conf 2012] SIP y WebRTC para Seres Humanos (tm)
[4K Conf 2012] SIP y WebRTC para Seres Humanos (tm)[4K Conf 2012] SIP y WebRTC para Seres Humanos (tm)
[4K Conf 2012] SIP y WebRTC para Seres Humanos (tm)
 
JsSIP: SIP + WebRTC (el futuro está aquí)
JsSIP: SIP + WebRTC (el futuro está aquí)JsSIP: SIP + WebRTC (el futuro está aquí)
JsSIP: SIP + WebRTC (el futuro está aquí)
 
voip2day 2012 - Js sip sip + webrtc (el futuro ya esta aqui) by iniaki baz y ...
voip2day 2012 - Js sip sip + webrtc (el futuro ya esta aqui) by iniaki baz y ...voip2day 2012 - Js sip sip + webrtc (el futuro ya esta aqui) by iniaki baz y ...
voip2day 2012 - Js sip sip + webrtc (el futuro ya esta aqui) by iniaki baz y ...
 
[VoIP2Day 2012] World Wide SIP
[VoIP2Day 2012] World Wide SIP[VoIP2Day 2012] World Wide SIP
[VoIP2Day 2012] World Wide SIP
 
JsSIP: SIP + WebRTC
JsSIP: SIP + WebRTCJsSIP: SIP + WebRTC
JsSIP: SIP + WebRTC
 
World Wide SIP
World Wide SIPWorld Wide SIP
World Wide SIP
 
Webinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - QuobisWebinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - Quobis
 
Iba2008 Servicios
Iba2008 ServiciosIba2008 Servicios
Iba2008 Servicios
 
Extendiendo SIP con WebRTC
Extendiendo SIP con WebRTCExtendiendo SIP con WebRTC
Extendiendo SIP con WebRTC
 
Extendiendo SIP con WebRTC - Saúl Ibarra | VoIP2DAY 2015
Extendiendo SIP con WebRTC - Saúl Ibarra | VoIP2DAY 2015Extendiendo SIP con WebRTC - Saúl Ibarra | VoIP2DAY 2015
Extendiendo SIP con WebRTC - Saúl Ibarra | VoIP2DAY 2015
 
Conceptos sobre Streaming
Conceptos sobre StreamingConceptos sobre Streaming
Conceptos sobre Streaming
 
Negociacion de Codecs en Asterisk
Negociacion de Codecs en AsteriskNegociacion de Codecs en Asterisk
Negociacion de Codecs en Asterisk
 
IP-TV.pptx
IP-TV.pptxIP-TV.pptx
IP-TV.pptx
 
Sipml5 to Elastix
Sipml5 to ElastixSipml5 to Elastix
Sipml5 to Elastix
 
SIPML5toElastix
SIPML5toElastixSIPML5toElastix
SIPML5toElastix
 
WebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduWebRTC en tu web con OpenVidu
WebRTC en tu web con OpenVidu
 
Negociacion de codecs en asterisk
Negociacion de codecs en asteriskNegociacion de codecs en asterisk
Negociacion de codecs en asterisk
 
Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011
Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011
Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011
 
Más allá de conferencias | IÑAKI BAZ - VoIP2DAY 2017
Más allá de conferencias | IÑAKI BAZ - VoIP2DAY 2017Más allá de conferencias | IÑAKI BAZ - VoIP2DAY 2017
Más allá de conferencias | IÑAKI BAZ - VoIP2DAY 2017
 
Configuración de escenarios reales con asterisk
Configuración de escenarios reales con asteriskConfiguración de escenarios reales con asterisk
Configuración de escenarios reales con asterisk
 

Dernier

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Dernier (12)

investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 

V2 d2013 jose l millan e iñaki baz - webrtc

  • 2. ¿ Qué es WebRTC ? ● Comunicación en tiempo real para la Web ● WebRTC Media – ● Características del media transmitido WebRTC API – API JavaScript para browsers
  • 3. WebRTC Media ● Características y requerimientos del media transmitido – RTP audio/vídeo – DataChannel (new) ● ● Envío y recepción de datos custom en tiempo real Codecs MTI (Must To Implement) – Audio: Opus, Alaw, Ulaw – Vídeo: VP8, H.264 (no decidido)
  • 4. WebRTC Media ● Establecimiento de media – – ● Ambos peers encuentran el camino más rápido para transmitir media de uno a otro ICE / STUN / TURN Seguridad – RTP audio/vídeo encriptado con DTLS-SRTP – DataChannel encriptado con DTLS (SCTP sobre DTLS sobre UDP) – Media Consent (ICE garantiza que transmitimos media al destino correcto)
  • 5. WebRTC Media ● ¿Quién debe/puede implementar todos estos requisitos? – Desktop Browsers (Chrome, Firefox, Internet Explorer, Opera...) ● ¿ Smartphone Browsers ? mmm... – – ● Apps en smartphones y tablets Servidores (Asterisk, FreeSwitch, Google Hangouts...) Interoperabilidad a nivel de media entre distintos dispositivos – NOTA: Nadie ha hablado aún de señalización
  • 6. WebRTC API ● API JavaScript para browsers – getUserMedia(): solicitar permisos de micrófono y/o webcam – RTCPeerConnection: Clase JavaScript para iniciar una sesión WebRTC con otro peer ● Envío y recepción de múltiples MediaStream de audio/vídeo ● DataChannel para envío y recepción de datos custom
  • 7. WebRTC API ● SDP Offer/Answer – API WebRTC para solicitar un SDP a nuestro browser ● – Recibimos el SDP del peer remoto ● ● Y se lo enviamos al peer remoto Y lo usamos a través del API WebRTC ¿Cómo transmitimos y recibimos el SDP? – WebSocket ● SIP over WebSocket ● XMPP/Jingle over WebSocket ● Lo-que-sea over WebSocket – HTTP AJAX (para no recargar la página) – WebRTC no impone el tipo de de señalización en red
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. Casos de Uso WebRTC ● Póker online – ● ChatRoulette – ● ¿Sólo Web? Puesto de callcenter – ● Enseñemos nuestras partes íntimas, ¡pero sin Flash! Un nuevo “Skype” – ● Nadie “llama” a nadie ¡Plugin para Asterisk! Telefonía doméstica – mmm...
  • 18. Casos de Uso WebRTC ● Hacer feliz a tu abuela ¡¡¡ DEMO !!!
  • 20. Arquitectura RetroRTC SIP over WebSocket SIP over UDP/TCP ICE RTP PSTN
  • 22. Muchas Gracias ● A los asistentes ● A Avanzada7 por organizar el VOIP2DAY – ● (el mejor evento de VoIP de Europa) A todos los que lo hacen posible @ibc_tw @jomivi