Vite Selfie Cam Project

[00:00:00]
>> Okay, so what we're gonna try to do now is not a quick win with our little just simple old index.htmls, but rather not a quick win, but a Vitr win, [LAUGH] a little French pun for you there. [LAUGH] That's not how French works. But anyway, of making this starter app that the lovely create Vite package booted up for us to help us understand the structure of a Vite project.

[00:00:29]
We're gonna take this and morph it into a little selfie cam that uses some browsery goodness in order to take a photo, [LAUGH] which is just the very scratching the surface of what this stuff can do in the browser, but let's talk about some more of these browser APIs.

[00:00:55]
Because for some reason, memes always involve different spellings, so developers slides always have to involve [LAUGH] different spellings. Okay, so there is on our handy-dandy navigator object, and again in browser land, not in Node, in the browser that we are running this client side app in. There is a navigator, and that has a mediaDevices, and that has a method called getUserMedia.

[00:01:21]
And can you read all about the details and all of the other stuff that you can do with this on MDN? Why, you betcha, you sure can. So we're just gonna talk about this getUserMedia, which we call this and we pass in a kind of little options object where we can say at what kinds of media we are trying to get from the user's computer.

[00:01:46]
And so we could be trying to get their microphone, their audio media, we could be trying to get their camera, their video media. And this is where there's websites that they're like, do you wanna give permission to your camera off to this thing. There's other APIs for things like location and whatever other stuff we might need, so this is just, again, scratching the surface.

[00:02:13]
So this is an async operation, because it might take a minute for, first of all, the user to approve that it wants to allow this random website access to its system. But also, it takes a minute to do all the things, to talk to the camera and set it all up.

[00:02:30]
So that's why there's an async function and we need to await it. And then what we can do, what we get back here is a stream. Again, we can go to our best friend forever and be like, getUserMedia. How does that work? And look at all the details of what is it blah, blah, blah, produces a media stream with all this stuff and it returns a promise.

[00:02:56]
So it's asynchronous, so we can go and check if we want to, what is the API of this thing? Again, it's just a convention that the browser exposes. But for now, you can just trust me that it returns a stream, and that then what we can do is if we have a video element, an HTML video element, we can assign that stream to be the source object of this video element.

[00:03:26]
And then we can do stuff like play the video, or pause the video, or whatever else someone might want to do. And so in this case, because we asked for audio, this will be a video with audio. We might also, for a selfie cam, for example, just to need the video part of the stream.

[00:03:44]
And is there a whole bunch more one could say about these streams and this data and how it's being all passed around? Of course, there is. But for now, we just wanna do some fun stuff of messing with the browser. And so this is one way that we can grab the video media or audio media from our users.

[00:04:07]
And just a quick note is that this is like the modern way to do this, but some older browsers don't support this. So you sometimes see try catch or whatever around it, but you know what, we are living in the modern world here in our quick little Vite project that's running in our modern browser, so we're not gonna worry about it.

[00:04:26]
Okay, so we're gonna pull all this in a second, but the other thing that becomes useful here is when we mix this video situation with another super, super useful and super powerful and super massive API of canvases, the canvas [LAUGH] API. So canvas, it's another element in our angled tags that we might have in our HTML.

[00:04:57]
And the canvas API is one of these entire sections of [LAUGH] the browser APIs that allows us to do, whoa, okay, yes, this is an element, and blah, blah, blah. And I was actually trying to get the API, but I pressed Enter, too. So okay, the canvas API, which again, is part of our massive reference of all these web API's, tells us all about different stuff that we can do with it.

[00:05:25]
Basically, it all hinges upon we have a canvas element. And then we get what's called a rendering context that's provided by that element. And the way this works is that we call a method on the HTML canvas element object called getContext and we pass in. There's also a 3D option, perhaps, there's all kinds of stuff you can do with this, but we want a 2D context in this case.

[00:05:53]
We're gonna get that context and then we can use the context object, which is just this whole long thing I can go read about. This exposes a whole bunch of properties in a highly imperative paradigm that allow us to mess with this canvas object in our user's browser.

[00:06:18]
So that can be used, there's entire art and creative coding libraries. If you've heard of P5.js, for example, or there's whole kinds of things that are built on top of this API. Right now, we're just gonna do a couple tricks. And so, okay, so one of the tricks that we can do, once we have this context is we can change the style of, it's almost pick the paint color in your MSPaint or whatever, [LAUGH] and set the fill style property to, let's say, the color yellow.

[00:06:56]
And then we can fill a rectangle by calling .fillRect. And that is we're gonna pass in a bunch of numbers to it that the canvas is gonna know how to turn into an actual yellow rectangle on your screen.