Take a snapshot from your webcam and give it retro filters

Hergestellt unter Verwendung von JavaScript, HTML5, Canvas, Video

  • 72 Mal angesehen

Mehr über diese Demo vom Autor

The name comes from the contest idea. GUM is short getUserMedia and gram, well it's like a popular photo app that may have inspired the idea. Ideally I'd have liked to use the CSS3 filters but they aren't quite cross browser yet, so using some math I directly manipulate the pixel values.

Black and White - average of RGB per pixel
Blue Shift - swap the Red Values and Blue Values i.e. RGB => BGR
Hulk and Retro - Attempt to Hue Rotate from RGB, found an algorithm to Swap though YIQ space, read more here
Sepia - Found a matrix of values online and adjusted RGB values. Similiar to Hulk and Retro, but less math.
Solarized - Invert the colors. Since colors fall between 0 - 255 you have to transform around 127

Basic video code was stood up around MDN getUserMedia tutorial. I've added jQuery (preference), and a bit if image processing.