Name: Build Real Time Face Detection With JavaScript
Uploaded: 2020-03-28T16:46:01.000Z
Duration: 12 min 42 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Transition words & phrases

Future continuous

I'm going to be using artificial intelligence and face recognition to determine my emotions through my Web cam in real time.

Also, if you enjoy this video, make sure to let me know down below so that I can create a part two to this video where I use face recognition in order to determine who is in a picture and display their name next to their face.

In order accomplished this face recognition.

We're going to be using a library cold face a ph dot Js You can see over here on the right, and this is a wrapper around.

Tensorflow, which is one of the most popular machine learning libraries out there, is going to allow us to do real time face detection in the browser, and it's really easy to get set up with.

The first thing that you need to do is download this library.

There's going to be a link in the description below where you can download this library from Also, you're gonna need to download the models that you'll be using for your face detection when we get to the model section.

I'm going to list off all the models that we use so that you can download them.

Also, all of the models are going to be available on my get up in the source code for this video so you can get them there as well to get started.

I just want to create a blank html page here and inside of this we want to put a video element because this is going to be where we render our webcam where we do our real time face detection.

And this is just going to have an idea of video so we can easily access it in the Java script.

Here, you can use whatever width and height that you want, but in our case, I'm going to use 720.

I'm gonna use the height of 560 you want to make sure you just set this to be autoplay and muted because we don't actually want any sound.

And you have to make sure you specify a width and a height on here.

Otherwise, the face detection will not be able to draw properly onto your web cam.

Now, once we have that done, I'm just going to add a little bit of basic styling to our shoot so we can come in here and out of style tag.

And really, all I'm going to do is just style the body of this.

So I'm going to give it no margin, make that zero same thing with padding here, we're gonna do zero.

And essentially, the reason I'm doing this styling is just to get the webcam was centered in the screen.

So I'm gonna set the with 2 100 view withs.

The height is going to be 100 view heights, and I'm going to change this to be displayed Flex just to find the content in the center and aligning the items items in the center.

And this is just going to put the webcam in the very center of the screen so we could just open this up with life's over just to see what we have working with.

It's loading up, and obviously nothing's going to render for our video because we haven't actually hooked up our webcam into our video yet.

So Let's go into our script here and work on doing that.

First, we need to get that video minutes.

We're going to create a helmet here called Video and we can say document.

And we gave it an idea video, and this is going to be our video take.

Then we can create a function called Start Video.

We're going to use this to hook up our Web cam, tow our video moment.

So in order to get the Web cam we need to use navigator dot get user media, and this is going to take an object as the first parameter.

Were you gonna say video is the key and an empty object as the perimeter.

Then we're going to have a method here, which is going to be streamed.

This is essentially what's coming from our Web cam.

We want to set as the source of our video so we'll save video source object.

There's going to be equal to that stream, and then lastly, we have an error function that we can call here.

So if we do get in air, we just want a large best will say consul dot log.

There goes air just like that and let's make sure it's an era log instead of a normal walk.

And now, if we call that function, we could just say Start video and go into HTML.

Make sure he said it to defer, and we want the source of that to be our script dot Js.

You should see that it's going to access our video.

It'll load up right here, and this is just a live preview of my Webcam and may be slightly delayed, but that's just because it's going through the browser as opposed to going directly into my recording software.

So now once we have that done what's also include our face a p I library, while we're at it so we could do a script here.

We wanted to for this one as well, and we want this face a P I, and we want to make sure that this is defined above our normal script so that it gets loaded before we actually run our script.

And now we can work on actually setting up our script in order to detect my face as opposed to just render my video.

In order to do that, we need to load all of the different models.

So we want to use promise dot all which is going to run all of these a sinking his calls in parallel, which will make it much quicker to execute.

And then here we just pass an array of all of our promises, and what you do is you wanna call face A P i dot nets.

And then this is going to be where you call all the different models you want.

In our case, we're using the tiny face detector.

This is just like any normal face detector, but it's going to be smaller and quicker, so it'll run in real time in the browser as opposed to being very slow.

And we want to say load from It's a nice fellow properly load from you or I, and in here we have a Model's folder with all of our different models.

So we're going to just pass that and we'll just say slash models.

We wanted to do this a couple of times for all of our different models.

Let's copy that down four times and we have our tiny face detector.

The next one that we have is going to be our face landmark flips Landmark 68 net, and this is going to be able to register.

The different parts of my face is post my mouth, my eyes, my nose, et cetera.

Next thing that we're going to have here's face recognition, I can smell that wreck cognition net.

And this is just going to be able to allow the A p I to recognize where my face is, the box around it.

And then, lastly, we're going to have his face, expression, net and whips expression just like that.

And what this is going to allow you to do is to recognize when I was smiling, frowning, happy sat etcetera.

And after we're done with this, we want to call our start video so we can move this here and now.

Once we're done loading all of our models, it's going to start the video over here on the side.

And it may take a little bit longer because loading these models does take a little bit of time.

Then we can actually set up an event listener.

So we can say video dot at event listener we're gonna do is we want to add event listener for when the video starts playing.

So then when the video starts playing, we're gonna have our code down here which we can say to recognize your face.

For now, let's just do a simple council dot log.

I was just like, whatever come over here and inspect that and assume is the video starts.

You see, we get that log down here at the bottom, which means we know that everything's working so far.

Now we can work on actually setting up the face detection, and this is actually incredibly straightforward to Dio We want to do is we want to do a set interval so that we can run the code inside of this multiple times in a row.

We want to make sure it's in a sinking dysfunction because this is going to be an asynchronous library, and all we need to do inside of here is get our detection.

So we're going to just say detection is going to be equal to awaiting our face FBI or just a face a p i dot detect all faces.

And this is going to get all the faces inside of the Webcam image every single time that this gets called.

And we're going to do this, for example, every 100 milliseconds and what we want to do instead of here is we want to pass the element, which in our case, is a video element as well as what type of library we're going to use to detect the faces.

In our case, we're using the tiny face CPs well, safe a c p i.

That tiny face of space detector options, and this is just going to be empty because we don't want to pass any custom options because the default is going to work perfectly fine for our scenario.

Then we also say what we want to detect these faces with someone is going to say with face landmarks, and this is going to be for when we actually draw the face on the screen.

We're going to be all that see these difference at sections.

So the face landmarks is going to be the different dots that you see on my face, and then they can say dot with face expressions and this is going to be able to determine whether I'm happy, sad, angry, upset whatever based on just the image that it gets of my face.

So we must make sure I spell that properly.

We could just log out these detection, so we're going to say console, not long detections just so we can see that if this is working and we could go inspect over here and you can see that we're getting air immediately and it's saying tiny face detector options is not a constructor, and that's super easy to fix.

Subtitles ListPlay Video

Build Real Time Face Detection With JavaScript

context

recognize

properly

expression