Front-end face detection

preface

Recently, I was in charge of a project that needed to do a front-end face detection. I asked the boss and told me that face detection generally requires a lot of resource packages. These resource packages are generally a few meters to start, so it is not realistic to put them in the front end. But for me with strong curiosity, there are only two ideas that can be realized or not realized. Let’s get down to business.

Find available JS libraries

After some searching, I found two libraries to implement, tracking.js and face-api.js (there may be others I haven’t found yet). Github address: tracking.js, face-api.js

Effect of contrast

face-api.js: tracking.js:As you can see, both are possible, but tracking.js is a little less satisfying than face-API. Maybe I’m using it incorrectly (DOGE). In practice, tracking.js can detect faces stably. This phenomenon is also found in face-api.js, but it is relatively rare. Then start the camera to test the face, and it is also found that face-api.js is more ideal than tracking.js, but it also has certain requirements on Angle light and other environmental factors. Those who are interested can try it out for themselves.

implementation

face-api.js:

  <script src="./face-api.min.js"></script>
  <script src="./utils.js"></script>
  <script async>
    const video = $("#myVideo"), canvas = $("#myCanvas"), text = $("#text");
    const MODEL_URL = '/models';
    
    // Open the camera
    // openCamera(video);


    const detection = async() = > {// await faceapi.loadTinyFaceDetectorModel(MODEL_URL)
      // common sizes are 128, 160, 224, 320, 416, 512, 608, for face tracking via webcam I would recommend using smaller sizes
      // scoreThreshold? : Number minimum confidence Threshold Default: 0.5
      const options = new faceapi.TinyFaceDetectorOptions({ inputSize: 512 })
      const fullFaceDescriptions = faceapi.detectSingleFace(video, options)
      // withAgeAndGender
      const dims = faceapi.matchDimensions(canvas, video, true)
      try {
        const resizedResults = await faceapi.resizeResults(fullFaceDescriptions, dims)
        console.table(resizedResults)
        if (resizedResults) {
          text.innerText = "Human presence detected."
          // draw
          faceapi.draw.drawDetections(canvas, resizedResults)
        }
        else {
          text.innerText = "No human was detected."}}catch(e) {
        console.log(e)
      }
    }
    (async() = > {await faceapi.loadTinyFaceDetectorModel(MODEL_URL)

      text.innerText = "Initialization completed"
    })()
    video.onplay = () = > {
      setInterval(detection, 200);
    };
  </script>
Copy the code

MODEL_URL is the required resource bundle path where all resource bundles are in the repository resource bundle address

tracking.js:

  <script src="https://cdn.bootcdn.net/ajax/libs/tracking.js/1.1.3/tracking-min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/tracking.js/1.1.3/data/face.js"></script>
  <script src="./utils.js"></script>
  <script>
    const canvasEl = $("#canvasEl"), videoEl = $("#videoEl"), text = $("#text");
    const context = canvasEl.getContext("2d");

    var objects = new tracking.ObjectTracker(['face']);

    const drawTime = 300;
    let prevNow = Date.now();

    objects.on('track'.function(event) {
      
      if (event.data.length === 0) {
        // No objects were detected in this frame.
        context.clearRect(0.0, canvasEl.width, canvasEl.height);
        text.innerText = "No human was detected."
      } else {
        text.innerText = "Human presence detected."
        event.data.forEach(function(rect) {
          // draw
          // rect.x, rect.y, rect.height, rect.width
          const now = Date.now();
          const usageTime = now - prevNow;
          if (usageTime < drawTime) return;
          prevNow = now;

          context.strokeStyle = "#6eff00";
          context.lineWidth = 1;
          context.clearRect(0.0, canvasEl.width, canvasEl.height); context.strokeRect(rect.x, rect.y, rect.width, rect.height); }); }}); tracking.track('#videoEl', objects);
    // openCamera(videoEl);
  </script>
Copy the code

🥱 front end sprout new first, the first post, write bad, hope forgive me, if there is a mistake hope pointed out!