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.
Electron TODO app
Creating the app
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.
Application features
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.
HTML explanation
Camera modal
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.
JavaScript explanation
Global variable declaration
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.
Checking if the mediaDevices API is supported
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.
Turning the camera on/off
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:
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.
To turn off the camera, we need to stop all the sources associated with the video stream.
The function below flips the camera between the front and rear view.
Capturing a photo
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.
See Also:
Last updated