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

Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

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