Phone cameras are typically activated by the pre-installed Camera app, but website owners can provide a shortcut for users to take pictures or record videos when visiting their site. This allows for quicker and simpler access to the camera feature than having to open the Camera app.
Implementing a form field that accepts camera input is simpler than you think.
Table of Contents
Form Field
//front-camera <input type="file" accept="image/*" capture="user" /> //rear-camera <input type="file" accept="image/*" capture="environment" />
This field is just a normal File field so you don’t need to handle your form differently. Remember that this field only works with iOS6+ or Android 3.0+, which is not an issue anymore. Devices produced in recent years run on a higher OS version.
In case you want to record video or audio, below are 2 necessary HTML5 fields.
<input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone">
Control via JavaScript
To control the field, you can use the MediaDevices.getUserMedia() method. It prompts the user for permission to use a media input that produces MediaStream tracks containing the requested types of media.
getUserMedia({
audio: true,
video: {
facingMode: { exact: "environment" }
}
})
The first step for accessing the camera is to determine the correct source for the camera. In most cases, this will be the device’s native camera app. This can be done using a combination of Javascript and the MediaStream API. The code can detect the device’s camera and stream media from the camera.
Once the source has been determined, you can use the getUserMedia() Javascript function to initiate a media request from the device. This will prompt the user to allow access to their camera if they are comfortable with it. Once the user accepts, the HTML5 video element is used to display the incoming video feed on the device’s screen. The getUserMedia() function also provides a media stream that can be used to capture the video feed in a variety of formats such as MP4, WebM, and OGG.
Once the video feed is sent to the HTML5 video element, the code can then take control of the camera. This can be done by setting the media parameters such as the resolution, frame rate, and aspect ratio. These can be defined manually, or through a preset which sets the parameters automatically depending on the device’s capabilities.
To control the camera more directly, the getUserMedia() JavaScript function can also be used to capture individual frames from the video feed. This can then be used to create snapshots or video clips of particular moments in the video feed.
Aside from capturing the video feed, the getUserMedia() JavaScript function can also be used to record audio from the device’s microphone. This can be used to create voice-over recordings or audio clips from certain moments in the video.
