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
andcanvas
:
prepend()
is just likeappend()
, a feature in Javascript which let you add element as a child of another element\prepend()
means adding beforeappend()
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:
Follow me on Twitter: @areeburrub
Top comments (0)