8 - Juegos Multimedia HTML5 - Mostrar la cámara web con HTML5

La etiqueta vídeo la hemos visto en el anterior videotutorial del curso. En esta octaba entrega del curso veremos como hacer uso de dicho elemento para poder acceder a la cámara web del usuario.
    En otros artículos de nuestro blog he estado comentando cómo crear aplicaciones Java que utilicen la webcam (Aquí podrás encontrar un índice con todos los artículos que tratan sobre ello). Pudimos realizarlas gracias a la existencia del JMF. El problema es que dichas aplicaciones dependen de los binarios y del jar del framework. Eso reduce mucho sus portabilidad, lo cual nunca es bueno.
Si hay alguna cualidad de HTML5 que los desarrolladores web enfatizan, es la de la posibilidad de realizar aplicaciones multimedia sin el uso de plugins. Eso solucionaría el problema que se nos ha planteado con Java, ya que una aplicación web es mucho más accesible que una aplicación de escritorio y, por si fuera poco, el usuario no tendría que preocuparse por tener los programas necesarios instalados para poder disfrutar de la aplicación.
Es por ello por lo que me he decidido a investigar sobre estos temas. Realmente no hay muy buena información en castellano sobre ello (o por lo menos yo no la he encontrado). No me sorprende que así sea, pues se tratan de tecnologías en desarrollo que todavía no son soportadas por todos los navegadores y, los navegadores que las soportan, lo hacen casi en su totalidad en las versiones más actualizadas. Posiblemente, si alguien lee este artículo dentro de un año pensará: ¿Pero éste qué dice? Yo me conecto diariamente a la cámara web a través de internet desde todos los navegadores, inclusive los del móvil, sin la necesidad de instalar nada. Esta tecnología que nos rodea avanza a una velocidad de espanto así que hay que adaptarse a ella para estar a la vanguardia.
Desde hace ya unos años se ha intentado incluir en el HTML una manera de acceder a los dispositivos del hardware del usuario. Hasta llegar al API getUserMedia() se ha intentado estandarizar el uso de la etiqueta input device. Ahora se hace uso de la etiqueta video. La API JavaScript de captura multimedia se integra a la perfección con HTML5, cosa que no hacían las otras implementaciones. Pintar las imágenes de la cámara web en un canvas y posteriormente combinarlas con WebGL (funciones JS que hacen uso de la GPU para obtener gráficos acelerados) permite obtener resultados realmente impresionantes. GetUserMedia() forma parte del proyecto WebRTC (Web Real Time Communication). Puestos a nombrar algunas nuevas tecnologías relacionadas con la web me gustaría añadir la geolocalización y el uso del acelerómetro. Debemos de ir acostumbrándonos a esos nombres porque estoy seguro que en un futuro muy próximo van a estar presentes allá donde vayamos.
    Dejo ya de enrollarme, que si no ya habrá aparecido la versión 6 de HTML para cuando empiece a explicar el uso de la webcam :-)

¡OJO!

Las prácticas realizadas en este artículo hacen uso de tecnologías que no están todavía estandarizadas, por lo tanto deberías tener cuidado si utilizas estos conocimientos en nuevos proyectos. Con los navegadores Chrome, y Ópera correctamente actualizados deberías poder realizar las prácticas sin problemas. Si quieres realizar las prácticas con Chrome, según mi experiencia personal, sería necesario que subieras los archivos a un servidor para poder hacer uso de la cámara. En el caso de Opera no parece ser necesario.

Con el uso de la función navigator.getUserMedia() los datos son procesados y enviados a nuestro navegador en tiempo real, es por ello que esta API forma parte del WebRTC, que es un proyecto gratuito y de código abierto supervisado por un grupo de trabajo compuesto por desarrolladores de Google, Opera y de algunos otros creadores de navegadores. Con la versión 12 de Opera y la versión 21 de Google Chrome no es necesario realizar ninguna modificación en tu navegador para poder hacer uso de esta API. Te recomiendo que actualices tus navegadores para evitar realizar modificaciones en su configuración. También hay que tener en cuenta que tanto Opera como Chrome implementan diferentes versiones de la API. En principio esto dificulta mucho el uso práctico de estas tecnologías, pero, en poco tiempo se habrán estandarizado y no supondrá un problema.

Video.

Os dejo un nuevo videotutorial en el que se explica detalladamente el proceso.

Ejemplo en acción.

Aquí podéis probarla.


Código.

