# Access Device Camera from static HTML page using Javascript Camera API

Using Javascript Camera API you can access the device's Front and back camera from your Static HTML page. 
It doesn't required any library or module to be installed. you can do by just writing a small code. 
Will explain step by step.

First you have to add a html5 **video** tag to your **index.html**

```
<video id="video"></video>
``` 
In your **camera.js** file add the following code snippet.
First check if you browser is supporting ** navigator.mediaDevices**.

```
if(navigator && navigator.mediaDevices){
    //Your browser is supporting camera API.
}else{
    console.log("camera API is not supported by your browser")
}
``` 
In the next step, we will add the camera API code.

```
if(navigator && navigator.mediaDevices){
    navigator.mediaDevices.getUserMedia(options)
    .then(function(stream) {
       //use the stream to you code
    })
    .catch(function(err) {
        //Handle error here
    });
}else{
    console.log("camera API is not supported by your browser")
}
``` 
as you can see that in the above code there is a parameter **options**. Its a configuration object which we will to pass to restrict or allow some of its feature.
For example, to allow the audio:

```
{ audio: true }
``` 
to access the front camera:

```
{ video: { facingMode: "user" } }
``` 
to access the back camera:

```
{ video: { facingMode: { exact: "environment" } } }
``` 
for more information about configuration, visit  [this doc](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) .
We are almost done with the configuration, Now will assign stream to the video tag.

```
if(navigator && navigator.mediaDevices){
    const options = { audio: false, video: { facingMode: "user", width: 200, height: 200  } }
    navigator.mediaDevices.getUserMedia(options)
    .then(function(stream) {
        var video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
    })
    .catch(function(err) {
        //Handle error here
    });
}else{
    console.log("camera API is not supported by your browser")
}
``` 

So, We are almost done till now, now we will add a button to capture the image from the video and display it on canvas.
This is our final **camera.js** file

```

var video, canvas, ctx;
if(navigator && navigator.mediaDevices){
    const options = { audio: false, video: { facingMode: "user", width: 300, height: 300  } }
    navigator.mediaDevices.getUserMedia(options)
    .then(function(stream) {
        video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext('2d');
    })
    .catch(function(err) {
        //Handle error here
    });
}else{
    console.log("camera API is not supported by your browser")
}

function clickPhoto() {
   ctx.drawImage(video, 0,0, canvas.width, canvas.height);
 }

``` 

Here is our final** index.html** file.

```
<body>
     <div style="text-align: center;">                                                   
          <video id="video" style="text-align: center; border-radius: 20px;"></video>
        </div>
        <div  style="text-align: center;">
            <button type="button" class="btn btn-warning" onclick="clickPhoto();">Take Photo</button>
         </div>
         <div style="text-align: center;">
            <canvas id="myCanvas" width="300" height="300" style="text-align: center; border-radius: 20px;"></canvas>
        </div>
</body>
``` 
 [Download](https://github.com/kmtabish/blog-js-camera-api)  the final codebase repo.

See the  [demo](https://blog-js-camera-api.surge.sh/)  here.

If you like the blog, please share it. 
Happy coding... :)