Faceblind: In‑Browser Video Face Blurring Made Simple

Introduction

When building a climbing‑training app, I quickly ran into a privacy dilemma: I wanted to showcase community‑submitted climbing clips, but I couldn’t display the climbers’ faces without explicit consent. Traditional workflows involve exporting the footage, running it through a desktop tool such as ffmpeg with a pre‑built face‑masking script, or relying on third‑party services that require uploading the video to a server. Both approaches add friction, raise security concerns, and often demand a steep learning curve.

Enter Faceblind, a completely static, in‑browser video face‑blurring tool that leverages Google’s MediaPipe pose detection as a fallback when conventional face detection struggles. Hosted on GitHub Pages, the app runs entirely on the client side, meaning your video never leaves the user’s machine. In this post, I’ll walk through the motivation behind Faceblind, its core technology stack, how you can use it today, and why a browser‑only solution is a compelling alternative to existing utilities like the ORB‑HD/deface repository.

---

Why a Browser‑Only Approach?

1. Privacy‑first – All processing happens locally. No video data is transmitted to a remote server, which aligns perfectly with GDPR and other privacy regulations. 2. Zero‑install – Users simply open a URL. No need to install ffmpeg, Python, or heavyweight AI libraries. 3. Cross‑platform – Modern browsers (Chrome, Firefox, Edge, Safari) provide a consistent runtime environment, making the tool accessible on Windows, macOS, Linux, and even mobile devices. 4. Instant feedback – MediaPipe runs in real time, allowing you to scrub through the video and see the mask update instantly, something that can take minutes with a command‑line ffmpeg batch.

Under the Hood

MediaPipe Pose as a Fallback

MediaPipe offers a robust pose detection model that identifies 33 key landmarks on a human body, including the nose, eyes, and ears. While MediaPipe also provides a dedicated face mesh model, it can be computationally heavy for longer videos. Faceblind primarily attempts a classic Haar‑cascade face detector (via the browser’s opencv.js port). When the detector fails—common in low‑resolution or fast‑moving climbing footage—it falls back to the pose landmarks to approximate the face region.

Generating the Mask

1. Detect – The pipeline first runs a fast face detector. If confidence < 0.5, it switches to pose landmarks. 2. Construct – Using the detected eye and nose points, a rectangular mask is generated and expanded by a configurable padding factor. 3. Smooth – A Gaussian blur is applied to the mask edges to avoid harsh transitions. 4. Export – The final mask is saved as a WebP image sequence (one frame per video frame). WebP offers lossless compression with small file sizes, making downstream processing faster.

Pairing with ffmpeg

While the mask can be previewed directly in the browser, the actual video blurring is best performed locally with ffmpeg for speed and quality control. Faceblind provides a ready‑to‑copy command:

`bash ffmpeg -i input.mp4 -i mask_%04d.webp -filter_complex "[0:v][1:v]overlay=0:0:format=auto,format=yuv420p" -c:a copy output_blurred.mp4 `

The command overlays the sequential WebP masks onto the original video, applying the blur only where needed. Because the heavy lifting is done by ffmpeg on the user’s machine, the process is significantly faster than trying to blur frames in JavaScript.

---

Using Faceblind Today

1. Open the app – Navigate to the GitHub Pages URL: https://kmcheung12.github.io/faceblind/. 2. Upload – Drag‑and‑drop your climbing clip (MP4, WebM, or Ogg). The app will load the video and start scanning frames. 3. Review – Scrub through the timeline. If the detection is jittery, click the Edit button on any frame to manually adjust the mask. 4. Download – Once satisfied, click Export Mask to download a ZIP containing the WebP mask sequence. 5. Blur locally – Unzip the mask files, place them next to the original video, and run the provided ffmpeg command.

Manual Editing

Automatic detection isn’t perfect, especially with climbers wearing helmets or when the camera angle is extreme. Faceblind includes a simple canvas‑based editor: you can drag the mask rectangle, resize it, or toggle the visibility of pose landmarks. All edits are stored in a JSON side‑car file, ensuring repeatable results across multiple runs.

---

Comparison with Existing Tools

| Feature | Faceblind (browser) | ORB‑HD/deface (CLI) | Traditional ffmpeg scripts | |---|---|---|---| | Installation | None (static site) | Python + dependencies | ffmpeg only (but requires scripting) | | Privacy | 100% local | 100% local | 100% local | | Real‑time preview | ✅ | ❌ | ❌ | | Cross‑platform | ✅ (any modern browser) | ✅ (Python works on most OS) | ✅ (ffmpeg works everywhere) | | Manual correction | Built‑in UI | Manual editing of masks via code | Requires external tools | | Performance | Fast detection, slower than native ffmpeg for final blur | Fast, but no UI | Fast, but no preview |

Faceblind doesn’t aim to replace robust server‑side pipelines for massive video libraries, but it fills a niche for developers and hobbyists who need a quick, privacy‑preserving solution without leaving the browser.

---

Future Directions

- GPU acceleration – Leveraging WebGPU could speed up pose detection and mask generation for 4K footage. - Batch processing UI – Allow users to queue multiple videos and download a single ZIP containing all masks and ffmpeg scripts. - Extended model support – Integrate MediaPipe’s Selfie Segmentation to blur entire heads or bodies when faces are partially occluded. - Community plugins – Open the door for third‑party extensions, such as automatic watermarking or background replacement.

---

Conclusion

Faceblind demonstrates that sophisticated video‑processing tasks, traditionally reserved for desktop applications, can now be performed entirely in the browser. By combining MediaPipe’s pose detection, a lightweight mask exporter, and a simple ffmpeg overlay step, developers gain a privacy‑first, zero‑install workflow for blurring faces in climbing videos—and any other user‑generated content.

Give it a spin, contribute to the open‑source repository, and help shape the next generation of client‑side video tools.

---

Happy climbing, and happy coding!

Sources: https://kmcheung12.github.io/faceblind/