samples/docScanner/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Document scanning</title>
  <link href="../css/base.css" rel="stylesheet" type="text/css">
  <link href="../css/camera-bar.css" rel="stylesheet" type="text/css">
  <link href="../css/settings.css" rel="stylesheet" type="text/css">
  <link href="../css/google-icons.css" rel="stylesheet">
</head>

<body>
  <p id="errorMessage" class="err centered"></p>
  <div id="mainContent" class="hidden centered">
    <div class="canvas-wrapper">
      <canvas id="canvasOutput" class="canvas-big"></canvas>
    </div>

    <div class="camera-bar-wrapper">
      <ul id="cameraBar">
        <li class="camera-bar-item bar-with-one-item">
          <div class="take-photo-wrapper">
            <button id="takePhotoButton" class="camera-bar-icon material-icons" disabled>photo_camera</button>
          </div>
        </li>
      </ul>
    </div>

    <div class="threshold-block-size centered hidden">
      <label for="thresholdBlockSize">Threshold BlockSize:
        <output id="thresholdBlockSizeOutput">9</output> pixels &nbsp;</label>
      <input type="range" id="thresholdBlockSize" value="9" min="3" max="99" step="2">
    </div>

    <div class="threshold-offset centered hidden">
      <label for="thresholdOffset">Threshold Offset:
        <output id="thresholdOffsetOutput">10</output> pixels &nbsp;</label>
      <input type="range" id="thresholdOffset" value="100" min="-10" max="25" step="0.5">
    </div>
  </div>

  <video id="videoInput" class="hidden"></video>

  <script src="../../utils/utils.js" type="text/javascript"></script>
  <script src="../../utils/statsInit.js" type="text/javascript"></script>
  <script src="js/docProcessing.js" type="text/javascript"></script>
  <script src="js/index.js" type="text/javascript"></script>
</body>

</html>