Contenido del archivo camara.html.
<!DOCTYPE html>
<html>
  <head>
    <title>Cámara Web con HTML5</title>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #ff566e;
        }
    </style>
    <script type="text/javascript">
        
        function hasGetUserMedia() {
            navigator.getUserMedia = navigator.getUserMedia || // Opera
                navigator.webkitGetUserMedia || // Chrome, Safari
                navigator.mozGetUserMedia || // Mocilla nightly
                navigator.msGetUserMedia;
            if (navigator.getUserMedia) {
                return true
            }
            return false;
        } // fin de hasGetUserMedia();
        
        function hasURL() {
            window.URL = window.URL || window.webkitURL
                || window.mozURL || window.msURL;
            if (window.URL && window.URL.createObjectURL) {
                return true;
            }
            return false;
        } // fin de hasURL();
            
        function error(e) {
            alert("Fallo en la aplicación. "+e);
        } // fin de error();
        
        function setStream(stream) {
            var webcam = document.getElementById("webcam");
            webcam.src = window.URL.createObjectURL(stream);
            webcam.play();
        } // fin de getStream();
        
        function onLoad () {
            if (!hasGetUserMedia() || !hasURL()) {
                alert("Tu navegador no soporta getUserMedia()");
            } else {
                navigator.getUserMedia(
                    {video: true, audio: false},
                    setStream,
                    error
                );
            }
        } // fin de onLoad();
        
    </script>
  </head>
  <body onload="onLoad()">
      <video id="webcam">
          Tu navegador no es compatible con la etiqueta video de HTML5.
      </video>
  </body>
</html>


Índice del curso


8 comentarios :

  1. Buenos dias hombre, muchas gracias por estos tutoriales que has compartido y has tomado el tiempo en realizar, no se si aca se deba pero hay algo que me gustaria preguntar y saber si por casualidad sabes como se pueda hacer, resulta que tengo un pequeño proyecto que lleva el uso de la webcam, veo aca en tu tutorial que el video que se ve es el del pc local, pero si yo quiciera compartir mi cam, que otros vean lo de mi cam, asi como se hace en video llamadas, como se podria hacer o.o.

    ResponderEliminar
    Respuestas
    1. Sé que usando websockets podrías hacerlo. El problema es que necesitas usar Node.js. Quizás ahora ya no sea tan problemático, pero hace unos años era imposible encontrar servidores gratuitos con Node.js. Yo de ti investigaría en por esa línea.
      Usando el método toDataURL() del canvas podrías obtener URL's de imágenes en base 64 y enviarlas por el websocket.
      No he realizado ningún proyecto que haga eso que dices, por eso no te puedo dar instrucciones muy detalladas.
      Un saludo e infórmanos de tus progresos ;)

      Eliminar
    2. no vale de todos muchas gracias, igual puedo investigar, y me sirve de punto de partida, asi que ahora solo queda investigar y a darle. muchas gracias

      Eliminar
    3. hola, no se si es que estoy haciendo algo mal porque he seguido tu tutorial y el resultado no es el esperado. Me explico, he montado mi propio servidor web y en la pagina he introducido tu codigo esperando que los clientes al conectarse viesen lo que emite mi webcam, pero no es asi, sino que lo que se les activa es su propia webcam. Si este es el funcionamiento correcto no le veo la utilidad, porque para que vale que se conecten a mi web y se vean ellos mismos en la pantalla a traves de su webcam, suponia que lo que verian seria mi propia webcam.
      Podrias decirme si es que he hecho algo ,mal.
      Un saludo

      Eliminar
    4. Hola,

      Lo has hecho muy bien, ese es justo su funcionamiento. Como tú dices, una web que lo único que haga es mostrar la cámara web del usuario es un poco inútil. El artículo solo enseña a cómo obtener los datos de la webcam del usuario, posteriormente puedes hacer con los datos del usuario lo que desees.

      Podrías usar la webcam local para algún juego o app que saque fotos con efectos chulos o enviar el audio y vídeo obtenido por la webcam por Internet y crear un sistema de videochat. Lo que hagas con la imagen obtenida es cosa tuya.

      Para enviar la cantidad de datos que supone enviar un vídeo, actualmente está muy a la orden del día el uso de WebSockets.

      A modo de autopublicidad, te dejo un jueguecito que hace uso de la webcam:
      http://programmingheroes.blogspot.com.es/2013/04/simon-dice-html5-navegador-webcam.html

      ¡¡Un saludo!!

      Eliminar
  2. Eso es lo que me interesa, es que estoy haciendo un proyecto de streaming en directo (con distintas formas) y quisiera saber como a partir de tu trabajo, puedo emitir eso para hacer streaming en directo. Se ter ocurre alguna forma. Es que el modulo es de administracion de redes pero me ha tocado esto de proyecto y no es que este muy puesto. Gracias

    ResponderEliminar
    Respuestas
    1. En esta web aparece un videotutorial y una explicación de los pasos que deberías seguir. Básicamente pintar en un canvas la webcam y obtener con toDataURL el contenido que hay pintado en ese momento.
      http://html5facil.com/tutoriales/streaming-de-video-con-html5/

      No es algo sencillo de hacer, lleva su trabajo y si no tienes experiencia te vas a tener que pelear bastante con las tecnologías del lado del servidor sobretodo. Pero no voy a ser yo quién te diga lo que puedes o no puedes hacer, todo es intentarlo :)

      En mi GitHub el único proyecto que tengo que usa WebSockets es https://github.com/guiferviz/WebSocketsChatJava. Se trata de un chat montado en la plataforma Heroku (haciendo uso del Play Framework con Java).

      A mi también me gustaría tener un proyecto que haga eso que dices, pero en estos momentos no tengo tiempo ni para ir al baño XD Igual en unas semanas, cuando termine exámenes, podría echarle un vistazo. No sé si para entonces sería muy tarde para ti, de todas formas si hago algo te informaré.

      ¡Un saludo amigo!

      Eliminar