Através  da Camera API, é possivel tirar fotos com a câmera de seu dispositivo e enviá-las para a atual página da web. Isso é obtido pelo elemento input com type="file" e um atributo accept para declarar que aceita imagens. O HTML se parece com esse:

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

Quando usuários escolhem ativar esse elemento HTML, é apresentado a eles uma opção para escolher um arquivo, onde a câmera do dispositivo é uma das opções. Se selecionarem a câmera, entrará no modo de captura de imagem. Depois que a imagem for tirada, será apresentada a escolha de aceita-lá ou descartar-lá. Se aceita, será enviada ao elemento <input type="file"> e isso acionará o evento onchange.

Obter uma referencia para a foto tirada

Com a ajuda da File API você pode acessar a imagem capturada ou escolher um arquivo:

var takePicture = document.querySelector("#take-picture");
takePicture.onchange = function (event) {
    // Obtenha uma referencia para a imagem capturada ou escolha um arquivo
    var files = event.target.files,
        file;
    if (files && files.length > 0) {
        file = files[0];
    }
};

Mostrando a imagem na página web

Uma vez que você tem a referencia da imagem capturada (i.e., arquivo), você pode usar window.URL.createObjectURL() para criar uma URL referenciando a foto e configurando como o src de uma imagem:

// Image reference
var showPicture = document.querySelector("#show-picture");

// Get window.URL object
var URL = window.URL || window.webkitURL;

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

// Set img src to ObjectURL
showPicture.src = imgURL;

// For performance reasons, revoke used ObjectURLs
URL.revokeObjectURL(imgURL);

Se createObjectURL() não é suportado, uma alternativa é voltar ao FileReader:

// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
    showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

Exemplo Completo

Se você quiser ver isso em ação, dê uma olhada em complete working Camera API example.

Aqui está o código usado nessa demo:

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>

Arquivo JavaScript

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

    if (takePicture && showPicture) {
        // Set events
        takePicture.onchange = function (event) {
            // Get a reference to the taken picture or chosen file
            var files = event.target.files,
                file;
            if (files && files.length > 0) {
                file = files[0];
                try {
                    // Get window.URL object
                    var URL = window.URL || window.webkitURL;

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

                    // Set img src to ObjectURL
                    showPicture.src = imgURL;

                    // Revoke ObjectURL
                    URL.revokeObjectURL(imgURL);
                }
                catch (e) {
                    try {
                        // Fallback if createObjectURL is not supported
                        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";
                        }
                    }
                }
            }
        };
    }
})();

Compatibilidade dos navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Camera API Não suportado Não suportado Não suportado Não suportado Não suportado
createObjectURL() 16 8.0 (8.0) 10+ Não suportado Não suportado
FileReader 16 3.6 (1.9.2) 10+ 11.6+ Não suportado
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Camera API 3.0 (Yes) 10.0 (10.0) Não suportado Não suportado Não suportado
createObjectURL() 4 (Yes) 10.0 (10.0) Não suportado Não suportado Não suportado
FileReader 3 (Yes) 10.0 (10.0) Não suportado 11.1 Não suportado

 

Etiquetas do documento e colaboradores

Colaboradores desta página: leotada
Última atualização por: leotada,