Coding - HTML5 - Android - iOS

Accessing User Device Photos with the HTML5 Camera API

Among the many developing utilities in HTML5 are various methods for accessing user pictures from mobile devices and webcams. In this tutorial we will use the Camera API to import a user photo into a Web page, displaying it in a canvas element. The Camera API is primarily aimed at browsers on mobile devices running systems such as Android and iOS. The process involves a little JavaScript, but you should be able to complete it as long as you have basic scripting experience.

Create the Page

Start by creating a new HTML5 page – use the following outline:

<!DOCTYPE html>
<style type="text/css">

<script type="text/javascript">



We will be adding to the HTML body and the script section in the page head throughout the tutorial.

Add File Input

With the Camera API, you can use a file input element set to accept images. Add a little explanatory text to the body section of your page first:

Choose a picture from your device or capture one with your camera now:

Next add the input element:

<input type="file" accept="image/*" onchange="picChange(event)"/>

The element is set to accept any type of image. We also set a function to execute when the onchange event occurs, which will be whenever the user either chooses an image file from their device or takes one with the device camera.

Notice that the input element is much the same as the standard file input element you will have seen in other pages. As well as accepting images from a mobile device camera, the input element will also accept image files selected from the device, for example via a gallery app or file explorer.

Add a Canvas

To demonstrate what you can do with the photo taken by the user, we will write the image into an HTML5 canvas element. Add one after the input element, along with some more explanatory information:

<canvas id="capturedPhoto" width="500" height="400">

We give the canvas an ID attribute so that we can refer to it in JavaScript and set dimensions – feel free to change these if you like.

You can optionally add the following CSS declarations to the page style section:

body, html {font-family:sans-serif; background-color:#000000;}
div {width:80%; margin:auto; background-color:#ffffff; padding:5%; border:2px solid #990066; text-align:center; border-radius:10px;}
canvas {padding:5%; border:2px solid #330000; background-color:#660000; border-radius:10px;}


Respond to Change

Now let’s add the function we specified as onchange event listener for the input element – in the script section:

function picChange(evt){ 
//bring selected photo in

The remainder of the code for the tutorial should be placed in this function. Remember that we passed the event as a parameter when calling the function – we will be able to retrieve the input data from it. Inside the function, do that now:

//get files captured through input
var fileInput =;

The input file is retrieved as an array, so we will need to access the first element in it. First make sure we have at least one element:

//get the file

The rest of the function code will sit inside this conditional block. Start by getting a reference to the window URL:

//window url 
var windowURL = window.URL || window.webkitURL;	

Now attempt to get the URL representing the location of the file we are trying to import into the page:

//picture url
var picURL = windowURL.createObjectURL(fileInput[0]);

The file may be one the user selected from their device gallery or one they have just taken using their device camera. Either way, we need its location to bring it into the page. The createObjectURL call lets us do that.

If the createObjectURL method is not supported by the user’s browser, this code will fail. You can take steps to use the FileReader object instead if that happens – see this tutorial for an example of how you could do that.

Draw into the Canvas

Now lets draw the user photo into the canvas. After calling createObjectURL, get a reference to the canvas element we added to the page earlier:

//get canvas
var photoCanvas = document.getElementById("capturedPhoto");

We use the ID value we gave the element to retrieve it. Now get the context:

var ctx = photoCanvas.getContext("2d");

Now let’s create an Image object for the photo:

//create image
var photo = new Image();

We won’t attempt to draw the photo into the page until it has loaded, so add an onload function next:

photo.onload = function(){
  //draw photo into canvas when ready
  ctx.drawImage(photo, 0, 0, 500, 400);

We draw the image using the context object, setting X and Y co-ordinates followed by width and height – adjust these any way you like. After the onload function, load the image by setting it as source for the Image element we created:

//load photo into canvas
photo.src = picURL;

When the image has loaded, the onload function will execute, writing it into the canvas element in the page. Finally, revoke the ObjectURL:

//release object url

You should now be able to test your page on a mobile device. When you click the input button, your device may prompt you with a pop-up dialog asking which application you want to use to select a picture, including the camera application and your gallery or file explorer. When you select the camera, what happens next will depend on your device operating system. For example, on Android, you are taken to the camera and asked whether you want to save/ accept any image you capture – if you choose to save, the file is returned to the page where the code we added writes it into the canvas element.



The code we used in this tutorial demonstrates writing the user-captured photo into a canvas element so that you could then manipulate it. However, another option is to simply write the image into an img element, by setting its URL as the src attribute in your JavaScript function, instead of loading it into the Image object.


The above coding approach is aimed at capturing photos on mobile devices – a range of other utilities are currently under development for capturing images from webcams, including the getUserMedia method. See this tutorial for an overview of how you can capture webcam images. You may also wish to consider using utilities such as Modernizr to handle feature detection on the user device and browser.


The simple component we created in this tutorial should give you a flavor of how your pages can interact with user device features such as mobile cameras. Web development is benefiting from a range of new ways to utilize the range of user devices people are browsing on. Since these features are constantly evolving and the associated Web technologies are not widely supported yet, it goes without saying that you can’t rely on these techniques without supplying fall-backs for users without support.

About the author

I'm a developer and technical writer - see for details. Follow me on Twitter @BrainDeadAir or email me at

Share this post


  1. alan

    thanks for your example & explain
    But I have a question that why this example is not useful for chrome?

  2. Lily Tsai

    Thanks Sue for the step-by-step tutorial!

    However, I found the android-chrome browser support both devices and capturing photos,
    while android browser doesn’t support to capture photo.
    Android browser alerted “can’t open camera”.

    Would you give me some suggestion about how to make android browser support open camera?

Leave a Comment

Subscribe To Our Newsletter