A recent project I worked on involved a thermal camera. The plan was to combine the images from a thermal camera and a webcam to create an image filter similar to the heat-vision effect used in the movie Predator. Before the thermal camera hardware arrived, it wasn’t clear whether or not we would be able to wire it into a web app. I decided to create a few alternative prototypes to fall back on. The thermal camera worked so I never used any of the prototypes.
One of the prototypes involved motion detection. Anything moving is likely to produce heat. The effect works by capturing two frames, 3 seconds apart, from the live video feed. Even someone holding still to pose for the camera moves a little. Cheating, for sure, but the effect works really well.
The script looks for changes in pixels between the two frames and generates a difference map. Changed pixels are black and unchanged are white. The second frame is used as the base of the final image. To keep things simple, it’s converted to grayscale. Each pixel is assigned a color palette based on the difference map, warm colors for changed pixels and cool colors for unchanged. The pixel is changed to a color in the palette relative to its grey value.
With the color filter ready, the next step was to create a live camera preview. This was achieved by repeating the process at a faster interval. Each frame serves as both the base image and the difference map for the next frame. An interval of 100ms creates a 10fps preview which is about as fast I could get it on my laptop without taxing the processor. If you’re in a situation where you know you’ll be running on good hardware, the interval can be reduced to increase the frame rate.
There are a few caveats, the most notable is that the camera must remain stationary for the effect to work. A moving background will register as all red. Also, depending on the quality of the camera and the lighting of the environment, there can be a lot of noise in the image which will register as red.
The full source is available on GitHub and CodePen. If you have a webcam ready, try out the demo.