Introduction to the Camera API

  • Revision slug: DOM/Using_the_Camera_API
  • Revision title: Using the Camera API
  • Revision id: 304103
  • Created:
  • Creator: openjck
  • Is current revision? No
  • Comment Removed the Camera API promo banner.

Revision Content

Through the Camera API, it is possible to take pictures with your device's camera and upload them into the current web page. This is achieved through an input element with type="file" and an accept attribute to declare that it accepts images. The HTML looks like this:

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

When users choose to activate this HTML element, they are presented with an option to choose a file, where the device's camera is one of the options. If they select the camera, it goes into picture taking mode. After the picture has been taken, the user is presented with a choice to accept or discard it. If accepted, it gets sent to the <input type="file"> element and its onchange event is triggered.

Get a reference to the taken picture

With the help of the File API you can then access the taken picture or chosen file:

var takePicture = document.querySelector("#take-picture");
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];
    }
};

Presenting the picture in the web page

Once you have a reference to the taken picture (i.e., file), you can then use {{ domxref("window.URL.createObjectURL()") }} to create a URL referencing the picture and setting it as the src of an image:

// 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);

If createObjectURL() isn't supported, an alternative is to fallback to {{ domxref("FileReader") }}:

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

Complete example

If you want to see it in action, take a look at the complete working Camera API example.

Here is the code used for that demo:

HTML page

<!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>

JavaScript file

(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";
                        }
                    }
                }
            }
        };
    }
})();

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Camera API {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
createObjectURL() 16 {{CompatGeckoDesktop("8.0")}} 10+ {{CompatNo()}} {{CompatNo()}}
{{domxref("FileReader")}} 16 {{CompatGeckoDesktop("1.9.2")}} 10+ 11.6+ {{CompatNo()}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Camera API 3.0 {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("10.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
createObjectURL() 4 {{CompatVersionUnknown()}} {{CompatGeckoMobile("10.0")}} {{CompatNo()}} {{CompatNo()}} {{CompatNo()}}
{{domxref("FileReader")}} 3 {{CompatVersionUnknown()}} {{CompatGeckoMobile("10.0")}} {{CompatNo()}} 11.1 {{CompatNo()}}

 

Revision Source

<p>Through the <a class="link-https" href="https://wiki.mozilla.org/Platform/Features/Camera_API">Camera API</a>, it is possible to take pictures with your device's camera and upload them into the current web page. This is achieved through an <code>input</code> element with <code>type="file"</code> and an <code>accept</code> attribute to declare that it accepts images. The HTML looks like this:</p>
<pre class="brush: html">
&lt;input type="file" id="take-picture" accept="image/*"&gt;
</pre>
<p>When users choose to activate this HTML element, they are presented with an option to choose a file, where the device's camera is one of the options. If they select the camera, it goes into picture taking mode. After the picture has been taken, the user is presented with a choice to accept or discard it. If accepted, it gets sent to the <code>&lt;input type="file"&gt;</code> element and its <code>onchange</code> event is triggered.</p>
<h2 id="Get_a_reference_to_the_taken_picture">Get a reference to the taken picture</h2>
<p>With the help of the <a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">File API</a> you can then access the taken picture or chosen file:</p>
<pre class="brush: js">
var takePicture = document.querySelector("#take-picture");
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];
    }
};
</pre>
<h2 id="Presenting_the_picture_in_the_web_page">Presenting the picture in the web page</h2>
<p>Once you have a reference to the taken picture (i.e., file), you can then use {{ domxref("window.URL.createObjectURL()") }} to create a URL referencing the picture and setting it as the <code>src</code> of an image:</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>If <code>createObjectURL()</code> isn't supported, an alternative is to fallback to {{ 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="Complete_example">Complete example</h2>
<p>If you want to see it in action, take a look at the <a class="external" href="http://robnyman.github.com/camera-api/">complete working Camera API example</a>.</p>
<p>Here is the code used for that demo:</p>
<h3 id="HTML_page">HTML page</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="JavaScript_file">JavaScript file</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="Browser_compatibility">Browser compatibility</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>&nbsp;</p>
Revert to this revision