Take Photos With Your Webcam In Your Browser
Playing
01. Take Photos With Your Webcam In Your Browser

Episodes

0%
Your progress
  • Total: 16m
  • Played: 0m
  • Remaining: 16m
Join or sign in to track your progress

Transcript

00:00
In this video, we're going to be capturing photos from our video stream, so from a webcam
00:05
or something like that. And we're going to be replacing that down here. So there's a little bit going on in the background here. We've actually got a canvas element which is consistently being drawn onto.
00:15
When I hit Take Photo, all that's going to do is it's going to set the source of this image just down here, which is just a placeholder image from Place Kitten. And that's going to apply that to that image. So if I put my hand up, and there we go, I've taken a picture.
00:30
Cool. So this is pretty much how it's going to work. Very, very straightforward to do. Not really too much to do here.
00:37
All we need to do is get a video stream going, and the rest is really straightforward. So let's jump in and look at the code. So we are starting from scratch here. I guess the first thing to do is build some of the markup.
00:50
And the first thing that we're going to do within this is actually grab the video stream from the user's camera. So let's just style up a little container here that's going to contain all of this just to keep it neat and tidy.
01:02
And I've given this a class of booth. So inside of main.css, let's use this selector, and let's start to style this up. So I'm going to give this a width of 400 pixels. I'm going to give this a background color here of something like CCC.
01:18
I'm going to give this a border, quite a thick border, which is going to be solid, and that's going to be a different shade of gray. And then we'll center this container. So margin, zero on the top, also on the left and the right.
01:30
And there we go. So we've got this little container here. And when we put some text in it, you'll see. There we go.
01:37
So we've got that element there. Okay, so if you know how to apply video to the page, or you've already done this in a previous lesson of ours, then you'll probably not want to follow this part. You might want to just skip along to the point that we actually capture the photo.
01:51
But for the sake of the tutorial, I'm actually going to create the video element and create the marker of the JavaScript that we need to do this. So all that we've really got linking in is our style sheet, which you've just seen I've added some styles to.
02:03
And we've got our photo.js JavaScript file, which is within the JS directory here. So all from scratch. But make sure you've got these both linked in before you start anything. Okay, so for the video then, we're going to give this an ID so we can target it with JavaScript
02:18
really easily. We're not going to be using jQuery or anything like that. There's no need for such a simple thing. And I'm going to give this a width as well.
02:26
So I'm going to give it a width of 400, and I'm going to give this a height of 300. So this is the element that we're going to basically add a source to. So typically, like you just saw when I generated that, you have a source attribute here. What we're going to do is we're going to do this all with JavaScript, but then we're going
02:42
to inject the source into this video element so it appears properly on the page. But you can see here, we've got the correct dimensions. Oh, and let's bring up our console as well just so we can see what we're doing properly if we need to debug anything.
02:56
So I'll open the console just in case. Right, let's go ahead and write some of the JavaScript. It's fairly straightforward. So I'm going to create a self-invoking function here, which will just be run as soon as this
03:06
hits like so, so everything in here will be run. Really the first thing we need to do is just set things up, and we'll be adding more to this later, but we want to capture that video element or select it. So we're going to say document, and then we're going to use the getElementById method, which
03:24
is pretty self-explanatory. We type video in there, so this with an ID of video. So we've now got access to this video here, which we can apply our source to. So now what we also want is we want to be able to generate this source as well, and
03:40
we use the URL API for that. So I'm going to create a variable just called VendorURL, and this is going to equal window.URL, all in caps, or if that's not available, we need to use the WebKit prefix version. So we say window.WebKitURL, again in capitals.
03:59
So that's all we need for now to actually get the video working, but now we need to use the getUserMedia method, which again is prefixed on the WebKit, Moz, and MS, and I'm not sure about Opera. I'm not sure about support.
04:09
But either way, we need to choose the correct one, and we can do this by separating them by all operators. So I'm going to say navigator.getMedia, and I'm going to assign something to this. And this is going to be in its normal form, getUserMedia, and this is essentially what
04:31
we call later to be able to define whether we want video, audio. We have a success callback, an error callback, so you can see if the user denied the video to be played, et cetera. So if that's not available, let's come across here, and I'm going to indent this.
04:46
We want to choose the, say, WebKit prefix version. So it's just the same as that, but WebKit.getUserMedia, or if that's not available, then we use the Moz version, so the Mozilla version, so Moz.getUserMedia, fairly straightforward. And then lastly, we use the MS, which you can guess is Microsoft Internet Explorer,
05:12
getUserMedia, like so, done. OK, so that's done. We can now use this getMedia method in Navigator here to actually start capturing video. So we just say navigator.getMedia.
05:26
Now, this method takes three arguments. The first one is essentially the properties, or what you want this to do. So in this case, it's video, true, and audio, these are just properties that we're adding, false.
05:41
So we don't want audio because we're capturing a photograph from the webcam or the camera, so we don't need it. The second argument is the success callback, and this gives us the actual stream of the webcam, which we can apply to our video element.
05:58
So here we have a function or callback with a stream argument, which we can do something with down here. The third and the final, and this method, getMedia method, won't work without this, we have an error.
06:12
So the argument here gives us an error object, and we have things like error.code. So this essentially means an error occurred, and down here we have error.code, which will give you the error code. This can mean a few things, so look these error codes up and then decide at this point
06:30
what you want to do with that, you know, with your page. And really, you shouldn't be generating these elements before you've got to the point where you want to stream them, but I'm just putting them on the page just for simplicity, and it's not that big of a deal.
06:45
So if we do have a success, what do we do? Well, we need to create our video source attribute. We need to create the object URL from the stream using our URL API in the browser, and then we need to play the video.
07:00
So what we do is we say video source, and we assign this vendor URL, and we use the create object URL method, and we pass in the stream. So the video will now have a source attribute with this stream URL, and then we say play the video, really straightforward.
07:19
So at this point, that's all we need to actually capture video from the webcam. So if we refresh and hit allow, oops, we've got a little error here. Let's take a look. Ah, there we go.
07:29
Create object URL needs to be in capitals. URL, that's a bit tricky. And hit allow, and you'll see your webcam pop up if everything has gone fine. So that's all working now.
07:40
Now what we want to do is basically when we click a button which is going to be underneath this video, we then want to draw that image or video onto a canvas, just that particular frame where the user clicks take photo. And then we'll take the canvas image, and then we'll
07:58
apply that to our little image at the bottom. So it sounds complicated, but it's actually really straightforward. But we need to add a little bit more markup before we do anything else here. So the first thing is going to be the button that the user clicks to take
08:13
a photo. So let's build this up and just style it quickly. So ID will give this capture, just so again, we can easily get that with JavaScript.
08:23
And we're going to give this a class of booth capture button. And that's all. So inside of this, we'll say take photo. So at the moment, that is looking like we just allow again.
08:39
That's looking like that, so just a little link down there. And what we now want to do is style that up. So in here, we're going to say booth capture button. And we're going to set a display of block,
08:52
because this is currently an anchor, which is a display of inline block by default, or inline, sorry. We're going to set a margin on this, so 10 pixel on the top and bottom, 0 on the left and the right.
09:03
We'll also give this some padding, so 10 pixels on the top and bottom, 20 on the left and the right. We'll set a background color. Cornflower blue will do.
09:12
It's quite a nice one. And we'll set the color of the text to white. And we'll align the text centrally, so text align center. Fairly straightforward.
09:24
And then we'll use, sorry, not text transform, text decoration. We'll set to none. So a display of block. Then we have the padding in the margin, which
09:34
is pretty straightforward, a background color, white foreground text. We align the text centrally, and we remove the underline that's usually found with the anchor. So when we allow this again, you will see
09:51
that we have this nice looking blue button here. So we can click Take Photo, and that's going to take a photo of us from this video stream. Cool, so now the rest is pretty easy.
10:02
All we need to do is add a canvas element. So canvas is what we're going to draw our webcam stream frame onto, and then save in that, or add to that image. So the canvas is going to have an ID, obviously, of canvas.
10:15
We'll give this a width of 400 and a height of 300. And we want to hide this element. Now at the moment, it will look like the following. It just looks like an empty sort of space,
10:28
because we've not drawn anything onto the canvas. But we want to go in and hide this. I'm not going to hide it just for now. We're going to do a little bit of JavaScript,
10:37
and then we're going to save it to an image. So under our photo JavaScript file, we're going to set our event handler now on our button. So we're going to say get element by ID,
10:47
and we get our capture button. Remember, that's this capture button here. And we then do add event listener. So much like you do in something like jQuery,
11:01
if you're used to that. But we add a click, and then a function, a callback. So inside of here, then, this is what we're doing when we click that button.
11:11
So all we want to do now is draw the current video stream that we can see in the browser here to our canvas. So we need to actually pick up our canvas first, because we've not done that.
11:25
So up here, I'm going to say canvas equals, and we do exactly the same thing, document.getElement by ID. And we, remember, gave that an ID of canvas.
11:37
But now what we need to do is grab the context from this by using the getContext method. And we usually just store that in a variable called context. You can call it whatever you want.
11:46
So we use canvas that we've already grabbed. We use the getContext method. And then in here, we provide 2D. So now what we have is the ability
11:57
to paint anything we want onto this canvas. So after that capture button is clicked, we know that we want to capture the video at that point where the button was clicked.
12:07
So we say context, which we just added as a variable up there, drawImage method. Now, this is going to take what you want to draw on. In this case, we just pass in the video as it is.
12:18
It's easy as that. We enter the x and y offset, and then the size and height and width. So this will just fill up the entire canvas.
12:28
So now, hopefully, if everything has gone right, when we allow our webcam and I click Take Photo, you can now see that even I'm moving around up here, that has been drawn as a still.
12:42
So this is OK. But at this point, I can save the image. But we want this to actually be an image element rather than a canvas element.
12:52
So we know that the canvas is working now. So under here, we'll just use a ID selector. You might want to give this a class or something. And we'll say display none.
13:01
And what we're going to do down here to make things easier is we're going to create an image element this picture is going to be placed into so the user can drag it off somewhere, or right click and save as image,
13:13
or link to it, or something like that. So what we want to do is inside of our image source, we're just going to add a placeholder. So over on something like PlaceKit,
13:25
and just grab this URL. And you basically want to paste that in and choose your dimensions. So there are plenty of sites like this.
13:35
I just prefer this one. So I'm just going to say photo of you or something like that in the alt. You don't necessarily need to add anything in here.
13:43
OK, so now that we've done that, we need to give this an ID, just so we can target it again easily with JavaScript. And we will call this photo. So inside of here then, let's grab that photo.
13:59
So photo equals document.getElementByID photo. So we can now access the source attribute and replace that in. And without styles newly in place, you'll see that we have no canvas.
14:15
We have the webcam as before. We have the Take Photo button. When we click Take Photo, that's drawn that still of me to the canvas.
14:27
But instead, we've got this kitten here. We need to replace that. So under photo.js, one additional line we'll do here. We don't really need to do anything fancy.
14:37
All we're going to do is say photo, which remember, we just stored up here. And we're going to set an attribute on here. The attribute that we're setting is src, source.
14:47
And we're going to use the toDataUrl method on the canvas element. And we're going to pass in the image type, so image slash png. So now what's happening is when we click this,
15:00
not only are we drawing to the canvas, we're then grabbing from the canvas the data URL as a png. And we're placing it into the source attribute of that photo. So now all that's going to happen
15:13
is let's just refresh again and allow. You see me at the webcam at the top here. We scroll down, hit Take Photo. And we have a little error.
15:21
Let's have a look. And let's pinpoint where that is. OK, so again, this needs to be capital R, capital L. So let's fix that up.
15:33
And one more time, we'll try Allow. So there I am at the top. Take Photo. And there we go.
15:40
The still of me has been applied. Cool. So that is a really, really straightforward way to grab a video from a webcam or an image device,
15:53
plunk it onto an image attribute here. You can now copy the image. You can copy the image URL, save the image as, do whatever you want.
16:00
And that's it. It's really, really straightforward using not a lot of code at all. What you can also do is then go on to change things
16:09
about this canvas. So for example, say you wanted to manipulate this image somehow, maybe make it blurry or make it black and white. You could then, in between this point of drawing to the canvas
16:21
and grabbing down here, you would go ahead and manipulate the canvas. I'm not going to go through this in this video, but you can have a look online.
16:30
There's plenty of ways you can manipulate the pixels on the canvas to do what you want with them. And then all you're then doing is storing it inside of that image attribute that you can then go ahead
16:41
and do whatever you want with. So that's a really, really quick and easy way to grab a video stream, apply it to an image, and you can go ahead and add to this if you want.

Episode summary

In this episode, we walk through how you can use your webcam right in the browser to take a photo—no fancy plugins or external libraries needed! We start off by setting up the HTML and CSS, creating a neat little photo booth interface. Then, we dive into the JavaScript where we grab access to the webcam using getUserMedia, and display the live video stream on the page.

Once the video is in place, we add a shiny "Take Photo" button beneath it. When you click this button, we write a bit of code to capture the current frame from the video and paint it onto a hidden canvas element. The magic happens when we convert this canvas image to a PNG and swap out a placeholder image below with your fresh webcam pic.

By the end, you'll have a simple, working photo booth app: you can snap a live selfie from your webcam, see it on the page, and even right-click and download the image. As a bonus, we hint at how you could add effects, like grayscale or blur, before saving the photo—making this a sweet jumping-off point for your own creative projects!

Episode discussion

No comments, yet. Be the first!