HTML5 Video Face Detection is an open-source browser demo that uses the CCV Javascript face detection library to track faces in a live webcam feed and apply four real-time effects: goofy glasses, green screen, hipster color manipulation, and blur.
What is HTML5 Video Face Detection?
This is a demo project (not a production library) that shows how to combine getUserMedia, HTML5 video, and the Canvas API to perform face detection entirely in the browser. It takes a live webcam stream as input and outputs a canvas rendering with an overlay effect positioned on detected faces. The code was created by Wes Bos and is available on GitHub with 468 stars. It relies on the CCV Javascript library, a JavaScript port of the OpenCV face detection algorithm, to locate faces in each video frame.
Key Features
- CCV face detection — Uses the CCV Javascript Library to identify face coordinates in real time from the webcam video.
- Four switchable effects — Call
App.start('glasses'),App.start('green'),App.start('hipster'), orApp.start('blur')from the browser console to change the visual output. - Green screen tuning — The green screen effect has hidden minimum and maximum sliders that adjust the chroma key thresholds.
- No backend required — Everything runs client-side in HTML5, JavaScript, and Canvas; you only need to serve the static files.
- getUserMedia integration — Accesses the webcam via the W3C getUserMedia API, requiring Opera Labs camera or Chrome Canary with media streaming enabled.
- Learning resources — The repository links to a YouTube demo video, a working demo, and a full tutorial explaining the face detection and canvas process.
Who is it for?
- Front-end developers who want to learn face detection and real-time canvas manipulation can read the source and tutorial to see how CCV and getUserMedia work together.
- JavaScript hobbyists can experiment with the four effects and modify thresholds to understand pixel manipulation and chroma keying.
- Open source contributors can fork the repository to add new effects, improve detection accuracy, or modernize the code for current browsers.
What can you do with HTML5 Video Face Detection?
- Build webcam filter prototypes: Use the demo as a starting point for face-tracking effects similar to Snapchat filters, replacing or extending the existing
App.start()effects. - Learn chroma keying: Adjust the hidden green screen sliders to see how threshold values affect the keyed output.
- Teach canvas and video processing: Instructors can use the demo as a live example of combining video input, face detection, and canvas drawing.
How does the demo work?
The page requests camera access through getUserMedia, then each video frame is drawn to a canvas. The CCV library scans the frame for face locations, and the active effect function draws the corresponding overlay or manipulation (glasses image, green screen keying, pixel shift, or blur) onto the canvas at the detected coordinates.
FAQ
What browsers are supported?
The demo requires a browser that supports getUserMedia. On Chrome Canary, you must enable the --enable-media-stream flag (or launch with that command-line argument) before the camera feed will work.
How do I start the demo?
Open the page and run App.start() in the developer console. To use a specific effect, pass its name, for example App.start('glasses') for the goofy glasses overlay.
Is this a complete library?
No, it is a demo and tutorial codebase showing how to use the CCV Javascript face detection library. It is not a packaged library or an npm module.
Can I use the green screen effect?
Yes, call App.start('green'). The effect includes hidden minimum and maximum sliders that let you tune the chroma key thresholds, though they are not visible in the default interface.
