Computer vision visualizer

Face Detection Visualizer

Detect faces, bounding boxes, confidence scores, and key face points directly in the browser with MediaPipe.

Controls

Input mode

The model runs locally in the browser. Use a frontal, well-lit face for the most stable bounding box.

Preview

Upload a face photo, use webcam, or run the sample preview.
Face detection input
Try face meshHand landmarks

What this visualizer does

It runs MediaPipe FaceDetector on an image or live webcam frame and draws the detected face rectangle, confidence score, and facial keypoints over the preview.

What MediaPipe detects

  • Face bounding boxes in image coordinates.
  • Confidence scores for each detected face.
  • Keypoints such as eyes, nose, mouth, and ears.

Common use cases

  • Camera framing
  • Face crop pre-processing
  • AR filters
  • Attendance demos
  • Blur or anonymization

Code examples

import mediapipe as mp
import cv2

mp_face_detection = mp.solutions.face_detection

with mp_face_detection.FaceDetection(
    model_selection=0,
    min_detection_confidence=0.5
) as detector:
    image = cv2.imread("face.jpg")
    rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
    results = detector.process(rgb)

    if results.detections:
        for detection in results.detections:
            print(detection.score, detection.location_data)

How the model works

  1. The input image is resized and normalized.
  2. BlazeFace predicts candidate face boxes and keypoints.
  3. Non-maximum suppression removes overlapping detections.
  4. The browser overlay maps results back to the original image.

Output explanation

Bounding boxes are returned in pixels. Keypoints are normalized, so the overlay multiplies them by the current image or video width and height before drawing.

FAQ

If detection is unstable, lower the confidence threshold, improve lighting, and keep the full face visible. Face mesh is better when you need detailed geometry.