Video Grid

CSS, Experiments, JavaScript, ReactJS,

Overview

This is an experiment to transform live HTML5 video from your camera into a pure CSS grid using ReactJS. First, I draw each video frame to a hidden HTML5 canvas. Then I extract color information for each pixel. An HTML5 canvas pixel is an array of four hexadecimal numbers that represent red, green, blue and alpha. Using that data, I create a CSS grid and update the background color of each HTML element.

View project on GitHub