Taking pictures with the Camera API – part of WebAPI

Through the Camera API, part of WebAPI, it becomes 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 the users choose to activate this HTML element, they are presented with an option from where they want to choose a file, where the device’s camera is one of the options. If the camera is selected, 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/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 taken picture in the web page

Once we have a reference to the taken picture (i.e. file) we can then use createObjectURL to create a URL referencing the picture and setting it to 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 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 demo and code

If you want a complete working example page, I’ve created a Camera API demo. Here is the code for the HTML page and its accompanying JavaScript file:

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

Web browser support

  • Camera API is currently supported in Firefox and Google Chrome on Android devices.
  • createObjectURL is supported in Firefox, Google Chrome and Internet Explorer 10+.
  • FileReader is supported in Firefox, Google Chrome, Internet Explorer 10+ and Opera 11.6+.

The future

With WebRTC – which is support for real time, audio, video & data communications between two browsers – and a navigator.getUserMedia approach we will see much more of this in the near future, in a number of the major web browsers. For more information, please see our Web Platform Roadmap for Firefox.

But for now, you can enjoy taking/capturing pictures!

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , , , ,

Leave a Reply