A head in a box with BlazeFace

Yesterday I showed how to track a head using BlazeFace. Today, I show how to display the head in a square canvas. You can run it on your own head: to start a demo!

This display style doesn’t require any WebGL. I’m just using a 2D context and .drawImage.

The output from BlazeFace tends to “jitter”. The predicted face will move around with noticeable noise. To account for this, I smooth the values using exponential smoothing (the simplest smoothing function I’m aware of). This smoothing is a tradeoff; it increases smoothness but also increases latency.

What should we do when the head is partially outside the image? I choose to make the unknown region transparent. Another valid choice would be to shift the bounding box to always be inside the image, even if it doesn’t cover the head properly.

I just released Vidrio, a free app for macOS and Windows to make your screen-sharing awesomely holographic. Vidrio shows your webcam video on your screen, just like a mirror. Then you just share or record your screen with Zoom, QuickTime, or any other app. Vidrio makes your presentations effortlessly engaging, showing your gestures, gazes, and expressions. #1 on Product Hunt. Available for macOS and Windows.

With Vidrio

With generic competitor

More by Jim

Tagged #programming, #web, #ml. All content copyright James Fisher 2020. This post is not associated with my employer. Found an error? Edit this page.