El día de hoy les traigo un tutorial que también puede considerarse un experimento, combinando algunas cosas podemos lograr hoy en día trasmitir en vivo utilizando HTML5, esto es muchísimo más fácil que crear todo el sistema utilizando Flash, además de que corre en móviles, al menos si estás recibiendo el streaming sólo necesitas tener soporte para Socket.io.
Es lógico que en algún momento será posible trasmitir video y audio en vivo, sin la necesidad de Flash, a como yo lo veo tal vez éste esfuerzo nos de una idea al respecto. El primer regalo de WebRTC ha sido el acceso a la cámara y el micrófono de nuestra computadora para nuestro navegador, ello a través de la función getUserMedia, sin embargo la comunicación real-time todavía no está lista y quién sabe cuánto tengamos que esperar para que sea viable a niveles de producción.
¿Cómo funciona el Streaming?
Las cosas son bastantes simples:
- Accedemos a la cámara con getUserMedia
- Pasamos la información de la cámara a una etiqueta video
- Usamos requestAnimationFrame para dibujar cada Frame del video dentro de Canvas
- Con el método toDataURL obtenemos la información de Canvas en una imagen.
- Mandamos las imágenes vía socket.io a un servidor (bastante sencillo) con Node.js
- En el server mandamos la imagen a la ws sockets conectadas.
- Las sockets colocan la imagen en el atributo src de una imagen y listo!
Los dejo entonces con el tutorial para que ustedes hagan sus pruebas, yo he corrido éste ejemplo en un VPS con 500mb de RAM y 2mb de subida a internet (o menos) y no ha sido tan rápido como esperaba, sin embargo de manera local va bastante bien.
hola, muy bueno el video, no pueden dejar el codigo como en otras veces??
muchas gracias
parce muy buen tuto al fin e encontrado un pagina con muy buen contenido…..
me podrias ayudar para poder probar el proyecto….
lo e descargado y ejecutado desde el netbeans y no me funciona tengo el xampp como servidor local…..
tengo que hacer algo aparte para probarlo
Grax
Muy buen video. Solo queria agregar que el repositorio del codigo no esta… Gracias.
Hola
no he podido conseguir que funcione el ejemplo, no seria posible que me enviaras el codigo.
saludos….
https://github.com/urielhdz/Streaming_video
Amigo estoy muy interesado en el tema pero los enlaces estan rotos, aver si tu puedes compartir ese codigo por mail, te agradeceria enormemente.
me pasa los mismo q a oscar… espero lo puedas volver a subir..
Saludos gracias por este gran trabajo
Hola un favior m podrias enviar el código! t lo agradeceria muchisimo!
me podrias enviar el code, para hecharle un vistazo
hola, esta excelente tutorial, el tema es que no tengo idea como probarlo, podrias explicarlo?? muchísimas gracias
excelente tutorial… pero alguien sabria como se puede aplicar en una camara IP? me seria de gran ayuda… 😀
cool!
Ahí sí te debo la información amigo :S habrá que investigar y ver qué podemos ofrecer después.
hola, lo ejecuto y me da
Error: Cannot find module 'express'
alguien tiene idea que pasa??
gracias
¿Instalaste las dependencias amigo? npm install express y npm install socket.io
Ha perdón no las tenia instaladas, ahora si, ejecuto node app.js y me dice "socket.io started"
El problema es que no se como verlo en el navegador, si voy a localhost:8080 me dice "Cannot GET /"
Perdón tantas preguntas, soy nuevo nuevo en el tema de node.js
Muchas gracias
Hola que tal, EXCELENTE video como siempre…muy explicativo, soy fan de estos tutoriales, gracias por compartir sus enormes conocimientos!
Aunque tambien me sale el mismo problema del lado del cliente al verlo en el navegador…Al igual que Alvaro…me dice: "Cannot GET /" seguido de la ruta del archivo .html…alguien sabe como solucionarlo! GRACIAS !!!
te agradezco Eduardo si pudiste resolverlo me digas como, muchas gracias!
No…aun no logro resolverlo…alguien sabe que esta mal? ayudaaa! ;D
Al igual que eduardo, estoy con el error de Cannot GET /video/tutoStreamClient.html en la parte del cliente.
Alguien lo ha arreglado?
Yo he tenido exactamente el mismo "problema" y la solución ha sido incluir esta línea justo debajo de la "escucha" del puerto en app.js
app.use("/", express.static(__dirname + ''));
Es decir, el fichero app.js, justo debajo de
server.listen(8080);
incluir la línea anterior. En caso de que los ficheros de vuestra aplicación estuviesen en un directorio adicional dentro del directorio de trabajo, se tendría que modificar el último parámetro de la función static, por ejemplo:
app.use("/", express.static(__dirname + '/directorio_adicional'));
Gracias por el ejemplo.
Me parece muy interesante, es la primera que ves que veo algo así! gracias por postear
Eduardo,
estoy desarrollando una página web de chat todo a partir de tu tutorial, que es el mejor que he encontrado en la red.
Cuando se completará Pondré todo el código a disposición de todo el mundo.
¡Muchas gracias!
hola mi nombre es ronald jorge yo lo he logrado en tiempo real via webs primero lo probe en una pIV con 500 mb de ram ahora lo he probado con 1gb de ram y dual core de maquina pero esta con windows xp con appserver y esta funcionando ya un mes esta es la fecha 2013-07-10 hasta el dia de hoy tengo algunas dudas yo lo hice de forma empirica no se si podamos compartir ideas
atte
numer_5
Tengo una pregunta, me pica la curiosidad. En el momento que quiero establecer la llamada, como sabe mi navegador la IP de la persona con la que quiero hablar? Vale que creas la conexion con el PeerConnection pero como sabe cada pc la IP de destino para la videoconferencia P2P?
Hola, que tal, se puede grabar el video que se emite?? agradesco su respuesta.
interesante
Una pregunta crucial.. ¿Os funciona correctamente en redes diferentes? es decir que los dispositivos estén en diferentes ip.
Consigo hacer que todo funcione bajo la misma ip estando en red, pero no con ip distintas.
El marco con el que hago pruebas es:
Servidor dedicado externo corriendo node.js y toda la pesca de webrtc.
Desde la oficina, Pc conectado a la red, y segundo dispositivo (pc y movil) también en la misma red de la oficina.
Si realizo la conexión todo funciona, pero si ahora me conecto mediante la red del móvil, nunca se realiza la videoconferencia (en consola, veo que las peticiones de oferta se envía, se aceptan y se "crea la conexión", comienza el streaming.. y ahí se queda. No me da errores, no pierdo la conexión, ni nada, pero el audio y el vídeo no se transmite (en ninguna dirección).
¿Solamente me ocurre a mí, porque seguramente tenga algo mal o también les ocurre a ustedes?
Otra duda. ¿Que opináis de easyRTC? parece una opción bastante buena para estos momentos en el que el estándar de webrtc no deja de cambiar… pero… ¿Es una buena opción realmente.. alguien la ha probado?
Un saludo, enhorabuena por el gran trabajo que estáis haciendo con esta web, y animo a todos los que estamos trabajando esta tecnología que va a cambiar la forma de interactuar con el internet!
Hola, tengo una duda con la que llevo ya un tiempo. Resulta que yo hago lo mismo pero tomando una foto con canvas para posteriormente enviarla al servidor, guardándola en una base de datos para mostrarlas cuando sea necesario. El caso es que al querer mostrarlas de nuevo no carga la imagen. Necesito ayuda porfavor.