Monaca Docs
How to Use a Web API
This tutorial explains how to use the MediaDevices API to capture pictures using the device camera in a sample application.

First of all, let's create the application with a Monaca template. From the Monaca dashboard, go to Create New Project → Sample Applications. Then choose Electron TODO App from the template list, fill in the Project Name and Description and click Create Project.

This sample application allows users to create and manage a to do list. The user can add pictures by uploading an existing picture or taking a picture. The list is saved in the local storage.
This tutorial focuses on explaining how we use the MediaCapture API to take pictures using the built-in camera.
Once you open the application, it displays the items saved in the local storage.
Application dashboard
To create a new item, click the + new button on the top right corner of the screen. A new modal dialog will open. You can input a description to the text field and upload an existing picture with the
button or take a new picture by clicking the
Add a new item
Once the
button is clicked, another modal dialog with the camera view opens. If you press capture, it will capture a photo and save it.
Taking a picture using the laptop camera

The following code snippet is the camera modal. This modal opens when the camera button is clicked. It has 3 buttons - rotate, capture , and cancel. The rotate button is only visible if the device supports flipping between the front and rear cameras. The video-container element is used to stream pictures from the built-in camera.
<div class="modal fade" id="camera-modal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="camera-modal-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="camera-header-modal"></div>
<div class="camera-modal-body modal-body text-center">
<video id="video-container" class="camera-preview" autoplay></video>
<a id="cordova-camera-cancel" class="btn enabled camera-close-btn" data-dismiss="modal"><i class="fa fa-times"></i> cancel</a>
<a id="rotate-camera" class="btn enabled camera-rotate-btn"><i class="fa fa-sync"></i> Rotate</a>
<a id="camera-capture" class="btn enabled camera-capture-btn" data-dismiss="modal"><i class="fa fa-camera"></i> Capture</a>

Let's go quickly through some of the most important variables used in the camera feature:
  • isFrontCamera is used to toggle between front and rear camera.
  • FRONT_CAMERA is used to store the front camera value of the mediaDevices API’s facingModeEnum.
  • REAR_CAMERA is used to store the rear camera value of the mediaDevices API’s facingModeEnum.
let isFrontCamera;
const FRONT_CAMERA = 'user';
const REAR_CAMERA = 'environment';
const videoContainer = document.getElementById('video-container');
const btnOpenCameraModal = document.getElementById('open-camera-modal');
const btnRotateCamera = document.getElementById('rotate-camera');

The following code snippet is to check whether the mediaDevices API is supported and to display the rotate button if the device is Android and use the rear camera as default.
function initialize() {
// Check if getUserMedia is supported on the device
if (!hasMediaDevicesApi()) {
btnOpenCameraModal.hidden = true;
if (isAndroidOS()) {
// use rear camera for android
btnRotateCamera.hidden = false;
isFrontCamera = false;
} else {
// use front camera for browser/electron
btnRotateCamera.hidden = true;
isFrontCamera = true;
function hasMediaDevicesApi() {
return !!(navigator.mediaDevices &&

We will use the function getUserMedia() to ask the user for the permission to use the media input that forms the MediaStream. The stream can contain video (such as camera, video recording device, screen sharing service, etc), audio, or other media. For more details, please refer to the official document. The syntax is as following:
var promise = navigator.mediaDevices.getUserMedia(constraints);
The function returns a promise and accepts a MediaStreamConstraints object as a parameter.
In the following code snippet, we specify the width and height of the video element to be exactly 250 pixels and set the camera facing mode based on the provided argument. Once the camera device is connected, the Media Stream object is returned and assigned to the video element.
function turnOnCamera(frontCamera) {
const facingModeOption = frontCamera ? FRONT_CAMERA : REAR_CAMERA;
const constraints = {
video: {
width: {
exact: 250
height: {
exact: 250
facingMode: facingModeOption
// Access to the camera and turn it own
function handleSuccess(stream) {
videoContainer.srcObject = stream;
function handleError(error) {
alert('Could not get user media API' + JSON.stringify(error));
To turn off the camera, we need to stop all the sources associated with the video stream.
function turnOfCamera() {
if (videoContainer && videoContainer.srcObject) {
videoContainer.srcObject.getTracks().forEach(function(track) {
videoContainer.srcObject = null;
The function below flips the camera between the front and rear view.
function rotateCamera(e) {
isFrontCamera = !isFrontCamera;

To capture a photo of the video stream, we first create a canvas element whose width and height are the same as the video element. Then, we stop the stream and convert the last capture of it to image format.
function takePicture(e) {
const canvas = document.createElement('canvas');
// Saving current image
canvas.width = videoContainer.videoWidth;
canvas.height = videoContainer.videoHeight;
canvas.getContext('2d').drawImage(videoContainer, 0, 0);
// If the video source Object is set, stop all tracks
if (videoContainer.srcObject) {
videoContainer.srcObject.getTracks().forEach(function(track) {
try {
// Other browsers will fall back to image/png
todoItemImage.src = canvas.toDataURL('image/webp');
} catch (error) {
alert('Could not get the picture.' + JSON.stringify(error));
See Also:
Copy link
On this page
Electron TODO app
Creating the app
Application features
HTML explanation
Camera modal
JavaScript explanation
Global variable declaration
Checking if the mediaDevices API is supported
Turning the camera on/off
Capturing a photo