JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div id="stage">
  <input type="checkbox" id="check" />
</div>
<canvas id="canvas" width="1px" height="1px"></canvas>
<video></video>

CSS

html, body {
  margin: 0;
  padding: 0;
}

input {
  margin: 0;
  padding: 0;
}

#stage {
  display: grid;
  font-size: 0px;
}

#canvas {
  position: absolute;
  top: 0px;
  left: 0px;
}

JavaScript

// document.documentElement
let checkboxSize;
let stage;
let canvas;
let ctx;

let checkboxes = [[]];

let video = false;

document.addEventListener('DOMContentLoaded', () => {
	const {innerHeight, innerWidth} = window;
 	const check = document.getElementById('check');
  stage = document.getElementById('stage');
  
  const {width, height} = check.getBoundingClientRect();
  checkboxSize = [width, height];

	canvas = document.getElementById('canvas');

	drawCheckboxes();
  
  drawFrame();
});

function drawCheckboxes() {  
	const {innerWidth, innerHeight} = window;
  const x = Math.floor(innerWidth / checkboxSize[0]);
  const y = Math.floor(innerHeight / checkboxSize[1]);
  
  	connectMedia(x, y);


  
  stage.innerHTML = "";
  
  stage.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
  
  stage.style.width = `${x * checkboxSize[0]}`;
  stage.style.height = `${x * checkboxSize[1]}`;
  
  checkboxes = [];
 	for (let iY = 0; iY < y; iY++) {
  	checkboxes[iY] = [];
  	for (let iX = 0; iX < x; iX++) {
    	const cb = document.createElement('input');
      cb.setAttribute('type', 'checkbox');
      stage.appendChild(cb)
    	checkboxes[iY].push(cb);
    }
  }
  
  canvas.setAttribute('width', `${x}px`);
  canvas.setAttribute('height', `${y}px`);
  ctx = canvas.getContext('2d');
  
  ctx.font = '36px serif';
  ctx.fillStyle = 'black';
  ctx.fillText('coonrod.org', 2, 24);

}

function connectMedia(x, y) {

  var constraints = { audio: false, video: { width: x, height: y } }; 

  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    video = document.querySelector('video');
    video.srcObject = mediaStream;
    video.onloadedmetadata = function(e) {
      video.play();
    };
  })
  .catch(function(err) { console.log(err.name + ": " + err.message); });

}

function drawFrame() {
  const y = checkboxes.length;
  const x = checkboxes[0].length;
  
	if (video) {
  	ctx.drawImage(video, 0, 0, x, y);
  }
  
  const pixels = ctx.getImageData(0, 0,...