webcam-face-detector
Advanced tools
A framework-agnostic face detection library.
npm install webcam-face-detector
import { FaceDetector } from 'webcam-face-detector';
<script src="https://unpkg.com/webcam-face-detector/dist/webcam-face-detector.umd.js"></script>
| Option | Type | Default | Description |
|---|---|---|---|
| timeoutDuration | number | 3000 | Duration in milliseconds before triggering timeout callbacks |
| captureInterval | number | 2000 | Interval in milliseconds between image captures |
| onFaceDetected | function | () => {} | Callback when face is detected, receives detection data |
| onFaceTimeout | function | () => {} | Callback when face is not detected for timeoutDuration |
| onPupilDetected | function | () => {} | Callback when pupil is detected, receives coordinates and eye type |
| onPupilTimeout | function | () => {} | Callback when pupils are not detected for timeoutDuration |
| onInit | function | () => {} | Callback when detector is initialized |
| onImageCaptured | function | () => {} | Callback when an image is captured, receives imageData object with dataUrl, timestamp, format, width, and height |
| showFaceCircle | boolean | true | Show/hide face detection circle |
| showPupilPoints | boolean | true | Show/hide pupil detection points |
| faceCircleColor | string | '#ff0000' | Color of face detection circle |
| pupilPointsColor | string | '#ff0000' | Color of pupil detection points |
| faceCircleLineWidth | number | 3 | Line width of face detection circle |
| pupilPointsLineWidth | number | 3 | Line width of pupil detection points |
| detectionMode | string | 'both' | Detection mode: 'face', 'pupil', or 'both' |
| resources | object | { facefinder: './resources/facefinder.bin', puploc: './resources/puploc.bin' } | Paths to required detection model files |
<!DOCTYPE html>
<html>
<head>
<title>Face Detector Demo</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
video {
display: none;
}
canvas {
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="container">
<h1>Face Detector Demo</h1>
<video id="video"></video>
<canvas id="canvas" width="640" height="480"></canvas>
</div>
<script src="https://unpkg.com/webcam-face-detector/dist/webcam-face-detector.umd.js"></script>
<script>
async function initFaceDetector() {
const detector = new FaceDetector({
timeoutDuration: 3000, //
captureInterval: 2000, // take a picture every 2 second
onFaceDetected: (detection) => console.log(detection),
showFaceCircle: true, // optional: show/hide face circle
showPupilPoints: true, // optional: show/hide pupil points
detectionMode: 'both',
resources: {
facefinder : 'https://cdn.jsdelivr.net/gh/saifulriza/face-detector@main/src/resources/facefinder.bin',
puploc :'https://cdn.jsdelivr.net/gh/saifulriza/face-detector@main/src/resources/puploc.bin'
},
onImageCaptured: (imageData) => {
console.log('image taken:', imageData.dataUrl);
// imageData memiliki: dataUrl, timestamp, format, width, height
},
});
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
await video.play();
await detector.init(canvas);
detector.startCapturing(video);
detector.start(video);
} catch (err) {
console.error('Error:', err);
}
}
// Start the face detector when page loads
window.addEventListener('load', initFaceDetector);
</script>
</body>
</html>
import { useEffect, useRef } from 'react';
function FaceDetectorComponent() {
const canvasRef = useRef(null);
const videoRef = useRef(null);
useEffect(() => {
const detector = new FaceDetector({
onFaceDetected: (detection) => console.log(detection),
showFaceCircle: true, // optional: show/hide face circle
showPupilPoints: false // optional: show/hide pupil points
});
async function initDetector() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoRef.current.srcObject = stream;
await videoRef.current.play();
await detector.init(canvasRef.current);
// detector.startCapturing(videoRef);
detector.start(videoRef.current);
} catch (err) {
console.error('Error:', err);
}
}
initDetector();
return () => detector.stop();
}, []);
return (
<div>
<video ref={videoRef} style={{ display: 'none' }} />
<canvas ref={canvasRef} width={640} height={480} />
</div>
);
}
<template>
<div>
<video ref="video" style="display: none"></video>
<canvas ref="canvas" width="640" height="480"></canvas>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
const video = ref(null);
const canvas = ref(null);
let detector;
onMounted(async () => {
detector = new FaceDetector({
onFaceDetected: (detection) => console.log(detection),
showFaceCircle: true, // optional: show/hide face circle
showPupilPoints: false // optional: show/hide pupil points
});
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.value.srcObject = stream;
await video.value.play();
await detector.init(canvas.value);
// detector.startCapturing(video.value)
detector.start(video.value);
} catch (err) {
console.error('Error:', err);
}
});
onBeforeUnmount(() => {
if (detector) {
detector.stop();
}
});
</script>
FAQs
Face and pupil detection library
The npm package webcam-face-detector receives a total of 4 weekly downloads. As such, webcam-face-detector popularity was classified as not popular.
We found that webcam-face-detector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Ruby gems typosquat Fastlane plugins to steal Telegram bot tokens, messages, and files, exploiting demand after Vietnam’s Telegram ban.
Research
Security News
Socket uncovered four malicious npm packages that exfiltrate up to 85% of a victim’s Ethereum or BSC wallet using obfuscated JavaScript.
Security News
TC39 advances 9 JavaScript proposals, including Array.fromAsync, Error.isError, and Explicit Resource Management, which are now headed into the ECMAScript spec.