camera data to old school CGA graphics

rtc stuff

by monteslu

HTML

<script src="https://rawgit.com/iceddev/frozen/master/dist/frozen.js.uncompressed.js"></script>
<div id="gameArea">
    <canvas id="canvas" width="1024" height="1024"></canvas>
</div>

CSS

body {
    background-color: #000;
    color: #fff;
    margin: 0 auto;
}
#gameArea {
    margin: 5px;
    text-align: center;
}

JavaScript

require([
  'frozen/GameCore'
], function(GameCore){

  var osc = document.createElement('canvas');
  osc.height = 8;
  osc.width = 8;
  oscCtx = osc.getContext('2d');
  oscCtx.translate(osc.width, 0);
  oscCtx.scale(-1, 1); //flip it to mirror
  var video;
    
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia || navigator.msGetUserMedia;
  window.URL = window.URL || window.webkitURL;

    
  window.game = new GameCore({
    canvasId: 'canvas',
    gameAreaId: 'gameArea',
    canvasPercentage: 0.95, //95% of game area
    draw: function(ctx){
      
      oscCtx.drawImage(video, 0, 0, osc.width, osc.height);
        
      var imageData = oscCtx.getImageData(0, 0, osc.height, osc.width);
      var data = imageData.data;
      var size = osc.height * osc.width;
        
      for(var i = 0; i < size; i++){
            var r,g,b;
            r = data[i * 4];
            g = data[i * 4 + 1];
            b = data[i * 4 + 2];
            
            if((r + g + b) > 676){
                ctx.fillStyle = "rgb(255,255,0)";
            }else if ((r + g + b) < 92){
                ctx.fillStyle = "rgb(0,0,0)";
            }else if(r > g){
                ctx.fillStyle = "rgb(255,0,0)";
            }else{
                ctx.fillStyle = "rgb(0,255,0)";
            }
                
            ctx.fillRect(
                (i % osc.width) + ((i % osc.width) * 64),
                Math.floor(i / osc.height) + (Math.floor(i / osc.width) * 64),
                64, 64);
            
            
        }
    }
  });

  navigator.getUserMedia({video: true}, function(localMediaStream) {
    video = document.createElement("video");
    video.src = window.URL.createObjectURL(localMediaStream);
    video.autoplay = true;
    video.addEventListener("canplay", function (e) {
       game.video = video;
       //stupid hack
        setTimeout(function(){ game.run(); }, 1000);
    }, false );   
  }, function(error) {
  ...