xtejs-detection

XteJS detection is a library that detects various things such as faces and licenses.

 

Introduction

XtejsDetection is a library that anyone can easily detect faces and objects in the browser.

We also offer a highly accurate face recognition platform and OCR.
For more information, please contact us via Facebook message (https://www.facebook.com/takuya.motoshima.7/) or email ([e-mail]).

Browser Compatibility

XtejsDetection supports all browsers that are ES5-compliant (IE8 and below are not supported).

Example of detecting faces from webcam.

Example of detecting faces from images.

Example of detecting faces from video.

Installation

Install.

npm install xtejs-detection;

Copy model manifests and weights (shards) required for face detection to public directory

cp -a node_modules/xtejs-detection/dist/models {Your public directory path};

Usage

Face detection from web camera.

// HTML: <video id="webcam" playsinline muted></video>
 
import { FaceDetector } from 'xtejs-detection';
 
// Open web camera
const webcam = document.querySelector('#webcam');
webcam.srcObject = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
await new Promise(resolve => webcam.addEventListener('loadedmetadata', () => {
  webcam.play();
  resolve();
}));
 
// Face detector instance
const detector = new FaceDetector(document.querySelector('#webcam'));
 
// Attach the face detector
await detector.attach({ models: '../dist/models' });
 
// Detector event listeners
detector.on('detected', results => {
  for (let result of results || []) {
    // Draw face bounding box
    result.drawFaceRect();
    // Get Face image in base64 format
    const thumbnail = result.thumbnail;
  }
});
 
// Start face detection
detector.realTimeDetection();

Detect face from video.

// HTML: <video id="video" src="sample.mp4" playsinline loop></video>
 
import { FaceDetector } from 'xtejs-detection';
 
// Face detector instance
const detector = new FaceDetector(document.querySelector('#video'));
 
// Attach the face detector
await detector.attach({ models: 'models' });
 
// Detector event listeners
detector.on('detected', results => {
  // Draw face bounding box
  for (let result of results || []) result.drawFaceRect();
});
 
// Play video
document.querySelector('#video').play();
 
// Start face detection
detector.realTimeDetection();
 
// Stop face detection
detector.cancelRealTimeDetection();

Detect face from image.

// HTML: <img id="image" src="sample.png">
 
import { FaceDetector } from 'xtejs-detection';
 
// Face detector instance
const detector = new FaceDetector(document.querySelector('#image'));
 
// Attach the face detector
await detector.attach({ models: 'models' });
 
// Detect face from image
const results = await detector.detection();
 
for (let result of results || []) {
  // Draw face bounding box
  result.drawFaceRect();
  // Get Face image in base64 format
  const thumbnail = result.thumbnail;
}

API Reference

• Class: FaceDetector

  This class detects faces from web cameras, images, and videos.

  • new FaceDetector(input)

    Construct a new FaceDetector

    Parameters:

    Name	Type	Description
    input	HTMLImageElement|HTMLVideoElement	Media elements for webcams, videos and images that detect faces

    Examples:

    // HTML: <video id="webcam" playsinline muted></video>
     
    import { FaceDetector } from 'xtejs-detection';
     
    // Open web camera
    const webcam = document.querySelector('#webcam');
    webcam.srcObject = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    await new Promise(resolve => webcam.addEventListener('loadedmetadata', () => {
      webcam.play();
      resolve();
    }));
     
    // Face detector instance
    const detector = new FaceDetector(document.querySelector('#webcam'));

  • Methods

    • async attach(options)

      Attach face detection features to devices

      Parameters:

      Name	Type	Description
      options	Object	Options to attach face detector to device Property Name Type Description models string The path where the model manifest and weights (shards) files are stored. These are located in "https://github.com/takuya-motoshima/xtejs-detection/tree/master/dist/models", so copy them to your application's public directory. numberOfDetection number Maximum number of faces to detect. The default is 100. motions boolean Detects facial motion. When on, the head angle is added to the detection results. The default is off.

      Returns:

      Promise<void>

      Examples:

      // Attach the face detector
      await detector.attach({ models: 'models', numberOfDetection: 100, motions: true });

    • async detection()

      Detect face

      Returns:

      Returns the detection result object.
      If the option numberOfDetection is 1, FaceDetectResult object is returned. If it is 2 or more, FaceDetectResult array is returned. If not detected, NULL is returned.

      Promise<FaceDetectResult[]|FaceDetectResult|null>

      Examples:

      // Detect face
      const results = await detector.detection();
      // results:
      // [
      //   {
      //     rect: {
      //       x: 545.91,
      //       y: 190.72,
      //       width: 277.37,
      //       height: 212.27
      //     },
      //     thumbnail: 'data:image/png;base64,iVBORw0...',
      //     roll: 40.16
      //   }
      // ]

    • realTimeDetection()

      Start real-time face detection.
      This is used when detecting a face from a web camera or video where the image is constantly changing.

      Examples:

      // Start face detection
      detector.realTimeDetection();

    • cancelRealTimeDetection()

      Stop real-time face detection.
      It is used when the WEB camera and video are paused.

      Examples:

      // Stop face detection
      detector.cancelRealTimeDetection();

    • on(type, listener)

      Set up a real-time detection event for the face detector.

      Parameters:

      Name	Type	Description
      type	string	Event name Event name Description detected Invoke when face detection is completed. beforedetection Invokes just before detecting a face.
      listener	Function	A callback that receives notification of events. Callback parameters Event name Parameters detected Name Type Description results FaceDetectResult[]|FaceDetectResult|null Returns the detection result object. If the option numberOfDetection is 1, FaceDetectResult object is returned. If it is 2 or more, FaceDetectResult array is returned. If not detected, NULL is returned. beforedetection There are no parameters.

      Returns:

      FaceDetector

      Examples:

      // Detector event listeners
      detector
        .on('detected', results => {
          for (let result of results || []) {
            // Draw face bounding box
            result.drawFaceRect();
            // Get Face image in base64 format
            const thumbnail = result.thumbnail;
          }
        })
        .on('beforedetection', results => {
          // Do something just before detection
        });
       
      // Start face detection
      detector.realTimeDetection();

• Class: FaceDetectResult

  This is the face detection result.

  • Members

    • readonly rect: Object

      The bounding box of the detected face.

      Property

      Name	Type	Description
      x	number	The X coordinate of the face bounding box.
      y	number	The Y coordinate of the face bounding box.
      width	number	The width of the face bounding box.
      height	number	The height of the face bounding box.

    • readonly roll: numbe

      The roll angle of the head.

    • readonly thumbnail: string

      A face image detected in Base64 format.

  • Methods

    • drawFaceRect()

      Draw face bounding box.

      Examples:

      // When detecting faces from images/
      // Detect face from image
      const results = await detector.detection();
      // Draw face bounding box
      for (let result of results || []) result.drawFaceRect();
       
      // When detecting a face from a web camera or video
      // Detector event listeners
      detector.on('detected', results => {
        // Draw face bounding box
        for (let result of results || []) result.drawFaceRect();
      });
       
      // Start face detection
      detector.realTimeDetection();

Examples

There are some examples in "./examples" in this package.Here is the first one to get you started.

Credits

The original model, weights, code, etc. was created by face-api.js and can be found at https://github.com/justadudewhohacks/face-api.js/ This port and my work is in no way related to face-api.js.

License

MIT licensed