path: root/files/pt-br/web/guide/api/camera/index.html

---
title: Introdução da API de Câmera
slug: Web/Guide/API/Camera
translation_of: Archive/B2G_OS/API/Camera_API/Introduction
---
<p><span class="seoSummary">Através  da <a class="link-https" href="https://wiki.mozilla.org/Platform/Features/Camera_API">Camera API</a>, é possivel tirar fotos com a câmera de seu dispositivo e enviá-las para a atual página da web.</span> Isso é obtido pelo elemento <code>input</code> com <code>type="file"</code> e um atributo <code>accept</code> para declarar que aceita imagens. O HTML se parece com esse:</p>
<pre class="brush: html">&lt;input type="file" id="take-picture" accept="image/*"&gt;
</pre>
<p>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 <code>&lt;input type="file"&gt;</code> e isso acionará o evento <code>onchange</code>.</p>
<h2 id="Obter_uma_referencia_para_a_foto_tirada">Obter uma referencia para a foto tirada</h2>
<p>Com a ajuda da <a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">File API</a> você pode acessar a imagem capturada ou escolher um arquivo:</p>
<pre class="brush: js">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 &amp;&amp; files.length &gt; 0) {
        file = files[0];
    }
};
</pre>
<h2 id="Mostrando_a_imagem_na_página_web">Mostrando a imagem na página web</h2>
<p>Uma vez que você tem a referencia da imagem capturada (i.e., arquivo), você pode usar {{ domxref("window.URL.createObjectURL()") }} para criar uma URL referenciando a foto e configurando como o <code>src</code> de uma imagem:</p>
<pre class="brush: js">// 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);
</pre>
<p>Se <code>createObjectURL()</code> não é suportado, uma alternativa é voltar ao {{ domxref("FileReader") }}:</p>
<pre class="brush: js">// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
    showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);
</pre>
<h2 id="Exemplo_Completo">Exemplo Completo</h2>
<p>Se você quiser ver isso em ação, dê uma olhada em <a class="external" href="http://robnyman.github.com/camera-api/">complete working Camera API example</a>.</p>
<p>Aqui está o código usado nessa demo:</p>
<h3 id="Página_HTML">Página HTML</h3>
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;Camera API&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/base.css" type="text/css" media="screen"&gt;
    &lt;/head&gt;

    &lt;body&gt;

        &lt;div class="container"&gt;
            &lt;h1&gt;Camera API&lt;/h1&gt;

            &lt;section class="main-content"&gt;
                &lt;p&gt;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).&lt;/p&gt;

                &lt;p&gt;
                    &lt;input type="file" id="take-picture" accept="image/*"&gt;
                &lt;/p&gt;

                &lt;h2&gt;Preview:&lt;/h2&gt;
                &lt;p&gt;
                    &lt;img src="about:blank" alt="" id="show-picture"&gt;
                &lt;/p&gt;

                &lt;p id="error"&gt;&lt;/p&gt;

            &lt;/section&gt;

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


        &lt;script src="js/base.js"&gt;&lt;/script&gt;


    &lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 id="Arquivo_JavaScript">Arquivo JavaScript</h3>
<pre class="brush: js">(function () {
    var takePicture = document.querySelector("#take-picture"),
        showPicture = document.querySelector("#show-picture");

    if (takePicture &amp;&amp; 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 &amp;&amp; files.length &gt; 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";
                        }
                    }
                }
            }
        };
    }
})();
</pre>
<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Camera API</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
   </tr>
   <tr>
    <td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
    <td>16</td>
    <td>{{CompatGeckoDesktop("8.0")}}</td>
    <td>10+</td>
    <td>{{CompatNo()}}</td>
    <td>{{CompatNo()}}</td>
   </tr>
   <tr>
    <td>{{domxref("FileReader")}}</td>
    <td>16</td>
    <td>{{CompatGeckoDesktop("1.9.2")}}</td>
    <td>10+</td>
    <td>11.6+</td>
    <td>{{CompatNo()}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Chrome for Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Camera API</td>
    <td>3.0</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatGeckoMobile("10.0") }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
   </tr>
   <tr>
    <td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
    <td>4</td>
    <td>{{CompatVersionUnknown()}}</td>
    <td>{{CompatGeckoMobile("10.0")}}</td>
    <td>{{CompatNo()}}</td>
    <td>{{CompatNo()}}</td>
    <td>{{CompatNo()}}</td>
   </tr>
   <tr>
    <td>{{domxref("FileReader")}}</td>
    <td>3</td>
    <td>{{CompatVersionUnknown()}}</td>
    <td>{{CompatGeckoMobile("10.0")}}</td>
    <td>{{CompatNo()}}</td>
    <td>11.1</td>
    <td>{{CompatNo()}}</td>
   </tr>
  </tbody>
 </table>
</div>
<p> </p>