save

alexfauquette · Mar 2, 2024 · 5037131 · 5037131
1 parent 1afc958
commit 5037131
Showing 1 changed file with 132 additions and 73 deletions.
diff --git a/src/test.html b/src/test.html
@@ -2,87 +2,146 @@
 <html>
   <head>
     <script type="module">
-// WICG Shape Detection API
-// - https://wicg.github.io/shape-detection-api/
-try {
-  const start = document.getElementById("start");
-  const video = document.getElementById("video");
-  const result = document.getElementById("result");
-  const result2 = document.getElementById("result2");
-  const interm = document.getElementById("interm");
-  const error = document.getElementById("error");
-  const canvas1 = document.getElementById("canvas1");
-
-  const bd = new BarcodeDetector();
-  (async () => {
-    // It works on chrome on Android (chrome://flags Experimental Web Platform features)
-    //NOTE: Not implemented yet: chrome canary 84 on macos
-    result.textContent = (await BarcodeDetector.getSupportedFormats()).join("\n");
-  })().catch(err => {
-    result.textContent = err;
-  });
-
-  function reshape(video) {
-        var w = video.videoWidth;
-        var h = video.videoHeight;
-
-
-        interm.textContent = JSON.stringify({
-            video: {
-                x:0, y:(h-h%2)/2, w, h:(w-w%10)/10, 
+      // WICG Shape Detection API
+      // - https://wicg.github.io/shape-detection-api/
+      try {
+        const start = document.getElementById("start");
+        const video = document.getElementById("video");
+
+        const bd = new BarcodeDetector();
+
+        const seen = {}(async () => {
+          // It works on chrome on Android (chrome://flags Experimental Web Platform features)
+          //NOTE: Not implemented yet: chrome canary 84 on macos
+          result.textContent = (
+            await BarcodeDetector.getSupportedFormats()
+          ).join("\n");
+        })().catch((err) => {
+          result.textContent = err;
+        });
+
+        function reshape(video) {
+          var w = video.videoWidth;
+          var h = video.videoHeight;
+
+          interm.textContent = JSON.stringify(
+            {
+              video: {
+                x: 0,
+                y: (h - (h % 2)) / 2,
+                w,
+                h: (w - (w % 10)) / 10,
+              },
+              canvas: {
+                x: 0,
+                y: 0,
+                w: 500,
+                h: 50,
+              },
             },
-            canvas:{
-               x: 0, y:0, w:500, h:50
+            null,
+            2,
+          );
+          var ctx = canvas1.getContext("2d");
+          ctx.drawImage(
+            video,
+            0,
+            (h - (h % 2)) / 2,
+            w,
+            (w - (w % 10)) / 10,
+            0,
+            0,
+            500,
+            50,
+          );
+          return canvas1;
+        }
+
+        let lastValue = "";
+        let valueCount = 0;
+
+        const capture = async () => {
+          try {
+            const barcodes = await bd.detect(video);
+            const value = barcodes.find(({ format }) => format === "ean_13");
+
+            if (value !== null) {
+              if (lastValue === value) {
+                valueCount += 1;
+              } else {
+                lastValue = value;
+                valueCount = 1;
+              }
+            }
+            result.textContent = `${lastValue} (${valueCount})`;
+
+            if (valueCount === 3 && !seen[value]) {
+              const w = video.videoWidth;
+              const h = video.videoHeight;
+              const imgCanvas = document.createElement("canvas");
+              const imgContext = imgCanvas.getContext("2d");
+
+              // canvas size = image size
+              imgCanvas.width = w;
+              imgCanvas.height = h;
+
+              // draw image
+              imgContext.drawImage(video, 0, 0, w, h);
+
+              // image to base64
+              imageSrc = imgCanvas.toDataURL("image/png");
+
+              // localStorage.setItem(code, imageSrc);
+
+              const img = document.createElement("img");
+              img.src = imageSrc;
+
+              const container = document.getElementById("seen");
+              container.appendChild(img);
             }
-        }, null, 2)        
-        var ctx = canvas1.getContext('2d');
-        ctx.drawImage(video, 0, (h-h%2)/2, w, (w-w%10)/10, 0, 0, 500, 50);
-        return canvas1;
-    }
-  const capture = async () => {
-    try {
-      const barcodes = await bd.detect(video);
-      const log = barcodes.map(({format, rawValue}) => `- ${format}: ${rawValue}`).join("\n");
-      result.textContent = log;
-
-      const barcodes2 = await bd.detect(reshape(video));
-      const log2 = barcodes2.map(({format, rawValue}) => `- ${format}: ${rawValue}`).join("\n");
-      result2.textContent = log2;
-      requestAnimationFrame(capture);
-    } catch (err) {
-        error.textContent=err
-      console.error(err);
-    }
-  };
-
-  video.addEventListener("play", () => capture());
-
-  start.addEventListener("click", () => {
-    start.disabled = true;
-    (async () => {
-      const media = await navigator.mediaDevices.getUserMedia(
-        {auido: false, video: {
-          //NOTE: crash on android  chrome when specified the size
-          //width: {ideal: 800}, height: {ideal: 800},
-          facingMode: "environment"}});
-      //console.log(media);
-      video.srcObject = media;
-      video.autoplay = true;
-    })().catch(console.error);
-  }, {once: true});
-
-} catch (err) {
-  document.getElementById("result").textContent = err;
-}
+
+            requestAnimationFrame(capture);
+          } catch (err) {
+            error.textContent = err;
+            console.error(err);
+          }
+        };
+
+        video.addEventListener("play", () => capture());
+
+        start.addEventListener(
+          "click",
+          () => {
+            start.disabled = true;
+            (async () => {
+              const media = await navigator.mediaDevices.getUserMedia({
+                auido: false,
+                video: {
+                  //NOTE: crash on android  chrome when specified the size
+                  //width: {ideal: 800}, height: {ideal: 800},
+                  facingMode: "environment",
+                },
+              });
+              video.srcObject = media;
+              video.autoplay = true;
+            })().catch(console.error);
+          },
+          { once: true },
+        );
+      } catch (err) {
+        document.getElementById("result").textContent = err;
+      }
     </script>
   </head>
   <body>
     BarcodeDetector demo: <button id="start">start</button>
-    <div><video id="video" autoplay></div>
+    <div><video id="video" autoplay></video></div>
+    <!--
     <pre id="result"></pre>
     <pre id="interm"></pre>
     <pre id="error"></pre>
-    <canvas id="canvas1" width="500" height="50" style="background-color: green;"></canvas>
     <pre id="result2"></pre>
+  -->
+    <div id="seen"></div>
   </body>
-</html>
+</html>