Add WebCam to website, in 10 lines of Javascript
Published: 2021-05-31 18:29:08

<img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

If you don't know it by now then you may have a thought of how webcams are used in a website, so today I will show you how to do it.

We will make a Photobooth which will display and capture images from webcam.

>The codepen is not able to get camera access in the embedded form [click here](https://codepen.io/areeburrub/full/wvJpMeb) to see it working on the codepen website


{% codepen https://codepen.io/areeburrub/pen/wvJpMeb %}

### First make a layout
Before getting into javascript, we have to make a layout which I have divided in 2 parts [Camera Container and Camera Roll]

*Camera Container* will have a `<video id=video autoplay></video>` where our live camera's feed will go and a button to snap images `<button id="snap">Snap a Photo</button>` and the *Camera Roll* will be simply a div where we will `.prepend()` the `<canvas>` element to it, which will be created in javascript and contain the captured image.

>Don't get confused with `prepend` and `canvas` :
* `prepend()` is just like `append()`, a feature in Javascript which let you add element as a child of another element\
* `prepend()` means adding before `append()` means adding after
* `<canvas>` is just a element in HTML and used to draw graphics on it using Javascript we will display the captured image using it

Styling the layout totally depends on your creativity, as I have just add some paddings and margin for a better look

### The Javascript part
There is an Read-Only Object called `navigator` it contains all the browser information and also contains identity of the user agent, simply it contains the permissions, user data, user preferences and things like that.

So First we will check that the device have a media device or not and the user can give access to it or not.
`if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {};`
and this is true then we will ask for the permission to access using `navigator.mediaDevices.getUserMedia({ video: true }).then((stream)=>{ });` followed by a `.then` which will contain a function to update the video element to stream the video so in 

<pre>
.then((stream)=>{
        video.srcObject = stream;
        video.play();
});

</pre>

> I haven't describe how to get the DOM element in javascript assuming you definitely know it


Now for the Capturing part we have to add a `.onclick` event to the snap buuton and after the click we will create a canvas element using `document.createElement('canvas');` and save it in a `const` like this ` const canvas = document.createElement('canvas');` and set the type of context and save it as well in a `const` like this `const context = canvas.getContext('2d');`

Now using `.drawImage()` we will draw the snap on the canvas like this `context.drawImage(video, 0, 0, canvas.width, canvas.height);` the size is same as canvas to avoid streaching.

then we will `prepend(canvas)` to camera roll using `cameraRoll.prepend(canvas);`

## Have a look to the codepen it will clear how it works
<img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
>Read Also:
{% post https://dev.to/areeburrub/why-to-use-react-if-html-css-js-works-fine-370e %}
Follow me for more:
{% user areeburrub %}
Follow me on Twitter: [@areeburrub](https://twitter.com/areeburrub)