Successfully reported this slideshow.
Experiencia de uso de WebRTC en la educación

Jorge Rubiano.
@ostjh
Navegadores

http://www.navegadoresdeinternet.net/
Complementos (Plugins)

http://clubajax.org/the-history-of-ria-technologies/
HTML5 + CSS3 + Javascript

http://www.w3.org/html/logo/
Nuevas Apis - Javascript
WebAudio

Web Workers

https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
http...
WebRTC

http://www.webrtc.org/
Http/Ajax

http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
WebSockets Vs WebRTC
WebRTC
Es una solución tecnológica que resultó de un esfuerzo conjunto entre la World
Wide Web Consortium (W3C) y el Inter...
WebRTC
1. Adquirir medios.
2. Comunicación Audio y
Vídeo
3. Envío y recepción de
datos arbitrarios en
conexiones punto a
p...
WebRTC: Apis Javascript
1. getUserMedia
2. RTCPeerConnection
3. DataChannel

Libro WebRTC: APIs and RTCWEB Protocols of th...
Pasos comunicación

Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
WebRTC
En la educación
“En cinco años la mejor educación vendrá de la
Web”
Bill Gates

http://techcrunch.com/2010/08/06/bi...
Detección de Movimiento.

http://www.soundstep.com/blog/experiments/jsdetection/
https://github.com/ReallyGood/js-motion-d...
Captura de Imágenes

http://webcamtoy.com/es/
Juegos

https://www.cubeslam.com/
Comunicación
Foros

http://www.webdesignshock.com/online-chat-tools-for-website/

Chat’s
Comunicación

http://chatroulette.com/
http://www.tokbox.com/blog/creating-chat-roulette-with-node-js-socket-io-and-opento...
Comunicación

“El vídeo permite enriquecer la comunicación con elementos familiares como la
expresión facial, el contacto ...
Comunicación - Plugins/servicios

http://www.red5.org
Comunicación - Plugins/servicios

http://www.adobe.com/es/products/connect/

http://www.videowhisper.com/?p=Requirements

...
Chat Social

http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
Chat Social

http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
Chat Social
http://nodejs.org/

+
http://socket.io/

+
http://www.webrtc.org/

webRTC.io
https://github.com/webRTC/webRTC....
DEMO
Chat Social
Trabajo Colaborativo
Trabajo Colaborativo
Togetherjs

http://codassium.com
https://togetherjs.com/
Trabajo Colaborativo

+
Trabajo Colaborativo

https://plus.google.com/+googleplus/posts/8Qs1Cq8QLqy
EtherPad

Written in Scala and has quite big system requirements
EtherPad Lite
Etherpad plugin manager

http://etherpad.org/

http://nodejs.org/

ep_rtc
https://github.com/JohnMcLear/ep_r...
Trabajo Colaborativo
http://etherpad.org/

http://nodejs.org/

http://www.mongodb.org/

http://socket.io/

http://www.webr...
Trabajo Colaborativo

http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html
DEMO
Trabajo Colaborativo
WebRTC - Peer to Peer

Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
WebRTC - Mesh

Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
WebRTC - Mesh
A favor.
● Infraestructura requerida es
más simple y de bajo costo.
En Contra.
● Administración de sesiones
...
WebRTC - Star

Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
WebRTC - Star
A favor.
●
●
●
●

Menos carga de procesamiento y
de red en los clientes.
Mayor calidad en dispositivos de
ga...
WebRTC - MCU

http://sourceforge.net/projects/mcumediaserver/

http://lynckia.com/licode/
DataChannel
Permite el intercambio “peer-to-peer” de datos arbitrarios,
con baja latencia y alto rendimiento.
Aplicaciones...
DataChannel

https://www.sharefest.me/
DataChannel - CDN
Conjunto de servidores ubicados en diferentes puntos de una red que contienen
copias locales de ciertos ...
DataChannel - CDN

Se encarga de servir contenidos
estáticos (imágenes, vídeos y
descargas de archivos) usando
el ancho de...
RTCPeerConnection - Signaling

https://www.gowebrtc.me/
https://code.google.com/p/sipml5/

+
strophe.jingle
https://github...
RTCPeerConnection - Signaling
webRTC.io

https://github.com/webRTC/webRTC.io

http://simplewebrtc.com/

+

signalmaster
ht...
Plataformas

http://tokbox.com/

https://vline.com/developer/

https://bistri.com/
WebRTC - Soporte

Adapter.js
http://caniuse.com/#search=webrtc
Aplicaciones

http://maxiamigos.com/

http://twelephone.com/

http://webrtchacks.com/baby-motion-detector
Google Hangouts HD + WebRTC

