Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Experiencia de uso de WebRTC en la educación

1.332 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

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

×