National Public Mania

    xtejs-detection
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    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 (developer.takuyamotoshima@gmail.com).

    Browser Compatibility

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

    Example of detecting faces from webcam.

    Detect face in image

    Example of detecting faces from images.

    Detect face in image

    Example of detecting faces from video.

    Detect face in image

    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
          NameTypeDescription
          modelsstringThe 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.
          numberOfDetectionnumberMaximum number of faces to detect.
          The default is 100.
          motionsbooleanDetects 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 nameDescription
          detectedInvoke when face detection is completed.
          beforedetectionInvokes just before detecting a face.
          listener Function A callback that receives notification of events.
          Callback parameters
          Event nameParameters
          detected
          NameTypeDescription
          resultsFaceDetectResult[]|FaceDetectResult|nullReturns 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.
          beforedetectionThere 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

    Install

    npm i xtejs-detection

    DownloadsWeekly Downloads

    12

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    49.2 MB

    Total Files

    125

    Last publish

    Collaborators

    • takuya-motoshima