examples/electron/renderer/demos/depth-stream-wfov-greyscale.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kinect Azure Example</title>
    <link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/docs.min.css">
  </head>
  <body class="container-fluid py-3">
    <div class="d-flex align-items-baseline justify-content-between">
      <h1 class="bd-title">Depth Stream (wfov, greyscale)</h1>
      <button onclick="require('electron').remote.getCurrentWebContents().openDevTools()">open dev tools</button>
    </div>
    <p>
      This demo shows the wide-field-of-view depth stream in an html canvas element. Note that the canvas tag in this demo is resized through css to fit the window. The native image size in this demo is <span id="info">different</span>.
    </p>
    <canvas id="depthCanvas" class="img-fluid"></canvas>
    <script>
      {
        const KinectAzure = require('kinect-azure');
        const kinect = new KinectAzure();
        const $info = document.getElementById('info');

        const $depthCanvas = document.getElementById('depthCanvas'),
          depthCtx = $depthCanvas.getContext('2d');
        let depthImageData;

        const init = () => {
          startKinect();
        };

        const startKinect = () => {
          if(kinect.open()) {

            const depthMode = KinectAzure.K4A_DEPTH_MODE_WFOV_UNBINNED;

            kinect.startCameras({
              depth_mode: depthMode,
              camera_fps: KinectAzure.K4A_FRAMES_PER_SECOND_15
            });
            const depthModeRange = kinect.getDepthModeRange(depthMode);

            kinect.startListening((data) => {
              $info.textContent = ` ${data.depthImageFrame.width}x${data.depthImageFrame.height}`;
              if (!depthImageData && data.depthImageFrame.width > 0) {
                $depthCanvas.width = data.depthImageFrame.width;
                $depthCanvas.height = data.depthImageFrame.height;
                depthImageData = depthCtx.createImageData($depthCanvas.width, $depthCanvas.height);
              }
              if (depthImageData) {
                renderDepthFrameAsGreyScale(depthCtx, depthImageData, data.depthImageFrame, depthModeRange);
              }
            });
          }
        };

        const renderDepthFrameAsGreyScale = (ctx, canvasImageData, imageFrame, depthModeRange) => {
          const newPixelData = Buffer.from(imageFrame.imageData);
          const pixelArray = canvasImageData.data;
          let depthPixelIndex = 0;
          for (let i = 0; i < canvasImageData.data.length; i+=4) {
            const depthValue = newPixelData[depthPixelIndex+1] << 8 | newPixelData[depthPixelIndex];
            const normalizedValue = map(depthValue, depthModeRange.min, depthModeRange.max, 255, 0);
            pixelArray[i] = normalizedValue;
            pixelArray[i+1] = normalizedValue;
            pixelArray[i+2] = normalizedValue;
            pixelArray[i+3] = 0xff;
            depthPixelIndex += 2;
          }
          ctx.putImageData(canvasImageData, 0, 0);
        };

        const map = (value, inputMin, inputMax, outputMin, outputMax) => {
          return (value - inputMin) * (outputMax - outputMin) / (inputMax - inputMin) + outputMin;
        };

        /**
         * https://gist.github.com/mjackson/5311256
         * Converts an HSV color value to RGB. Conversion formula
         * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
         * Assumes h, s, and v are contained in the set [0, 1] and
         * returns r, g, and b in the set [0, 255].
         *
         * @param   Number  h       The hue
         * @param   Number  s       The saturation
         * @param   Number  v       The value
         * @return  Array           The RGB representation
         */
        const hsvToRgb = (h, s, v) => {
          let r, g, b;

          const i = Math.floor(h * 6);
          const f = h * 6 - i;
          const p = v * (1 - s);
          const q = v * (1 - f * s);
          const t = v * (1 - (1 - f) * s);

          switch (i % 6) {
            case 0: r = v, g = t, b = p; break;
            case 1: r = q, g = v, b = p; break;
            case 2: r = p, g = v, b = t; break;
            case 3: r = p, g = q, b = v; break;
            case 4: r = t, g = p, b = v; break;
            case 5: r = v, g = p, b = q; break;
          }

          return [ r * 255, g * 255, b * 255 ];
        }

        // expose the kinect instance to the window object in this demo app to allow the parent window to close it between sessions
        window.kinect = kinect;
        init();
      }
    </script>
  </body>
</html>