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.