JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<pre id=p>

CSS

body,html{
  height:100%;
  width:100%;
}

body {
  background-color:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  
}

JavaScript

//c=e=>v=document.createElement(e),i?g.getImageData(x,y,1,1).data[0]/255:t?g.drawImage(v,0,0,16,16):navigator.mediaDevices.getUserMedia({video:g=c`canvas`.getContext`2d`}).then(s=>c`video`.play(v.srcObject=s))



//c=e=>document.createElement(e),g=c`canvas`.getContext`2d`,v=c`video`,v.crossOrigin=v.loop=v.muted=v.src='https://fxi.io/n';setInterval(f=a=>{for(v.play(i=0),g.drawImage(v,0,0,w=20,w),o=``,l=f+o;i<l.length;a=g.getImageData(i%w,i/w,1,1).data,o+=(l[i++]+(i%w?``:`\n`)).fontcolor('#'+(a[0]<<16|a[1]<< 8|a[2]).toString(16)));p.innerHTML=o},t=200)


// webcam
//console.log('l');
//setInterval(f=a=>{for(c=e=>document.createElement(e),G=c`canvas`.getContext`2d`,v=c`video`,v.muted=1,v.play(),i=0,G.drawImage(v,0,0,w=20,w),o=``,l=f+o;i<l.length;a=G.getImageData(i%w,i/w,1,1).data,[r,g,b]=a,i++?o+=(l[i-1]+(i%w?``:`\n`)).fontcolor(console.log(a)):navigator.mediaDevices.getUserMedia({video:1}).then(s=>v.srcObject=s));p.innerHTML=o},t=2000) //338


//console.log('#'+(r<<16|g<< 8|b).toString(16)