drawVideo Method

[00:00:00]
>> All right, so now, we've gotten a getVideo function, but we haven't gotten a video. So now, we should be able to do what we did in the other module first, const video equals await getVideo, I'm gonna to save. I'm gonna go back over here, and we'll notice if your browser's sort of remembering that you already gave this permission.

[00:00:23]
You'll see in Firefox, there's a little, hey, this has permission to use your camera. And maybe you see a little light on your webcam or something like that. If you hadn't, then you would probably see something again like this, so we allow it, okay, cool. And again, nothing happened, so let us fix that, shall we?

[00:00:42]
We want that draw image method, which is available on the canvas context. Now, again, this is not choose our own adventure of how we wanna organize this. But we have various options and we already wrote some pretty useful code in here. It's not all useful, we're not gonna wanna do any of this.

[00:01:06]
But what we could do, well, we have pretty small modules here, so we could bring this into main. We could decide, how many different modules do we really want to have for this project. Do we want them to be, exporting their own utility functions or do we just want to be doing this imperatively in one script.

[00:01:23]
So that perhaps other developers that are trying to contribute to this amazing selfie project. Are able to more easily see at a glance everything that's happening. So I think it would be reasonable to start moving some of this into camera if we wanted to. And perhaps maybe make a draw photo or a paint or whatever method we wanna call it, a function we wanna call it.

[00:01:49]
So I'm just gonna go ahead and empty out my canvas.js and we can just, you know what, we'll delete it. And while we're at it, why don't we also delete the counter that we're that we're not using anymore. Yes, I am sure, delete, love deleting code because you can't have a bug in your code if you don't have any code, right.

[00:02:10]
[LAUGH] So imagine that meme here, okay, we don't need this secret value. We do need to do some stuff with a canvas. Now, how we wanna set this up is, again up to us. Now, do we wanna be grabbing this canvas element from within a function, do we wanna be doing it in the main module.

[00:02:33]
Again, it's like, there's reasons for everything. How does it sound to y'all if we don't assume that we know which Canvas element we're supposed to draw to. And we don't assume that there's just one Canvas element with this query selector, or basically using just the tag name Canvas.

[00:02:52]
What if we, in this module where we are providing generally useful camera related functionality. We let our user decide what canvas they want to draw stuff on, for example, sound okay, cool. So, what I'm going to do now is wrap this little guy. Okay, we're going to export it again in a function, which we can figure out the name for later.

[00:03:20]
[LAUGH] Where it's going to take in a canvas element, and then it can find the context on that canvas, how's that sound? Okay, how about we call this draw video on Canvas, what sounds good? Anybody gonna help me out with a naming opinion?
>> Draw a video.
>> Draw a video.

[00:03:52]
It's very symmetrical to our get video and that's helpful because, for example, if you have a whole bunch of functions in your module. And some of them take, they're all related to video then some of them, some of them say. Video interaction interface, whatever, and others say, yeah, do the thing, we want to have consistency, right.

[00:04:22]
So every code base might be different, but ideally, at least within our own code base, we can be as consistent as possible. So that seems reasonable. The other thing we want to try to be consistent with is, for example, if we have multiple unctions. And so here we're probably gonna need like a video to draw, ultimately.

[00:04:43]
But if we have multiple functions that are taking in video elements and canvas elements. Let's not switch the order of the parameters around on our users and stuff. Let's just keep things as consistent as possible, keeping in mind that what we're doing here in this module. Whether it is for our own internal use or somebody else's use, some other stranger aka a friend and developer buddy.

[00:05:05]
That we haven't met yet on the internet to use, we are exposing a way of interacting with this. And we want to try to help our users have as few headaches as possible. Okay, cool.