Register faces and recognize them in real-time from camera feed
Initializing...
No faces registered yet
No faces detected
// Initialize MediaPipe Vision Tasks
const vision = await FilesetResolver.forVisionTasks(...)
// Create Face Detector (for bounding boxes)
faceDetector = await FaceDetector.createFromOptions(vision, {
baseOptions: {
modelAssetPath: 'blaze_face_short_range.tflite',
delegate: 'GPU'
},
runningMode: 'VIDEO'
})
// Create Face Landmarker (for 478 facial landmarks)
faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
baseOptions: {
modelAssetPath: 'face_landmarker.task',
delegate: 'GPU'
},
runningMode: 'VIDEO',
numFaces: 5
})
// Detect faces in video frame
const detectionResults = faceDetector.detectForVideo(video, timestamp)
const landmarkResults = faceLandmarker.detectForVideo(video, timestamp)
// Compare landmarks for recognition
function calculateLandmarkSimilarity(landmarks1, landmarks2) {
// Calculate Euclidean distance between corresponding points
// Convert distance to similarity score (0-1)
return similarity
}Built with MediaPipe Face Detector and MediaPipe Face Landmarker
Note: This demo runs entirely in the browser using WebAssembly and WebGPU.