HTML5 WebCam

by paulftw

HTML

<video width=400 height=350 autoplay></video>

<img src="">  <img id=img2 src="">

<canvas style="display:none;" width='307px' height='250px'></canvas>

<div id=out></div>

CSS

video {
  width: 307px;
  height: 250px;
  background: rgba(25,25,255,0.5);
  border: 1px solid #ccc;
}
.grayscale {
  +filter: grayscale(1);
}
.sepia {
  +filter: sepia(1);
}
.blur {
  +filter: blur(3px);
}

img {
    background: rgba(255,25,25,0.5);
}

JavaScript

if (!navigator.getUserMedia) {
      navigator.getUserMedia = navigator.webkitGetUserMedia;
  }
  var errorCallback = function(e) {
    console.log('Reeeejected!', e);
  };

  var H = 120;
  var W = 147;

  //H = 50; W = 30;

  window.jsonCallback = window.alert;

  function sendPic(w, h, data) {
    $.ajax({
       type: 'GET',
        url: 'http://localhost:5000/img',
        async: false,
        jsonpCallback: 'jsonCallback',
        contentType: "application/json",
        data: {
            width: w,
            height: h,
            data: data.join(' '),
        },
        dataType: 'jsonp',
        success: function(json) {
           alert(111);
        },
        error: function(e) {
           console.log('Error ', e);
        }
    });
  }

  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');

  // Not showing vendor prefixes.
  navigator.getUserMedia({video: true, audio: false}, function(localMediaStream) {
    var video = document.querySelector('video');

    function snapshot() {
      ctx.drawImage(video, 0, 0, W, H);
      document.querySelector('img').src=canvas.toDataURL('image/png');
      
      var imgd = ctx.getImageData(0, 0, W, H).data;
      
        var hist = {};
       
      var arr = [];
      for (var i = 0; i < imgd.length; i+=4) {
          var r = Math.round(imgd[i] / 255 * 31);
          var g = Math.round(imgd[i+1] / 255 * 63);
          var b = Math.round(imgd[i+2] / 255 * 31);
          arr.push(r);
          arr.push(g);
          arr.push(b);
          colo = 0;
          if (!hist[colo]) {
              hist[colo] = 0;
          }
          hist[colo]++;
      }
      sendPic(W, H, arr);
      
      
      var nd = ctx.createImageData(5, 5);
        console.log(nd);
        for (var jj=0; jj<25*4;jj+=4) {
          nd.data[jj+0]=jj;
          nd.data[jj+1]=jj*2;
          nd.data[jj+2]=jj*3;
          nd.data[jj+3] = jj*2.5;
        }
        console.log(nd);
     ...