Controlando nuestra WebCam con HTML5

Comments: 1

Un sencillo ejemplo en el que accedemos a nuestra WebCam lo que nos permitirá convertir nuestro navegador web en una cámara de fotos utilizando únicamente HTML5, JavaScript y Canvas. Esto es posible gracias al desarrollo de la API getUserMedia, la cual aún no es soportada en todos los navegadores.

Gracias a getUserMedia podremos acceder no solo al control de nuestra cámara sino también al del microfóno, aunque debemos tener en cuenta que la especificación todavía se encuentra en fase de desarrollo (la última actualización del borrador se dio el 12 de diciembre). Podéis encontrar toda la documentación oficial en la página de W3C.

El mayor inconveniente es el lento soporte que está recibiendo esta API, lo que siginifica que esta aplicación ni siquiera es compatible con muchos de los navegadores modernos. La mayoria de los navegadores móviles, Safari y los navegadores de Microsoft, incluído IE10, se quedan fuera. Para ver esto en más detallle podéis visitar la tabla de compatibilidades en caniuse.

Respecto a Firefox, a día de hoy la gente de Mozilla aún no ha desarrollado la interfaz de usuario para la solicitud de activación de la cámara/micrófono. Por lo tanto, por motivos de seguridad la API está deshabilitada por defecto. Para poder activarla debemos entrar en la configuración de nuestro navegador (escribimos about:config), buscamos "media.navigator.enabled" y le cambiamos el valor a "true".

webcam javascript html5

Este ejemplo consta de un fichero index.html desde donde llamamos a los ficheros JavaScript y pintamos los elementos video (nuestro punto de entrada que actuará como pantalla de la cámara) y canvas (donde pintaremos cada foto que tomemos); y de una carpeta js que contiene la librería jQuery y el fichero main.js donde trabajaremos con la API getUserMedia.

Como siempre, podéis encontrar el repositorio de esta sencilla aplicación en Github (editado: el código ha evolucionado desde la redacción de este artículo, para acceder al contenido original que aquí se muestra tenéis que hacer un checkout al tag "1.0.0").

En realidad el código es más sencillo de lo que podría parecer. Comenzaremos con el html:

<!-- index.html -->

<!DOCTYPE html>
<html 
lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Webcam Example App</title>
        <script src="js/jquery.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <video id="video" width="450" height="368" autoplay="autoplay"></video>
        <button id="photo">Take a Photo!</button>
        <canvas id="canvas" width="450" height="368"></canvas>
    </body>
</html>

Gracias al atributo autoplay, el video comenzará a reproducir nada más cargue la página y hayamos aceptado la solicitud de activación de la cámara. Pulsando el botón “photo” tomaremos una foto la cual será mostrada en el elemento canvas.

// js/main.js

$(document).ready
(
    function()
    {

        var canvas = $('#canvas'),
            cxt = canvas[0].getContext('2d'),
     
       video = $('#video'),
            video = video[0];

        if (navigator.getUserMedia) {
            navigator.getUserMedia(
                { 'video': true },
                function(stream)
                {
                    video.src = stream;
                    video.play();
                }
            );
        } else if (navigator.webkitGetUserMedia) {
            navigator.webkitGetUserMedia
            (
                { 'video': true },
                function(stream)
                {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
        
        }
            );
        } else if (navigator.mozGetUserMedia) {
            navigator.mozGetUserMedia
            (
                { 'video': true },
                function(stream)
                {
                    video.mozSrcObject = stream;
                    video.play();
r
                },
                function(err)
                {
                    alert('An error occured! '+err);
                }
            );
        }
        $('#photo').click
        (
            function()
            {
                cxt.drawImage(video, 0, 0, 450, 368);
            }
        );
    }
);

El método getUserMedia requiere de tres parámetros: el tipo medio (vídeo, audio o ambos) y dos callbacks: la función a ejecutar en caso de que pueda acceder a el y otra para gestionar el error en caso contrario.

Vemos que los navegadores Chrome y Firefox requieren de sus respectivos prefijos de vendedor, de lo contrario no podrán ejecutar la API. Al pinchar en el botón "photo" llamamos al método drawImage() de canvas al que le pasamos como párametros la imagen del video y su tamaño. Las coordenadas las ponemos a cero.

Comments

You must sing in to post a comment.

Luis Morin Luis Morin

Buenas noches. Como agregamos una segunda cámara