Paper detection

fiddle.css

.image:after {
  display: block;
  position: absolute;
  width: 70%;
  height: 70%;
  border: 10px solid red;
}

video
{
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

fiddle.html

<div id="status">

</div>
<div>
  <h1>
    זיהוי דף מתוך צילום
  </h1>
  יש לגלול למטה כאן...
</div>
<div>
  צילום מהמצלמה ישיר:<br/>
  <video autoplay width="640" height="480"></video>
</div>
<img src="" class="image">
<canvas width="1920" height="1080" style="display: none;"></canvas>

<canvas width="640" height="480" id="canvasOutput"></canvas>

<script>
function onOpenCvReady() { // eslint-disable-line no-unused-vars
    document.getElementById('status').innerHTML = '<b>OpenCV.js is ready</b>.' +
        'You can upload an image.<br>' +
        'The <b>imageSrc</b> is a &lt;img&gt; element used as cv.Mat input. ' +
        'The <b>canvasOutput</b> is a &lt;canvas&gt; element used as cv.Mat output.';
        run();
}

function onOpenCvError() { // eslint-disable-line no-unused-vars
    let element = document.getElementById('status');
    element.setAttribute('class', 'err');
    element.innerHTML = 'Failed to load opencv.js';
}
</script>
<script async src="https://docs.opencv.org/trunk/opencv.js" type="text/javascript" onload="onOpenCvReady();" onerror="onOpenCvError();"></script>

fiddle.js

window.run = function() {
	var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var image = document.querySelector('img');
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  window.URL = window.URL || window.webkitURL;


  function convert4channelsTo1(image4channels) {
    var image1channel = new Array(image4channels.length / 4);
    for (var i = 0, j = 0; i < image4channels.length; i += 4, ++j) {
      image1channel[j] = image4channels[i];
    }

    return image1channel;
  }



  function snapshot() {
    var cw = 1280;
    var ch = 720;
    let dst = cv.Mat.zeros(cw, ch, cv.CV_8UC3);
    ctx.drawImage(video, 0, 0, cw, ch);
   

    var imageData = ctx.getImageData(0, 0, cw, ch);
    var cv_src = new cv.matFromImageData(imageData);
    
    var imgray = new cv.Mat(),thresh = new cv.Mat();
    cv.cvtColor(cv_src, imgray, cv.COLOR_BGR2GRAY)
		var ret = cv.threshold(imgray, thresh, 127, 255, 0)
    
   let blue = new cv.Scalar(0,0,255)
    let lines = new cv.Mat();
    cv.HoughLinesP(thresh, lines, 1, Math.PI / 180, 2, 0, 0);
     
    
    // draw lines
    for (let i = 0; i < lines.rows; ++i) {
        let startPoint = new cv.Point(lines.data32S[i * 4], lines.data32S[i * 4 + 1]);
        let endPoint = new cv.Point(lines.data32S[i * 4 + 2], lines.data32S[i * 4 + 3]);
        cv.line(thresh, startPoint, endPoint, blue);
    }
    
    let contours = new cv.MatVector();
    let hierarchy = new cv.Mat();   
		var im2 = cv.findContours(thresh, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE)
    
		let largest_cnt = getLargestContour(contours);
    
    let rect = cv.boundingRect(largest_cnt);
    
    let contoursColor = new cv.Scalar(255, 255, 255);
let rectangleColor = new cv.Scalar(255, 0, 230);

let point1 = new cv.Point(rect.x, rect.y);
let point2 = new cv.Point(rect.x + rect.width, rect.y + rect.height);
cv.rectangle(cv_src, point1, point2, rectangleColor, 5, cv.LINE_AA, 0);
    
    
    let rotatedRect = cv.minAreaRect(largest_cnt);
    let vertices = cv.RotatedRect.points(rotatedRect);
    let white = new cv.Scalar(255, 255, 255);
    let red = new cv.Scalar( 255, 0,0);
    //cv.drawContours(cv_src, contours, 0, white, 1, 8, hierarchy, 100);
    // draw rotatedRect
    for (let i = 0; i < 4; i++) {
        cv.line(cv_src, vertices[i], vertices[(i + 1) % 4], red, 2, cv.LINE_AA, 0);
    }
   

		/* let green = new cv.Scalar(0, 255, 0);
		    let contourID0 = 10;
		    cv.drawContours(cv_src, contours, contourID0, green, 1, cv.LINE_8, hierarchy, 100)
		    
		    for (let i = 0; i < contours.size(); ++i) {
		      let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255),
		                                Math.round(Math.random() * 255));
		      cv.drawContours(cv_src, contours, i, color, 3, cv.LINE_8, hierarchy, 100);
		      } */
    
    cv.imshow('canvasOutput', cv_src);
    
    
    /* image.src = canvas.toDataURL();
    image.height = 480;
    image.width = 640; */
  }



  video.addEventListener('click', snapshot, false);



  setInterval(function() {
    snapshot();
    console.log("tick");
  }, 1000);


  if (navigator.getUserMedia) {
    navigator.getUserMedia({
    // read more about camera settings here: https://webrtchacks.com/how-to-figure-out-webrtc-camera-resolutions/
         audio: false,
      	video: { width: 1280, height: 720 } 
      },
      function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.onloadedmetadata = function(e) {
          video.play();
        };
      },
      function(err) {
        console.log("The following error occured: " + err.name);
      }
    );
  } else {
    console.log("getUserMedia not supported");
  }

}


function getLargestContour(contours) {
	let max_area = 0;
  let max_area_contour = new cv.Mat();
  
  for (let i = 0; i < contours.size(); ++i) {
        let cnt = contours.get(i);
				let area = cv.contourArea(cnt, false);
        
			if(max_area < area)
      {
      	max_area = area;
        max_area_contour = cnt;
      }
  }
  
  return max_area_contour;
}