Open scan modal, handle permissions, open/close video preview

assets/js/app.js

@@ -30,7 +30,7 @@ let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
-  hooks: { Hooks }
+  hooks: Hooks
 })
 
 // Show progress bar on live navigation and form submits

assets/js/barcode-scanner.js

@@ -19,6 +19,29 @@ const barcodeTest = async function () {
 
 export default {
   mounted() {
-    console.log(this.el);
+    const video = this.el;
+    const constraints = {
+      audio: false,
+      video: { width: 800, height: 600 },
+    };
+
+    navigator.mediaDevices
+      .getUserMedia(constraints)
+      .then((mediaStream) => {
+        console.debug("Camera access allowed")
+        this.pushEventTo(video, "camera:allowed", {});
+        console.log(mediaStream);
+        video.srcObject = mediaStream;
+        video.onloadedmetadata = () => {
+          video.play();
+        };
+      })
+      .catch((err) => {
+        console.error(`${err.name}: ${err.message}`);
+        this.pushEventTo(video, "camera:denied", {});
+      });
+  },
+  destroyed() {
+    this.el.srcObject.getTracks().forEach(track => track.stop());
   }
 }