Streaming de video en HTML5 usando Canvas y getUsermedia

Hoy quiero compartirles un tutorial/experimento que he realizado con Canvas + getUsermedia. La finalidad de esto es trasmitir lo que mi cámara web vé al resto del mundo, sin la necesidad de Flash.

Es lógico que en algún momento será posible trasmitir video y audio, en vivo, sin la necesidad de Flash, como yo lo veo tal vez éste esfuerzo nos dé 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.

Hoy, puedo mostrarles éste ejemplo que he creado utilizando Canvas y getUserMedia para trasmitir y la etiqueta img para que las personas accedan al streaming. La limitante para poder entrar al streaming sería entonces que tu navegador soporte Socket.io.

El resultado de ésto puede verse desde dos puntos de vista, el primero es que de manera local (como se ve en el video) las cosas funcionan bastante bien.

Sin embargo cuando se trata de correrlo online va algo lento, ésto puede ser porque lo he probado en un VPS con únicamente 500mb de RAM, no soy un experto en streaming pero puede que un servidor más poderoso y posiblemente una conexión más rápida que mis 2mb hagan ésto más viable.

¿Cómo funciona el streaming?

Las cosas son bastantes simples:

1. Accedemos a la cámara con getUserMedia.
   
2. Pasamos la información de la cámara a una etiqueta video.
   
3. Usamos requestAnimationFrame para dibujar cada Frame del video dentro de Canvas.
   
4. Con el método toDataURL obtenemos la información de Canvas en una imagen.
   
5. Mandamos las imágenes vía socket.io a un servidor (bastante sencillo) con Node.js
   
6. En el server mandamos la imagen a laws sockets conectadas.
   
7. Las sockets colocan la imagen en el atributo src de una imagen y listo :O
   

Como las imágenes se envían en cada Frame del video, lo que tendremos en las sockets es el video reconstruido vía imágenes. Es sólo una idea, me gustaría saber qué opinan los expertos, les dejo el tutorial completo para aquellos que quieran seguirlo.



Y el repositorio en github, por si alguien quiere sólo trabajar en el código.

Por último, tal vez ésto te interese: