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:

  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 la ws sockets conectadas.
  7. 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.

Imagen de previsualización de YouTube

28 comentarios en “Streaming de Video con HTML5

  1. 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

      1. 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

  2. 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 !!!

  3. Al igual que eduardo, estoy con el error de Cannot GET /video/tutoStreamClient.html en la parte del cliente.
    Alguien lo ha arreglado?

    1. 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.

  4. 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!

  5. 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

  6. 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?

  7. 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!

  8. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar