examples/electron/renderer/demos/color-stream-bgra32.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">Color Stream (BGRA32)</h1>
      <button onclick="require('electron').remote.getCurrentWebContents().openDevTools()">open dev tools</button>
    </div>
    <p>
      This demo shows the color stream (BGRA32) 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="outputCanvas" class="img-fluid"></canvas>
    <script>
      {
        const KinectAzure = require('kinect-azure');
        const kinect = new KinectAzure();
        const $info = document.getElementById('info');

        const $outputCanvas = document.getElementById('outputCanvas'),
          outputCtx = $outputCanvas.getContext('2d');
        let outputImageData;

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

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

            kinect.startCameras({
              color_format: KinectAzure.K4A_IMAGE_FORMAT_COLOR_BGRA32,
              color_resolution: KinectAzure.K4A_COLOR_RESOLUTION_1080P,
              camera_fps: KinectAzure.K4A_FRAMES_PER_SECOND_30
            });

            kinect.startListening((data) => {
              $info.textContent = ` ${data.colorImageFrame.width}x${data.colorImageFrame.height}`;
              if (!outputImageData && data.colorImageFrame.width > 0) {
                $outputCanvas.width = data.colorImageFrame.width;
                $outputCanvas.height = data.colorImageFrame.height;
                outputImageData = outputCtx.createImageData($outputCanvas.width, $outputCanvas.height);
              }
              if (outputImageData) {
                renderBGRA32ColorFrame(outputCtx, outputImageData, data.colorImageFrame);
              }
            });
          }
        };

        const renderBGRA32ColorFrame = (ctx, canvasImageData, imageFrame) => {
          const newPixelData = Buffer.from(imageFrame.imageData);
          const pixelArray = canvasImageData.data;
          for (let i = 0; i < canvasImageData.data.length; i+=4) {
            pixelArray[i] = newPixelData[i+2];
            pixelArray[i+1] = newPixelData[i+1];
            pixelArray[i+2] = newPixelData[i];
            pixelArray[i+3] = 0xff;
          }
          ctx.putImageData(canvasImageData, 0, 0);
        };

        // 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>