Start making it more robust

- Use structured data for search/render
- Start testing component
- Start testing domain logic

assets/js/barcode-scanner.js

@@ -13,7 +13,7 @@ export default {
   async mounted() {
     const detectedBarcodes = new Set([]);
     const barcodeDetector = await barcodeReaderSetup();
-    const video = this.el;
+    this.cameraPreview = this.el.querySelector("#camera-preview");
     const constraints = {
       audio: false,
       video: {
@@ -27,17 +27,17 @@ export default {
       .getUserMedia(constraints)
       .then((mediaStream) => {
         console.debug("Camera access allowed")
-        this.pushEventTo(video, "camera:allowed", {});
-        video.srcObject = mediaStream;
-        video.onloadedmetadata = () => {
-          video.play();
+        this.pushEventTo(this.cameraPreview, "camera_allowed", {});
+        this.cameraPreview.srcObject = mediaStream;
+        this.cameraPreview.onloadedmetadata = () => {
+          this.cameraPreview.play();
           this.scanInterval = window.setInterval(async () => {
-            const barcodes = await barcodeDetector.detect(video);
+            const barcodes = await barcodeDetector.detect(this.cameraPreview);
             if (barcodes.length <= 0) return;
 
             barcodes.forEach(barcode => {
               if (!detectedBarcodes.has(barcode.rawValue)) {
-                this.pushEventTo(video, "barcode:scanned", { number: barcode.rawValue });
+                this.pushEventTo(this.cameraPreview, "barcode_scanned", { number: barcode.rawValue });
                 detectedBarcodes.add(barcode.rawValue);
               };
             });
@@ -46,11 +46,11 @@ export default {
       })
       .catch((err) => {
         console.error(`${err.name}: ${err.message}`);
-        this.pushEventTo(video, "camera:denied", {});
+        this.pushEventTo(this.cameraPreview, "camera_denied", {});
       });
   },
   destroyed() {
-    this.el.srcObject.getTracks().forEach(track => track.stop());
+    this.cameraPreview.srcObject.getTracks().forEach(track => track.stop());
     window.clearInterval(this.scanInterval);
   }
 }