Introducción a la API de Cámara

Mediante la API de Cámara, es posible tomar fotografías con la cámara de su dispositivo y subirlas a una página web. Esto se logra a través de un elemento input con los atributos type="file" y accept para declarar que el elemento acepta imágenes. El HTML se parece a esto:

<input type="file" id="take-picture" accept="image/*">

Cuando los usuarios eligen activar este elemento HTML, se les presenta la opción de seleccionar un fichero, donde la cámara del dispositivo es una de las opciones. Si seleccionan la cámara, se accede al modo de toma de fotografía. Tras realizar la fotografía, al usuario se le presenta la posibilidad de aceptarla o rechazarla. Si se acepta, es enviada al elemento <input type="file"> y se lanza su evento onchange.

Obtener una referencia a la fotografía tomada

Con la ayuda de la API de Fichero usted puede acceder a la fotografía tomada o el fichero elegido:

var takePicture = document.querySelector("#take-picture");
takePicture.onchange = function (event) {
    // Obtener una referencia a la fotografía tomada o fichero seleccionado
    var files = event.target.files,
        file;
    if (files && files.length > 0) {
        file = files[0];
    }
};

Presentando la fotografía en la página web

Una vez que tiene una referencia a la fotografía tomada (ej.: fichero), puede entonces usar window.URL.createObjectURL() para crear una URL referenciando la fotografía y estableciéndola como src de una imagen:

// Referencia de la imagen
var showPicture = document.querySelector("#show-picture");

// Crear ObjectURL
var imgURL = window.URL.createObjectURL(file);

// Establecer ObjectURL como img src 
showPicture.src = imgURL;

// Por razones de rendimiento, revocar los ObjectURL usados
URL.revokeObjectURL(imgURL);

Si createObjectURL() no es soportado, una alternativa es retroceder a FileReader:

// Retroceder a FileReader si createObjectURL no está soportado
var fileReader = new FileReader();
fileReader.onload = function (event) {
    showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

Ejemplo completo

Si desea verlo en acción, eche un vistazo al ejemplo completo de la API de Cámara funcionando.

Aquí está el código usado para esa demostración:

Página HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Camera API</title>
        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
    </head>

    <body>

        <div class="container">
            <h1>Camera API</h1>

            <section class="main-content">
                <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>
                
                <p>
                    <input type="file" id="take-picture" accept="image/*">
                </p>

                <h2>Preview:</h2>
                <p>
                    <img src="about:blank" alt="" id="show-picture">
                </p>

                <p id="error"></p>

            </section>

            <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p>
        </div>


        <script src="js/base.js"></script>


    </body>
</html>

Fichero JavaScript

(function () {
    var takePicture = document.querySelector("#take-picture"),
        showPicture = document.querySelector("#show-picture");

    if (takePicture && showPicture) {
        // Establecer eventos
        takePicture.onchange = function (event) {
            // Obtener una referencia a la fotografía tomada o fichero seleccionado
            var files = event.target.files,
                file;
            if (files && files.length > 0) {
                file = files[0];
                try {
                    // Crear ObjectURL
                    var imgURL = window.URL.createObjectURL(file);

                    // Establecer ObjectURL como img src 
                    showPicture.src = imgURL;

                    // Revocar ObjectURL
                    URL.revokeObjectURL(imgURL);
                }
                catch (e) {
                    try {
                        // Regresar a FileReader si createObjectURL no está soportado
                        var fileReader = new FileReader();
                        fileReader.onload = function (event) {
                            showPicture.src = event.target.result;
                        };
                        fileReader.readAsDataURL(file);
                    }
                    catch (e) {
                        //
                        var error = document.querySelector("#error");
                        if (error) {
                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
                        }
                    }
                }
            }
        };
    }
})();

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Camera API	Not supported	Not supported	Not supported	Not supported	Not supported
`createObjectURL()`	16	8.0 (8.0)	10+	Not supported	Not supported
`FileReader`	16	3.6 (1.9.2)	10+	11.6+	Not supported

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Camera API	3.0	(Yes)	10.0 (10.0)	Not supported	Not supported	Not supported
`createObjectURL()`	4	(Yes)	10.0 (10.0)	Not supported	Not supported	Not supported
`FileReader`	3	(Yes)	10.0 (10.0)	Not supported	11.1	Not supported