camera data to a light bright type display

rtc stuff

by monteslu

HTML

<script src="http://rawgithub.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 = 32;
  osc.width = 32;
  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 h = ctx.canvas.height / osc.height;
      var w = ctx.canvas.width / osc.width;
      
      var size = h * w;
        for(var i = 0; i < osc.width * osc.height; i++){
            var x = (i % osc.width) * w;
            var y = (i % size) - (i % h);
            
            ctx.fillStyle = 'rgb(' 
            + data[i*4] + ',' 
            + data[i*4+1] + ',' 
            + data[i*4+2] + ')';
            ctx.beginPath();
            ctx.arc(x + w/2, y + h/2, h/4, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        }
    }
  });

  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) {
    console.log(error);
  });

});