Count number of faces using javascript

问题

Is there a way that I can count the number of faces in a live camera.

For example I've three persons in front of a webcam and I'm having 2 pages say, Success.html and error .html and as part of the underlying way to judge the redirection to Success or error pages the condition would be, if only one face is detected, it should be sent to success, else, it should be sent to error .

I'm using tracking.js to detect the face in my web page and currently my code is as below.

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>tracking.js - face with camera</title>
<link rel="stylesheet" href="assets/demo.css">

<script src="js/tracking-min.js"></script>
<script src="js/data/face-min.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="assets/stats.min.js"></script>

<style>
video, canvas {
    margin-left: 230px;
    margin-top: 120px;
    position: absolute;
}
</style>
</head>

<body>
    <div class="demo-title">
        <p>
            <a href="http://trackingjs.com" target="_parent">tracking.js</a> －
            get user's webcam and detect faces
        </p>
    </div>

    <div class="demo-frame">
        <div class="demo-container">
            <video id="video" width="320" height="240" preload autoplay loop
                muted></video>
            <canvas id="canvas" width="320" height="240"></canvas>
        </div>
    </div>

    <script>
        window.onload = function() {
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');

            var tracker = new tracking.ObjectTracker('face');
            tracker.setInitialScale(4);
            tracker.setStepSize(2);
            tracker.setEdgesDensity(0.1);

            tracking.track('#video', tracker, {
                camera : true
            });

            tracker.on('track', function(event) {
                context.clearRect(0, 0, canvas.width, canvas.height);

                event.data
                        .forEach(function(rect) {

                    console.log('face detected');
                });
            });

    </script>

</body>

</html>

Here in my console I'm able to print, face detected.

please let me know how can I detect multiples faces in this window.

Thanks

回答1:

From the documentation:

myTracker.on('track', function(event) {
  if (event.data.length === 0) {
    // No targets were detected in this frame.
  } else {
    event.data.forEach(function(data) {
      // Plots the detected targets here.
    });
  }
});

It seems to be event.data.length that gives you the number of tracked elements.

回答2:

Fom the docs at https://trackingjs.com/docs.html#trackers

myTracker.on('track', function(event) {
  if (event.data.length === 0) {
    // No targets were detected in this frame.
  } else {
    event.data.forEach(function(data) {
      // Plots the detected targets here.
    });
  }
});

Use event.data.length to count the amount of faces.

On your piece of code :

tracker.on('track', function(event) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    // console log amount of elements found
    console.log(event.data.length);
    event.data.forEach(function(rect) {
        console.log('face detected');
    });
});

来源：https://stackoverflow.com/questions/44669982/count-number-of-faces-using-javascript

标签

javascript

html

tracking.js