37

I would like to know if someone know how to recognize a face using just JavaScript. I've heard of OpenCV and relatives but I want to process the face recognition at the client side (web app).

Any ideas?

Felix
  • 3,058
  • 6
  • 43
  • 53
  • I really doubt there would be one entirely client-side (not performant enough) -- your best bet would probably be to write an interface to OpenCV running server-side and call it from your JS. –  Sep 03 '11 at 03:56
  • 2
    Since this is closed as off-topic could we migrate it to https://softwarerecs.stackexchange.com ? – hippietrail Jun 08 '16 at 03:43
  • 1
    @hippietrail I wish we could do that, but [the moderators won't allow it](http://meta.stackoverflow.com/a/322845/975097). – Anderson Green Nov 05 '16 at 05:50
  • if someone know webcam face recognition using JavaScript or Node js. I tried face api, opencv,etc but not it's working properly. And it's accuracy is very low. And face must recognition without cloud. Any library for that? – Jinesh Jul 04 '19 at 09:26
  • This may help you https://github.com/WebDevSimplified/Face-Detection-JavaScript – Deepak Oct 21 '21 at 07:05

5 Answers5

40

Currently there is no pure JavaScript library performing face recognition. Real time face detection however is possible using one of the following libraries:

  • For face and face element detection as well as object detection in general, you could use js-objectdetect or tracking.js which include ports of the OpenCV object detector based on Haar-like features. Also consult this performance comparison chart for ten popular JavaScript face detection libraries.

    Face detection demo

  • The very first face detection algorithm on the web found in ccv also deserves a mention. Its SURF classifier is fast but not very reliable.

  • The headtrackr library used for face tracking might also be of interest since it implements the camshift algorithm found in OpenCV. Also have a look at clmtrackr of the same author.

le_m
  • 19,302
  • 9
  • 64
  • 74
  • That's a really nice answer, it should be the correct one! <3 Thanks @le_m – qgicup Mar 03 '15 at 18:54
  • There is a tool nowadays. https://itnext.io/realtime-javascript-face-tracking-and-face-recognition-using-face-api-js-mtcnn-face-detector-d924dd8b5740 – Movahhedi Jun 30 '22 at 06:55
17

If you are looking to recognize where a face is in an image, as opposed to matching faces across multiple images, there is actually a library that does this in conjunction with HTML canvass.

There is a demo on the developers site here. You can also download the source on github.

In my test's the performance was decent - but not blazing.

nikmd23
  • 9,095
  • 4
  • 42
  • 57
6

If you are after advanced features like Facial Recognition (Not detection only, as in it can recognize whose face it is, Eye position, gender, age, mood etc) then try this library.

Updated: https://www.kairos.com/face-recognition-api

Hasanavi
  • 8,455
  • 2
  • 29
  • 35
5

Javascript library for precise tracking of facial features via Constrained Local Models

https://github.com/auduno/clmtrackr

Reed Jones
  • 1,367
  • 15
  • 26
4

Hey you can use this Face Recognition API + photobooth.js sample that I just posted - http://mashape.tumblr.com/post/45712257463/face-recognition-using-javascript-and-mashape

The response from the API gives you face element coordinates, smile detection, and face recognition based on a library of pictures you have uploaded:

{
“status”: “success”,
“images”: [
    “http://lambdal.com/tiger.jpg”
],
“photos”: [
    {
        “url”: “http://lambdal.com/tiger.jpg”,
        “width”: 600,
        “tags”: [
            {
                “eye_left”: {
                    “y”: 116,
                    “x”: 357
                },
                “confidence”: 0.978945010372561,
                “center”: {
                    “y”: 130,
                    “x”: 339
                },
                “mouth_right”: {
                    “y”: 178,
                    “x”: 366
                },
                “mouth_left”: {
                    “y”: 178,
                    “x”: 310
                },
                “height”: 140,
                “width”: 140,
                “mouth_center”: {
                    “y”: 178,
                    “x”: 338
                },
                “nose”: {
                    “y”: 147,
                    “x”: 336
                },
                “eye_right”: {
                    “y”: 115,
                    “x”: 314
                },
                “tid”: “31337”,
                “attributes”: [
                    {
                        “smile_rating”: 0.7,
                        “smiling”: true,
                        “confidence”: 0.7
                    },
                    {
                        “gender”: “male”,
                        “confidence”: 0.5982579729635792
                    }
                ],
                “uids”: [
                    {
                        “confidence”: 0.742,
                        “prediction”: “chris1”,
                        “uid”: “chris1@apitraveler”
                    },
                    {
                        “confidence”: 0.161,
                        “prediction”: “hazel”,
                        “uid”: “hazel@apitraveler”
                    },
                    {
                        “confidence”: 0.065,
                        “prediction”: “dylan”,
                        “uid”: “dylan@apitraveler”
                    }
                ]
            }
        ],
        “height”: 585
    }
]

}

Chris Ismael
  • 612
  • 5
  • 13
  • 14