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.

Tagged #programming, #web, #machine-learning.

Similar posts

More by Jim

👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

This page copyright James Fisher 2020. Content is not associated with my employer. Found an error? Edit this page.