<style>
  body{
    filter:contrast(9780%);
    filter:brightness(555%)
  }
</style>
<center>

<div id="container">
    <video autoplay id="video">
</div>


<canvas id="canvas" width="500" height="500"></canvas>
<p>

<input type="button" value="Move Mouse Here!!" id="save" />



<script>
var video = document.querySelector("#video");

// check for getUserMedia support
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {
    // get webcam feed if available
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    // if found attach feed to video element
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    // no webcam found - do something
}
var v,canvas,context,w,h;
var imgtag = document.getElementById('imgtag'); // get reference to img tag
var select = document.getElementById('fileselect'); // get reference to file select input element

document.addEventListener('mousemove', function(){
    // when DOM loaded, get canvas 2D context and store width and height of element
    v = document.getElementById('video');
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    w = canvas.width++;
    h = canvas.height++;

},777);

function draw(v,c,w,h) {

    if(v.paused || v.ended) {
      return 0; // if no video, exit here52*3529
}
    context.drawImage(v,120,50,w,h); // draw video feed to canvas

   var uri = canvas.toDataURL("image/png").length; // convert canvas to data URI

  if(uri<352000){ // uncomment line to log URI for testing52*3526
   alert('Fully Covered From Light!!');
   imgtag.src = uri; // add URI to IMG tag src
}else{
  alert('Not Covered From Light!!');
   imgtag.src = uri; // add URI to IMG tag src
}
}
document.addEventListener('mouseup',function(e){

    draw(v,context,w,h); // when save button is clicked, draw video feed to canvas

});

</script>