XteJS detection is a library that detects various things such as faces and licenses.
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).
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.
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};
// 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();// 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();// 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;
}-
This class detects faces from web cameras, images, and videos.
-
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'));
-
-
Attach face detection features to devices
Parameters:
Name Type Description options Object Options to attach face detector to device
PropertyName 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 });
-
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 // } // ]
-
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();
-
Stop real-time face detection.
It is used when the WEB camera and video are paused.Examples:
// Stop face detection detector.cancelRealTimeDetection();
-
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 parametersEvent 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();
-
-
-
This is the face detection result.
-
-
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. -
The roll angle of the head.
-
A face image detected in Base64 format.
-
-
-
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();
-
-
There are some examples in "./examples" in this package.Here is the first one to get you started.
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.