Foggy Mirror is a web app which recreates the experience of drawing in a foggy mirror using your device’s front-facing camera.

It should work in Safari and Chrome on up-to-date platforms. Firefox appears to be a bit dodgy and Android browsers are perennially out of date. In theory Chrome for Android supports these features as well.

The effect is weirdly fun and intimate. 

   [caption id="" align="alignnone" width="1242.0"]<img src="http://abouthalf.micro.blog/uploads/2018/36c54fce7a.jpg" alt=" Blurry selfies in the sun "/>  Blurry selfies in the sun [/caption]

I achieved this by using the new MediaDevices interface to capture video from the device camera. This video is composited into an HTML5 Canvas element, mirrored, then blurred to create the fog effect. This video is composited into a “stage” canvas which receives mouse or touch events. These events are converted into a blobby drawing. The clean video is merged with the drawing then layered on top of the foggy video to complete the effect.

The project is public on GitHub for the technically curious.

Visit Foggy Mirror