Add WebCam to website, in 10 lines of Javascript

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 to see it working on the codepen website

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

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

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

Read Also:

Why to use React if HTML/CSS/JS works fine?

Areeb ur Rub ・ May 29 '21

#discuss #webdev #react #javascript

Follow me for more:

Areeb ur RubFollow

Arduino | Python | TypeScript | Next Js | Love learn making things

Follow me on Twitter: @areeburrub