Ver "WebRTC: A conversation Between Chrome and Firefox." en YouTube
Streaming de Video con HTML5
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.
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 deCanvas
- 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) conNode.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.
