samples/hdr/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>OpenCV.js HDR by combining multiple exposure time photos</title>
  <link rel="stylesheet" href="../css/style.css">
</head>

<body>
  <div class="controls">
    <button id="start">🎬 Start camera</button>
  </div>
  <div>
    <video id="video-tag" width="240" height="180" autoplay></video>
  </div>
  <div class="media">
    <label for="exposure-slider">🔆 Exposure <output id="exposureTime-slider-value"></output>
      <input type="range" id="exposureTime-slider" min="0" max="0" style="display: block;">
    </label>
    <button id="takePhotoButton">📷 Take photo</button>
  </div>
  <div>
    <canvas id='outputCanvasLDR' width="240" height="180"></canvas>
    <p><button id="createHDRButton" onclick="createHDR()">✨ Create HDR</button></p>
  </div>
  <div>
    <canvas id='takePhotoCanvas1' width="240" height="180"></canvas>
    <canvas id='takePhotoCanvas2' width="240" height="180"></canvas>
    <canvas id='takePhotoCanvas3' width="240" height="180"></canvas>
    <canvas id='takePhotoCanvas4' width="240" height="180"></canvas>
    <br>
  </div>
  <script src="../../libs/adapter-latest.js"></script>
  <script src="../../libs/stats.min.js"></script>
  <script src="../../libs/dat.gui.min.js"></script>
  <script src="../../utils/utils.js"></script>
  <script>
    window.onload = () => {
      document.querySelector('#start').addEventListener('click', () => { startCamera() });
      document.querySelector('#takePhotoButton').addEventListener('click', () => { takePhoto() });

      addTextToCanvas('Photo 1', 'takePhotoCanvas1');
      addTextToCanvas('Photo 2 (tip: adjust exposure!)', 'takePhotoCanvas2');
      addTextToCanvas('Photo 3 (tip: adjust exposure again!)', 'takePhotoCanvas3');
      addTextToCanvas('Photo 4 (tip: adjust exposure again!)', 'takePhotoCanvas4');

      addTextToCanvas('Low Dynamic Range', 'outputCanvasLDR');
    };
  </script>
  <script>
    var featuresReady = checkFeatures(document.getElementById("info"), {
      webrtc: true
      // FIXME: Wasm
      // wasm: true
    });
  </script>
  <script src="js/index.js"></script>
  <!--
  <script>
    // FIXME: Wasm
    var Module = {
      wasmBinaryFile: '../../build/wasm/opencv_js.wasm',
      _main: function () {
        opencvIsReady();
      }
    };
  </script>
  <script async src="../../build/wasm/opencv.js"></script>
  -->
  <script async src="../../build/wasm/desktop/opencv.js" onload="opencvIsReady()"></script>
</body>

</html>