README
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.
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
| |listener|Function|A callback that receives notification of events.Event name Description detected Invoke when face detection is completed. beforedetection Invokes just before detecting a face.
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.