Introduction to the Camera API

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: