Streaming a video and taking a snapshot
JavaScriptTranscript
English (Auto-generated)
Hi everyone in this code cast we'll have some more fun. So we will stream a video from the webcam and then take a snapshot which will be drawn onto a canvas element. So something like this. There you go now. And you can uh you know after you do this. A fun idea is that from the code that you wrote in the previous code cast you could add options to add filters to this snapshot. So essentially just building on top of the previous project and you could even add more features of your own. For example allowing a user to download this snapshot as an image onto their computers. Now, first things first let's let's set up the html. So in our html here you see that we're using the bootstrap library library. Sorry. And I have two containers set up and each of these containers has an I. D. So this is called pick container. This should actually not be called H and then have an idea of canvas container but we don't really need to use this I. D. But anyways, each of these containers also has a role and a column small 12 deV. Now we will add the video element in the first container and a canvas element in the second container. So let's go ahead and do that. And out here in the first container I'm going to add the video element with a attributes of auto play. So auto play attributes. A default value is the boolean. True. So it will automatically play once we allow the browser to start the webcam stream and then down below here we are also going to put in a button with a class which is equal to button button success. And you know, buttons success allows us to have this nice green colored bootstrap button and I'm just going to simply say click and then close the button element. And since we only have one button element on our webpage we don't actually need to put an on click attribute here or even an I. D. And in the second container down here I'm going to put in my canvas element with an I. D. Of my canvas once again. Okay and then let's also close this off and there you go. So control s to save and and right now nothing much it should be happening. So if I refresh my page and nothing's going on. Right? So let's go ahead and work on that. And for that we have to go to a script dot Js and we're going to go ahead and now work on adding some javascript. Now in script dot Js let's actually grab a reference to the video and canvas elements by declaring to global variables. So start off with lead, video is equal to and since I only have one video element I can just use query selector to select my element which is a video and then for my canvas I also have one canvas only. So I could use query selector but since I just give it an idea, I'm just gonna say get element by ID D. And out here the I. D. Was my canvas. So there you go. So I've gotten to global variables which reference the video element and the canvas element in my html document. And now let's work on a small code snippet which actually allows us to stream the video from our webcam. And I'm gonna go ahead and type it out and then I'll also explain it. So navigator media devices and I'm actually using the media stream ap I gotta get user media method and this is going to have a constraint which is video so we can use a video or or an audio but we're just going to be using video here. And then I'm going to use a promise and a function which takes a stream as e argument and then we'll work on this. But let me just first off structure my code and then in case there's an error, we want to catch our error. Right? We're using promises here and I'm going to catch my era and then basically we'll do something. So let me go ahead and explain this a bit. Now we're using the media stream Api which provides support for streaming audio and video data and we have this get user media method out here which allows us to access input devices such as let's say input from a webcam or a mike in our case it's a webcam and we check if the user media is a video stream, right? So we're going to check if the user media is a video stream and we do this what via this object which is passed to the get user media method. And this is called a constraint. Now this is an object which has two members, like I said video and audio which describes the media type which is requested. Now either or both must be requested if the browser can't find the specified constraint, which in our case is video, then this promise is going to be rejected and we're going to catch our error right now, if there is a video constraint, then the media devices dot get user media method is going to prompt the user for permission to use the video input. So automatically the webcam doesn't start streaming. We actually need to allow it and we're going to use a promise that resolves to immediate stream object if you if it is if this is successful. So out here, I'm going to say um video. So video refers to this global variable which references the video element in our html document. So video source object is equal to stream. Now a videos media stream object is available through its source object attribute. And remember that we referenced our video appear with this global variable, which is called video and we're setting the video elements source object attribute to have a have a value of the video being streamed in through the webcam. And then if there's an error of some kind, we're going to catch that error and then we will just write whatever message that will write the error message on the document on the web page. So let me go ahead and control. S and now let's check this out in the browser and there you go. So we see that we are getting prompted for permission to either allow or block the webcam stream. So I'll say allow and there you go. I have my webcam stream. So if I go back to our editor, I'm wondering why I'm not seeing the button here. So maybe I didn't save this. So let me go ahead and save my html document and then once again go back here, allow. Okay, so let's see what is going on here. Mm hmm. Button class is equal to button video. I'm wondering if maybe there's a silly mistake somewhere here. So let's check that out. We have our containers set up and maybe I am just one drink. I think this is the possible era that we did not close the video tag, which is why the button won't show. And now let's go ahead and check this out. So control. Right And now we can see our video stream and our button. Okay, great. So that is what that is all for that part. Now in a script dot Js we see we saw the button element and our video being streamed but the button doesn't actually do anything. So right now if I go to my page and I click on this button it doesn't do anything. So we have to work on some code which will allow us to allow us to take a snapshot off the webcam stream when we click on the button. Now let's grab a reference to the button element on our web page and I'm just gonna do this up here with all the other global variables. So I'm gonna say let button is equal to and this button I believe does not have an I. D. Right? It has a class but no I. D. So I'm just going to say document. God let's say very selector and then it is a important element. So control s to save. Now we're going to use the add event listener method to listen out for a click function. Sorry, a click event on the button and we'll execute a callback function in response to the click event. So Britain God add event, listener. And this is going to listen out for a click event and in response to a click event it will execute a call back function. And what this callback function will do is first off it's going to set the width of the canvas to be the width of the video. So canvas dot read is equal to video dot video with and then let's do the same thing for the height with canvas. God height. Oops is equal to video dot video height. So we're essentially setting the width and the height of the canvas to be the same width and hide as the video. And then let's draw the video onto the canvas at the instance that the button is clicked with canvas. And we've done this before with canvas dot get context and we're going to get a two D. Context and once we get the two D context, I want to use the draw image method and I'm going to draw onto the canvas, the video and it is going to start at the upper left corner and then we want it to have the same rick and height As we set up here on line 13 and 14 as the video. Right? So let me go ahead and now control s to save and then let's try this out. Control r to refresh. And as you can see again we're being prompted to either allow or block the webcam stream. So I'm going to allow. And now when I click on this button here, there you go. So we have, I can take multiple screenshots off myself. And that is how we are going to um take a snapshot which is drawn from the webcam stream onto the canvas. And this is that line that does that. And if you remember from the previous code cast that we actually assigned this uh get context to D. To a variable. And we could have done that here, but we just changed. So we got a two D context and then drew onto the canvas, the particular video frame, which is going to be drawn when the button is clicked. So at the instance that the button is clicked and that's all for this code cast In the next podcast, we'll do another mini project.