Using the Video Element

[00:00:00]
>> So we're gonna take in a video, we're gonna take into Canvas. All right, we're not done, but let us okay yes, and it's bouncing because we have the permission still going but let's go back to main and sort of symmetrical to how we got the video element which was created by our get video.

[00:00:15]
In this case, we can decide how we want, which Canvas we want to pull from the page in. In this case, we only have one, but who knows? You could go wild and just have a whole bunch of can buy. [LAUGH] And so what we can do then there is we can import our new thing that we call drawVideo, okay, great.

[00:00:39]
[LAUGH] We can import java drawVideo along with our getVideo by putting a comma between these here and this is the exact same destructuring syntax that we can use within an assignment or within a function declaration for the parameters. So same syntax there, we can import multiple things at once from the same module.

[00:01:06]
Okay, so now we can do something like, drawVideo, video, and helpfully, VS Code is even telling me what the signature is of my drawVideo method. And so those colon any, colon any, that's some typeScript stuff that is probably an artifact of having written some other TypeScript code in this and had set up some TypeScript tooling.

[00:01:31]
But in any case, another reason why TypeScript has gotten so popular is because it works really nicely with these developer tools where it can give us all of this. Like kind of static in this information that it gets from just reading our code base and looking at all the declarations and everything, which then VS code can take advantage of to give us helpful hints as we type.

[00:01:50]
Okay, but for now, we just it just reminds us that yes, we do the video first, and then the canvas. Cool, fabulous, wonderful, all right. And nothing happened because we didn't really do anything [LAUGH] let's fix it, okay, we have a video element that we're not using, we have a Canvas that we're get using to get the context.

[00:02:12]
And we're not using that either so now we have to put them together and does anyone remember her without me switching to this slide. Slides, what I need to do to draw this video to this canvas context. So it starts, let's see if VS Code can help us, shall we?

[00:02:33]
So it starts with basically all of the stuff we're gonna do to the canvas is the rendering context is what's gonna help us do that. So we'll start start typing context. Thanks, VS Code, yes. So what we're looking for, and we can go back to our reference here, or our.

[00:02:53]
Handy dandy MDN reference, is to call context.drawImage, and then the video, and then the origin point. Point of where we want to start drawing that video. And we could add a whole bunch of other arguments to specify the sizes, but let's just try the basic. So copy, okay, fab, let's see what happens.

[00:03:21]
Okay, well, we have something happening, but it's probably not what we intended to happen, right? So interesting, what's going on here? We drew something. We drew nothing. But, before it was just blank. Now we have a rectangle. So that's winning. [LAUGH] So we are drawing. This is all valid.

[00:03:49]
We're drawing a video to the screen, but let's poke around here. So we've been debugging. We've been poking around at things. We've been trying to look at different events and I'm a little puzzled, but here's one thing that we can do. And again, does the web always make sense to do it to any of us even if we've been doing it professionally for years, like, no, no, all of the things, no, of course, and I am certainly last at least of all.

[00:04:17]
However, there's also something that we could do which is essentially, wait for our user to actually interact with the page, and click on the button. And so what we could do is, essentially, instead of drawing the video on an event that's just attached to the video, what we actually want the user to be able to do is control when the picture gets taken, right, ideally.

[00:04:49]
So, let's start working on our button click handler and see if we can find a workaround for this event situation that we're not making progress on. How's that sound?
>> Great.
>> Fabulous, okay, so we have a button. Its id is counter, I mean we could change that like maybe to camera because now that was a historical accident also.

[00:05:16]
So now, I probably wanna get the button. We've done this a billion times, so button. Document, get element by ID camera. I could have given it a different name cuz it's a button, it's not a camera, but like, I don't know, launch camera, whatever you can id away how you feel appropriate.

[00:05:38]
And so now, instead of doing this draw video in an event. When an event from the video fires, we wanna wait for an event from the user interaction to fire, which is actually more the behavior we want this page to have. We were just trying to see if we could draw something.

[00:05:52]
But really what we want to do is not just be willy-nilly drawing frames to the canvas, we wanna be able to let the user take a selfie cuz that's what the button says it does. So [LAUGH] let's try to do that. So we can do button at our handy dandy event listener, click, and then do some stuff and we can try to handle this in here, let us see if that works.

[00:06:26]
I honestly, I'm not confident. And the other thing is, what we could also do is since this video, it's not like a YouTube video or like some kind of file that we want the user to only play when they're ready to start watching it. It's like a live feed, right?

[00:06:41]
So we can actually like start playing it basically whenever because we're not now trying to make sure that there's a handler before we fire the events and blah, blah. So we could do this earlier in the file, we could even probably put it back where it was before in the get video function.

[00:07:01]
And by the way, I was messing around. So this is again, this is just like there's an older version of this API where you have to like do a little more work and use the get an object URL and blah blah blah. So this is like one pattern that you might see a lot is like try something that is how modern browsers will do it and if that doesn't work and ideally you're.

[00:07:23]
Doing a little more checking that this isn't like some other error, [LAUGH] then use the fallback of the older way to do it. So just a sidebar on like, we're still living in a world maybe we don't all have to support IE for anymore, but we're still all living in a world where we do have a whole bunch of different user agents.

[00:07:44]
And different devices, and different, you know, all this stuff. So, we have a lot of try-catching in our lives. And so, since this is a live feed, and it can be running the whole time, we can just start playing it. Let's do that. And let's save this, and let's see if we've made any progress.

[00:08:04]
Am I getting any errors? No, okay, what's gonna happen? Drumroll, please, honestly confused. Hey, [LAUGH] we got a ceiling, [LAUGH].