http://gigaom.com/2013/08/28/hangouts-hd-vp8-webrtc/
http://sporadicdispatches.blogspot.com/2...
Fuentes
http://webrtchacks.com/
http://www.html5rocks.com/en/tutorials/webrtc/basics/
https://www.webrtc-experiment.com/
h...
Gracias por la atención
Jorge Rubiano
@ostjh
WebRTC - Seguridad

http://io13webrtc.appspot.com/

http://www.ietf.org/proceedings/82/slides/rtcweb-13.pdf
getUserMedia - Compartir Pantalla
WebRTC - Soporte
https://www.sqwiggle.com

https://github.com/rogerwang/node-webkit
Trabajo Colaborativo - WebRTC

Mockup Proyecto
WebRTC
Upcoming SlideShare
Loading in …5
×

Experiencia de uso de WebRTC en la educación

1,295 views

Published on

Presentación realizada en el marco de la conferencia JSConf Octubre de 2013

Published in: Education
  • Be the first to comment

Experiencia de uso de WebRTC en la educación

  1. 1. Experiencia de uso de WebRTC en la educación Jorge Rubiano. @ostjh
  2. 2. Navegadores http://www.navegadoresdeinternet.net/
  3. 3. Complementos (Plugins) http://clubajax.org/the-history-of-ria-technologies/
  4. 4. HTML5 + CSS3 + Javascript http://www.w3.org/html/logo/
  5. 5. Nuevas Apis - Javascript WebAudio Web Workers https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html http://www.w3.org/TR/workers/ Media Capture & Streams http://www.w3.org/TR/2012/WD-mediacapture-streams-20120628/ http://www.freshtilledsoil.com/the-future-of-web/ Device http://arewemobileyet.com/
  6. 6. WebRTC http://www.webrtc.org/
  7. 7. Http/Ajax http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
  8. 8. WebSockets Vs WebRTC
  9. 9. WebRTC Es una solución tecnológica que resultó de un esfuerzo conjunto entre la World Wide Web Consortium (W3C) y el Internet Engineering Task Force (IETF) por proporcionar comunicación en tiempo real punto a punto, a través del navegador. WebRTC Estandariza las tecnología desde la perspectiva de los navegadores y tecnologías web y definición de APIs para la utilización de WebRTC RTCWeb Estandarización de protocolos y herramientas a nivel de transporte (SRTP, STUN/ICE/TURN) y codecs
  10. 10. WebRTC 1. Adquirir medios. 2. Comunicación Audio y Vídeo 3. Envío y recepción de datos arbitrarios en conexiones punto a punto.
  11. 11. WebRTC: Apis Javascript 1. getUserMedia 2. RTCPeerConnection 3. DataChannel Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
  12. 12. Pasos comunicación Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
  13. 13. WebRTC En la educación “En cinco años la mejor educación vendrá de la Web” Bill Gates http://techcrunch.com/2010/08/06/bill-gates-education/
  14. 14. Detección de Movimiento. http://www.soundstep.com/blog/experiments/jsdetection/ https://github.com/ReallyGood/js-motion-detection
  15. 15. Captura de Imágenes http://webcamtoy.com/es/
  16. 16. Juegos https://www.cubeslam.com/
  17. 17. Comunicación Foros http://www.webdesignshock.com/online-chat-tools-for-website/ Chat’s
  18. 18. Comunicación http://chatroulette.com/ http://www.tokbox.com/blog/creating-chat-roulette-with-node-js-socket-io-and-opentok/
  19. 19. Comunicación “El vídeo permite enriquecer la comunicación con elementos familiares como la expresión facial, el contacto ocular y el metalenguaje o lenguaje corporal” Castañeda, 2007 http://ocw.um.es/gat/contenidos/mpazherramientas/documentos/videoymsn.pdf
  20. 20. Comunicación - Plugins/servicios http://www.red5.org
  21. 21. Comunicación - Plugins/servicios http://www.adobe.com/es/products/connect/ http://www.videowhisper.com/?p=Requirements http://bigbluebutton.org/
  22. 22. Chat Social http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
  23. 23. Chat Social http://virtualnet2-0.blogspot.com/2013/05/nuevo-chat-social.html
  24. 24. Chat Social http://nodejs.org/ + http://socket.io/ + http://www.webrtc.org/ webRTC.io https://github.com/webRTC/webRTC.io + http://www.mongodb.org/ mongodb https://npmjs.org/package/mongodb
  25. 25. DEMO Chat Social
  26. 26. Trabajo Colaborativo
  27. 27. Trabajo Colaborativo Togetherjs http://codassium.com https://togetherjs.com/
  28. 28. Trabajo Colaborativo +
  29. 29. Trabajo Colaborativo https://plus.google.com/+googleplus/posts/8Qs1Cq8QLqy
  30. 30. EtherPad Written in Scala and has quite big system requirements
  31. 31. EtherPad Lite Etherpad plugin manager http://etherpad.org/ http://nodejs.org/ ep_rtc https://github.com/JohnMcLear/ep_rtc
  32. 32. Trabajo Colaborativo http://etherpad.org/ http://nodejs.org/ http://www.mongodb.org/ http://socket.io/ http://www.webrtc.org/ http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html
  33. 33. Trabajo Colaborativo http://virtualnet2-0.blogspot.com/2013/08/etherpad-trabajo-colaborativo.html
  34. 34. DEMO Trabajo Colaborativo
  35. 35. WebRTC - Peer to Peer Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
  36. 36. WebRTC - Mesh Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
  37. 37. WebRTC - Mesh A favor. ● Infraestructura requerida es más simple y de bajo costo. En Contra. ● Administración de sesiones más compleja. ● Resultados óptimos con tan sólo 4 participantes. ● Pobre resultados en dispositivos móviles (Los cuales a veces en conexiones punto a punto enfrentan dificultades) http://www.slideshare.net/fullscreen/vline/a-practical/1
  38. 38. WebRTC - Star Libro WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
  39. 39. WebRTC - Star A favor. ● ● ● ● Menos carga de procesamiento y de red en los clientes. Mayor calidad en dispositivos de gama baja. Mayor cantidad de usuarios concurrentes. Posibilidad de grabación. En Contra. ● Uso de servidores extra (MCU Unidad de Control Multipunto)
  40. 40. WebRTC - MCU http://sourceforge.net/projects/mcumediaserver/ http://lynckia.com/licode/
  41. 41. DataChannel Permite el intercambio “peer-to-peer” de datos arbitrarios, con baja latencia y alto rendimiento. Aplicaciones ● ● ● ● ● Juegos Aplicaciones de escritorio remoto Chat de texto en tiempo real Transferencia de archivos CDN (Red de entrega de contenidos)
  42. 42. DataChannel https://www.sharefest.me/
  43. 43. DataChannel - CDN Conjunto de servidores ubicados en diferentes puntos de una red que contienen copias locales de ciertos contenidos (vídeos, imágenes, música, documentos, etc.) http://es.wikipedia.org/wiki/Red_de_entrega_de_contenidos
  44. 44. DataChannel - CDN Se encarga de servir contenidos estáticos (imágenes, vídeos y descargas de archivos) usando el ancho de banda de los usuarios que están accediendo a esos contenidos, junto con el de los servidores principales https://peercdn.com/
  45. 45. RTCPeerConnection - Signaling https://www.gowebrtc.me/ https://code.google.com/p/sipml5/ + strophe.jingle https://github.com/ESTOS/strophe.jingle/ http://www.jssip.net/
  46. 46. RTCPeerConnection - Signaling webRTC.io https://github.com/webRTC/webRTC.io http://simplewebrtc.com/ + signalmaster https://github.com/andyet/signalmaster http://www.easyrtc.com/
  47. 47. Plataformas http://tokbox.com/ https://vline.com/developer/ https://bistri.com/
  48. 48. WebRTC - Soporte Adapter.js http://caniuse.com/#search=webrtc
  49. 49. Aplicaciones http://maxiamigos.com/ http://twelephone.com/ http://webrtchacks.com/baby-motion-detector
  50. 50. Google Hangouts HD + WebRTC http://gigaom.com/2013/08/28/hangouts-hd-vp8-webrtc/ http://sporadicdispatches.blogspot.com/2013/05/google-hangouts-testing-webrtc-based.html
  51. 51. Fuentes http://webrtchacks.com/ http://www.html5rocks.com/en/tutorials/webrtc/basics/ https://www.webrtc-experiment.com/ http://io13webrtc.appspot.com/#1 https://hacks.mozilla.org/category/webrtc/ http://groups.google.com/group/discuss-webrtc/topics Google I/O 2012: http://www.youtube.com/watch?v=E8C8ouiXHHk Google I/O 2013: http://www.youtube.com/watch?v=p2HzZkd2A40 Libro: http://www.webrtcbook.com/ Debug: chrome://webrtc-internals
  52. 52. Gracias por la atención Jorge Rubiano @ostjh
  53. 53. WebRTC - Seguridad http://io13webrtc.appspot.com/ http://www.ietf.org/proceedings/82/slides/rtcweb-13.pdf
  54. 54. getUserMedia - Compartir Pantalla
  55. 55. WebRTC - Soporte https://www.sqwiggle.com https://github.com/rogerwang/node-webkit
  56. 56. Trabajo Colaborativo - WebRTC Mockup Proyecto
  57. 57. WebRTC

×