!7

cm WebCamDemo > DynPrintLog {

  !include #1029545 // API for Eleu

  O html(IWebRequest request) {

    //ret "URI: " + request.uri();

    ret hsansserif() + hfullcenter(p("WebCam Preview")

      + hfulltag video("", autoplay := true, id := "webcamPreview",

          style := "width: 600px; height: 400px; border: 5px solid red;")

      + tag table(tr(

      td(p("Snapshot 1 " + hbutton("Grab", onclick := "snapshot(document.getElementById('snapshotCanvas1'))"))

      + hfulltag canvas("", id := "snapshotCanvas1", width := 300, height := 200, style := "border: 3px solid green;"))

      + td(p("Snapshot 2 " + hbutton("Grab", onclick := "snapshot(document.getElementById('snapshotCanvas2'))"))

      + hfulltag canvas("", id := "snapshotCanvas2", width := 300, height := 200, style := "border: 3px solid green;"))

      + td(p("Diff snapshots " + hbutton("Perform", onclick := "analysis()"))

      + hfulltag canvas("", id := "analysisCanvas", width := 300, height := 200, style := "border: 3px solid green;"))))

    ) + hscript([[

        var video = document.querySelector("#webcamPreview");

        if (navigator.mediaDevices.getUserMedia) {

          navigator.mediaDevices.getUserMedia({ video: true })

            .then(function (stream) {

              video.srcObject = stream;

              getVideoSize();

            })

            .catch(function (err0r) {

              console.log("Something went wrong: " + err0r);

            });

        };

        async function getVideoSize() {

          await new Promise(resolve => video.onloadedmetadata = resolve);

          console.log(`video size: ${video.videoWidth}x${video.videoHeight}`);

        }

        var snapshotW, snapshotH;

        function snapshot(canvas) {

          var w = video.videoWidth, h = video.videoHeight;

          var w2 = canvas.width, h2 = canvas.height;

          if (w/h > w2/h2)

            h2 = Math.round(h*w2/w);

          else

            w2 = Math.round(w*h2/h);

          snapshotW = w2; snapshotH = h2;

          canvas.getContext("2d").drawImage(video, 0, 0, w2, h2);

          canvas.grabbed = true;

          avgBrightness(canvas);

        }

        function avgBrightness(canvas) {

          var imageData = canvas.getContext("2d").getImageData(0, 0, snapshotW, snapshotH);

          var pixels = imageData.data;

          var sum = 0;

          for (var i = 0, il = pixels.length; i < il; i += 4) {

            sum += pixels[i]+pixels[i+1]+pixels[i+2];

          }

          console.log("Brightness: " + sum/(snapshotW*snapshotH*255*3)*100);

        }

        function analysis() {

          if (!document.getElementById('snapshotCanvas1').grabbed)

            snapshot(document.getElementById('snapshotCanvas1'));

          snapshot(document.getElementById('snapshotCanvas2'));

          var canvas1 = document.getElementById("snapshotCanvas1");

          var canvasCtx1 = canvas1.getContext("2d");

          var canvas2 = document.getElementById("snapshotCanvas2");

          var canvasCtx2 = canvas2.getContext("2d");

          var canvasOut = document.getElementById("analysisCanvas");

          var canvasCtxOut = canvasOut.getContext("2d");

          var size = snapshotW*snapshotH;

          var pixels = new Uint8ClampedArray(size*4);

          var pixels1 = canvasCtx1.getImageData(0, 0, snapshotW, snapshotH).data;

          var pixels2 = canvasCtx2.getImageData(0, 0, snapshotW, snapshotH).data;

          for (var i = 0; i < size*4; i++) {

            if ((i & 3) == 3)

              pixels[i] = 255; // alpha

            else

              pixels[i] = 128+(pixels2[i]-pixels1[i])*0.5;

          }

          var palette = canvasCtxOut.getImageData(0, 0, snapshotW, snapshotH);

          palette.data.set(pixels);

          canvasCtxOut.putImageData(palette, 0, 0);

        }

     ]]);

  }

}