A human face video tracking system

It’s been a few years since my last project with GetUserMedia, but not much has change since apart from new ways to track objects as provided by machine learning and AI.

watch my work in progress (there’s no sound no worries):

I won’t go into many details about this one, but a few things that I noticed and were hard to remember are mirroring, but I leave a few quick hints:

  canvasRenderingContext2D.translate(HTMLCanvasElement.width, 0)
  canvasRenderingContext2D.scale(-1, 1)

A refresher into WebGl that I suggest is the WebGl Fundamentals . But that won’t do for a quick project as it takes awhile to learn, but would like to suggest for future reference The book of shaders - a step-by-step guide through the abstract and complex universe of Fragment Shaders.

Otherwise, a quick and good alternative is to use css filters and assign to the filter property of the CanvasRenderingContext2D

  canvasRenderingContext2D.filter = 'invert(150%)'

Obs: When setting filters, do it just before drawing the video frame on the canvas.

Yeh, right, that’s my lockdown moustache and hairstyle - I believe that from other people’s perspective the hairstyle is exactly the same as before…but hey!