How to Access Your Camera from a Browser
Use the getUserMedia method in the MediaDevices object and provide a constraint parameter.
Accessing the Back Camera
The back or environment camera is indicated with the constraint parameter set as:
{audio: false, video: {facingMode: 'environment'}}
Accessing the Front (Selfie) Camera
The front or selfie camera is indicated with the constraint parameter set as:
{audio: false, video: {facingMode: 'user'}}
Constructing the Request
The MediaDevcices JavaScript object provides the access and interface to all media input and output from an HTML5 browser. In this case media includes the video source (cameras), audio input (microphone), and audio output (speakers). The getUserMedia() method provides the means to get the required JavaScript object for things to work. This method is a promise (HTML5 term) that depends on the user granting permission before the request can proceed. The processing of the approval or denial is handled via then (for approval) and catch (for denial) methods to getUserMedia. This is usually done something like:
navigator.mediaDevices.getUserMedia(constraint)
.then (function(stream) {
/* Use the requested stream as needed */
});
.catch (function(errObject) {
/* Handle the error */
});
Using the either of the above constraints will request the user grant access to the camera and (if successful) execute the callback function in the then method.
The constraint parameter is optional. If not specified, then all devices are requested. There are two elements in the constraint - 'audio' and 'video'. This object specifies the properties of the requested media type. For the purpose of this post I am only interested in the camera, so my constraints object is:
{audio:false, video:true}The video request can specify a lot more detail, such as video feed size and which camera via the constraint properties width, height, and facingMode. These additional requirements are specified with standard keywords: min, max, ideal, and exact. The keywords min and max are only used for numeric quantities (e.g., frame size). The keyword ideal indicate the preference, and the keyword exact is a requirement. The full constraint object for requesting video only
{
audio: false.
video: {
width: {min:, max:, ideal:, exact:},
height: {min:, max:, ideal:, exact:},
facingMode: {ideal:, exact:},
}
}Note that it is not reasonable to specify exact and any other keyword -- either it's an exact match or it's not. If there is not an exact match, no stream will be returned. The keywords can be optionally left off, in which case the value of the requirement is considered ideal.
Once you have a video stream, it can be displayed in the browser using the HTML5 video tag. The HTML fragment below shows how this can done. This example is available online. It will fail if your device does not have a camera or if you do not give the page permission to access the camera. During the approval process you may be asked to select a camera.
<body>
<video id='videoDisplay' autoplay='true'
style='width:100%; height:100%;'></video>
<script>
// Use 'user' for the front camera
const constraints = {video:{facingMode: "environment"}, audio:false };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var video = document.getElementById ('videoDisplay');
video.srcObject = stream;
})
.catch(function(error) {
alert ('Device camera not available\n' + error.message);
});
</script>
</body>
Important Limitations/Considerations
The camera can only be accessed when the protocol is HTTP and the connection is secure (using HTTPS). It cannot be tested in 'file://' protocol mode, nor on an unencrypted site.
To read more about MediaDevices object see the documentation at Mozilla.