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:

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

    
        
        
        
    

    

        

            
Camera API

            

                
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).

                

                    
                

                
Preview:
                

                    
                

                


            

            
All the code is available in the Camera API repository on GitHub.
        


        


    

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

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!