From b66f59eedcfde26c0c77842fb1dddcce0d7e687b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20B=C3=B6hm?= <spaceman78@gmx.de>
Date: Wed, 27 May 2026 00:46:52 +0200
Subject: [PATCH] Added qr scanner

---
 .../controllers/scanner_controller.js         | 92 +++++++++++--------
 app/views/items/_search_bar.html.erb          |  5 +-
 app/views/layouts/application.html.erb        | 29 +++---
 config/importmap.rb                           |  1 +
 vendor/javascript/qr-scanner.js               |  4 +
 5 files changed, 76 insertions(+), 55 deletions(-)
 create mode 100644 vendor/javascript/qr-scanner.js

diff --git a/app/javascript/controllers/scanner_controller.js b/app/javascript/controllers/scanner_controller.js
index 69102ae..a5f35c7 100644
--- a/app/javascript/controllers/scanner_controller.js
+++ b/app/javascript/controllers/scanner_controller.js
@@ -1,58 +1,78 @@
 import { Controller } from "@hotwired/stimulus";
+import QrScanner from "qr-scanner"; // Importiert das saubere, einzelne Modul
 
 export default class extends Controller {
   static targets = ["input", "preview", "modal"];
 
   connect() {
-    this.html5QrCode = null;
+    this.qrScanner = null;
   }
 
   // Öffnet das Modal und startet den Kamera-Stream
   startCamera(event) {
     event.preventDefault();
 
-    // Modal anzeigen
+    // 1. Modal anzeigen
     this.modalTarget.classList.remove("hidden");
 
-    // Neue Instanz auf dem Preview-Div mit der ID des Elements erzeugen
-    this.html5QrCode = new Html5Qrcode(this.previewTarget.id);
+    // 2. Ein HTML5 <video> Element holen oder erstellen (wird für den Stream gebraucht)
+    const videoElement = this.previewTarget.querySelector("video") || this.createVideoElement();
 
-    // FPS-Rate und Scan-Rahmen (250x250px) festlegen
-    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
+    // 3. Scanner initialisieren
+    this.qrScanner = new QrScanner(
+      videoElement,
+      (result) => {
+        // SUCCESS: Code erkannt!
+        this.handleScanSuccess(result.data);
+      },
+      {
+        onDecodeError: (error) => { /* Loop-Fehler während der Suche ignorieren */ },
+        highlightScanRegion: true, // Zeichnet einen schicken gelben/grünen Scan-Rahmen ins Bild
+        highlightCodeOutline: true,
+        maxScansPerSecond: 10
+      }
+    );
 
-    this.html5QrCode
-      .start(
-        { facingMode: "environment" }, // Erzwingt die rückseitige Hauptkamera bei Handys
-        config,
-        (decodedText, decodedResult) => {
-          // SUCCESS: Code erkannt!
-          this.inputTarget.value = decodedText; // Trägt die ID (z.B. 10024) ins Textfeld ein
-
-          // NEU: Simuliert das Tippen, damit dein search-form Controller die Live-Suche sofort startet!
-          this.inputTarget.dispatchEvent(new Event("input", { bubbles: true }));
-
-          this.stopCamera(); // Stoppt die Kamera und schließt das Fenster
-        },
-        (errorMessage) => {
-          // Kontinuierlicher Scan-Loop (Fehler ignorieren, wenn kein QR-Code im Bild ist)
-        },
-      )
-      .catch((err) => {
-        console.error("Kamera-Zugriff verweigert oder blockiert:", err);
-      });
+    // 4. Kamera starten
+    this.qrScanner.start().catch((err) => {
+      alert("Kamera-Zugriff verweigert, blockiert oder unverschlüsselte Verbindung!");
+      console.error("Kamera-Fehler:", err);
+      this.modalTarget.classList.add("hidden");
+    });
   }
 
-  // Schließt das Modal und beendet den Stream sauber
+  // Verarbeitet die gescannte ID und startet das search-form
+  handleScanSuccess(decodedText) {
+    this.inputTarget.value = decodedText;
+
+    // Simuliert das Tippen für deinen Live-Filter
+    this.inputTarget.dispatchEvent(new Event("input", { bubbles: true }));
+
+    this.stopCamera();
+  }
+
+  // Beendet den Stream sauber und schließt das Fenster
   stopCamera() {
-    if (this.html5QrCode && this.html5QrCode.isScanning) {
-      this.html5QrCode
-        .stop()
-        .then(() => {
-          this.modalTarget.classList.add("hidden");
-        })
-        .catch((err) => console.error("Fehler beim Beenden des Streams:", err));
-    } else {
-      this.modalTarget.classList.add("hidden");
+    if (this.qrScanner) {
+      this.qrScanner.stop();
+      this.qrScanner.destroy();
+      this.qrScanner = null;
     }
+    this.modalTarget.classList.add("hidden");
+  }
+
+  // Hilfsmethode: Erstellt das Video-Tag im Vorschau-Fenster
+  createVideoElement() {
+    const video = document.createElement("video");
+    video.autoplay = true;
+    video.muted = true;
+    video.playsInline = true;
+    video.className = "w-full h-full object-cover rounded-xl";
+    this.previewTarget.appendChild(video);
+    return video;
+  }
+
+  disconnect() {
+    this.stopCamera();
   }
 }
diff --git a/app/views/items/_search_bar.html.erb b/app/views/items/_search_bar.html.erb
index 708e7a5..ab7a2a9 100644
--- a/app/views/items/_search_bar.html.erb
+++ b/app/views/items/_search_bar.html.erb
@@ -40,7 +40,10 @@
             <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
           </button>
         </div>
-        <div id="search-reader" data-scanner-target="preview" class="w-full aspect-square rounded-xl overflow-hidden border border-gray-200 bg-gray-50"></div>
+        <!-- DAS VORSCHAUFENSTER FÜR DIE KAMERA IN DEINER _search_bar.html.erb -->
+        <div data-scanner-target="preview" class="w-full aspect-square rounded-xl overflow-hidden border border-gray-200 bg-gray-50 flex items-center justify-center">
+          <!-- Das <video>-Tag wird von Stimulus hier automatisch injiziert -->
+        </div>
         <p class="text-xs text-gray-500 text-center">Halte den QR-Code des Geräts ruhig in den Scan-Rahmen.</p>
       </div>
     </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index f29f444..c9a97ec 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -4,7 +4,7 @@
     <title><%= content_for(:title) || "Vault171" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="application-name" content="Vault17">
+    <meta name="application-name" content="Vault171">
     <meta name="mobile-web-app-capable" content="yes">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
@@ -75,9 +75,10 @@
             <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
             <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Wareneingang</span>
           <% end %>
-
           <%= link_to categories_path, class: nav_link_class("categories") do %>
-            <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621 Clyde5.04 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>
+            <svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-19.5 0A2.25 2.25 0 0 0 2.25 15v2.25m0-4.5A2.25 2.25 0 0 1 4.5 12h15a2.25 2.25 0 0 1 2.25 2.25m-19.5 0v4.5A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V15M2.25 12V6a2.25 2.25 0 0 1 2.25-2.25h2.25c.59 0 1.157.234 1.576.652L9.75 5.85a2.25 2.25 0 0 0 1.576.652h6.924a2.25 2.25 0 0 1 2.25 2.25v3.25" />
+            </svg>
             <span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Kategorien</span>
           <% end %>
         </nav>
@@ -110,11 +111,11 @@
 
       </aside>
 
-      <!-- HAUPTBEREICH (Inhaltsfläche rückt bei verkleinerter Sidebar nach) -->
-      <div class="main-content flex-1 flex flex-col min-h-screen w-full transition-all duration-300 ease-in-out pl-0 md:pl-64">
+      <!-- HAUPTBEREICH (Fixiert die Gesamthöhe auf den Bildschirm und steuert das Scrollen intern) -->
+      <div class="main-content flex-1 flex flex-col h-screen w-full transition-all duration-300 ease-in-out pl-0 md:pl-64 overflow-hidden">
 
-        <!-- OBERE LEISTE (Top Bar) -->
-        <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 md:px-6 sticky top-0 z-30">
+        <!-- OBERE LEISTE (Bleibt durch 'sticky' oben, da der umschließende Container nicht mehr mitwächst) -->
+        <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 md:px-6 sticky top-0 z-30 shrink-0">
           <div class="flex items-center gap-3">
             <!-- BURGER BUTTON (Nur mobil sichtbar) -->
             <label for="mobile-sidebar-toggle" class="md:hidden p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition cursor-pointer">
@@ -127,21 +128,13 @@
           </div>
         </header>
 
-        <!-- INHALT DER JEWEILIGEN VIEW -->
-        <main class="p-4 md:p-6 flex-1 w-full mx-auto px-4 md:px-8">
-          <!-- Platzhalter für Flash-Meldungen (z.B. erfolgreiches Speichern)
-          <% flash.each do |type, message| %>
-            <div class="mb-4 p-4 text-sm rounded-lg border <%= type == 'notice' ? 'bg-green-50 text-green-800 border-green-200' : 'bg-red-50 text-red-800 border-red-200' %>">
-              <%= message %>
-            </div>
-          <% end %>
--->
-          <%= render "layouts/flash" %>
+        <%= render "layouts/flash" %>
 
+        <!-- INHALTSFLÄCHE (Nur dieser Bereich scrollt jetzt flexibel nach unten weg!) -->
+        <main class="p-4 md:p-6 flex-1 w-full mx-auto px-4 md:px-8 overflow-y-auto bg-gray-50/30">
           <%= yield %>
         </main>
       </div>
-    </div>
 
     <!-- Globaler Platzhalter für das optionale Turbo-Frame-Modal (z.B. neue Personen anlegen) -->
     <%= turbo_frame_tag "modal" %>
diff --git a/config/importmap.rb b/config/importmap.rb
index 909dfc5..94ac94e 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -5,3 +5,4 @@ pin "@hotwired/turbo-rails", to: "turbo.min.js"
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "qr-scanner" # @1.4.2
diff --git a/vendor/javascript/qr-scanner.js b/vendor/javascript/qr-scanner.js
new file mode 100644
index 0000000..5f4e034
--- /dev/null
+++ b/vendor/javascript/qr-scanner.js
@@ -0,0 +1,4 @@
+// qr-scanner@1.4.2 downloaded from https://ga.jspm.io/npm:qr-scanner@1.4.2/qr-scanner.min.js
+
+class e{constructor(t,i,a,s,n){this._legacyCanvasSize=e.DEFAULT_CANVAS_SIZE;this._preferredCamera="environment";this._maxScansPerSecond=25;this._lastScanTimestamp=-1;this._destroyed=this._flashOn=this._paused=this._active=!1;this.$video=t;this.$canvas=document.createElement("canvas");a&&"object"===typeof a?this._onDecode=i:(a||s||n?console.warn("You're using a deprecated version of the QrScanner constructor which will be removed in the future"):console.warn("Note that the type of the scan result passed to onDecode will change in the future. To already switch to the new api today, you can pass returnDetailedScanResult: true."),this._legacyOnDecode=i);i="object"===typeof a?a:{};this._onDecodeError=i.onDecodeError||("function"===typeof a?a:this._onDecodeError);this._calculateScanRegion=i.calculateScanRegion||("function"===typeof s?s:this._calculateScanRegion);this._preferredCamera=i.preferredCamera||n||this._preferredCamera;this._legacyCanvasSize="number"===typeof a?a:"number"===typeof s?s:this._legacyCanvasSize;this._maxScansPerSecond=i.maxScansPerSecond||this._maxScansPerSecond;this._onPlay=this._onPlay.bind(this);this._onLoadedMetaData=this._onLoadedMetaData.bind(this);this._onVisibilityChange=this._onVisibilityChange.bind(this);this._updateOverlay=this._updateOverlay.bind(this);t.disablePictureInPicture=!0;t.playsInline=!0;t.muted=!0;let r=!1;t.hidden&&(t.hidden=!1,r=!0);document.body.contains(t)||(document.body.appendChild(t),r=!0);a=t.parentElement;if(i.highlightScanRegion||i.highlightCodeOutline){s=!!i.overlay;this.$overlay=i.overlay||document.createElement("div");n=this.$overlay.style;n.position="absolute";n.display="none";n.pointerEvents="none";this.$overlay.classList.add("scan-region-highlight");if(!s&&i.highlightScanRegion){this.$overlay.innerHTML='<svg class="scan-region-highlight-svg" viewBox="0 0 238 238" preserveAspectRatio="none" style="position:absolute;width:100%;height:100%;left:0;top:0;fill:none;stroke:#e9b213;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"><path d="M31 2H10a8 8 0 0 0-8 8v21M207 2h21a8 8 0 0 1 8 8v21m0 176v21a8 8 0 0 1-8 8h-21m-176 0H10a8 8 0 0 1-8-8v-21"/></svg>';try{this.$overlay.firstElementChild.animate({transform:["scale(.98)","scale(1.01)"]},{duration:400,iterations:Infinity,direction:"alternate",easing:"ease-in-out"})}catch(t){}a.insertBefore(this.$overlay,this.$video.nextSibling)}i.highlightCodeOutline&&(this.$overlay.insertAdjacentHTML("beforeend",'<svg class="code-outline-highlight" preserveAspectRatio="none" style="display:none;width:100%;height:100%;fill:none;stroke:#e9b213;stroke-width:5;stroke-dasharray:25;stroke-linecap:round;stroke-linejoin:round"><polygon/></svg>'),this.$codeOutlineHighlight=this.$overlay.lastElementChild)}this._scanRegion=this._calculateScanRegion(t);requestAnimationFrame((()=>{let i=window.getComputedStyle(t);"none"===i.display&&(t.style.setProperty("display","block","important"),r=!0);"visible"!==i.visibility&&(t.style.setProperty("visibility","visible","important"),r=!0);r&&(console.warn("QrScanner has overwritten the video hiding style to avoid Safari stopping the playback."),t.style.opacity="0",t.style.width="0",t.style.height="0",this.$overlay&&this.$overlay.parentElement&&this.$overlay.parentElement.removeChild(this.$overlay),delete this.$overlay,delete this.$codeOutlineHighlight);this.$overlay&&this._updateOverlay()}));t.addEventListener("play",this._onPlay);t.addEventListener("loadedmetadata",this._onLoadedMetaData);document.addEventListener("visibilitychange",this._onVisibilityChange);window.addEventListener("resize",this._updateOverlay);this._qrEnginePromise=e.createQrEngine()}static set WORKER_PATH(t){console.warn("Setting QrScanner.WORKER_PATH is not required and not supported anymore. Have a look at the README for new setup instructions.")}static async hasCamera(){try{return!!(await e.listCameras(!1)).length}catch(t){return!1}}static async listCameras(t=!1){if(!navigator.mediaDevices)return[];let i,b=async()=>(await navigator.mediaDevices.enumerateDevices()).filter((t=>"videoinput"===t.kind));try{t&&(await b()).every((t=>!t.label))&&(i=await navigator.mediaDevices.getUserMedia({audio:!1,video:!0}))}catch(t){}try{return(await b()).map(((t,i)=>({id:t.deviceId,label:t.label||(0===i?"Default Camera":`Camera ${i+1}`)})))}finally{i&&(console.warn("Call listCameras after successfully starting a QR scanner to avoid creating a temporary video stream"),e._stopVideoStream(i))}}async hasFlash(){let t;try{if(this.$video.srcObject){if(!(this.$video.srcObject instanceof MediaStream))return!1;t=this.$video.srcObject}else t=(await this._getCameraStream()).stream;return"torch"in t.getVideoTracks()[0].getSettings()}catch(t){return!1}finally{t&&t!==this.$video.srcObject&&(console.warn("Call hasFlash after successfully starting the scanner to avoid creating a temporary video stream"),e._stopVideoStream(t))}}isFlashOn(){return this._flashOn}async toggleFlash(){this._flashOn?await this.turnFlashOff():await this.turnFlashOn()}async turnFlashOn(){if(!this._flashOn&&!this._destroyed&&(this._flashOn=!0,this._active&&!this._paused))try{if(!await this.hasFlash())throw"No flash available";await this.$video.srcObject.getVideoTracks()[0].applyConstraints({advanced:[{torch:!0}]})}catch(t){throw this._flashOn=!1,t}}async turnFlashOff(){this._flashOn&&(this._flashOn=!1,await this._restartVideoStream())}destroy(){this.$video.removeEventListener("loadedmetadata",this._onLoadedMetaData);this.$video.removeEventListener("play",this._onPlay);document.removeEventListener("visibilitychange",this._onVisibilityChange);window.removeEventListener("resize",this._updateOverlay);this._destroyed=!0;this._flashOn=!1;this.stop();e._postWorkerMessage(this._qrEnginePromise,"close")}async start(){if(this._destroyed)throw Error("The QR scanner can not be started as it had been destroyed.");if((!this._active||this._paused)&&("https:"!==window.location.protocol&&console.warn("The camera stream is only accessible if the page is transferred via https."),this._active=!0,!document.hidden))if(this._paused=!1,this.$video.srcObject)await this.$video.play();else try{let{stream:t,facingMode:i}=await this._getCameraStream();!this._active||this._paused?e._stopVideoStream(t):(this._setVideoMirror(i),this.$video.srcObject=t,await this.$video.play(),this._flashOn&&(this._flashOn=!1,this.turnFlashOn().catch((()=>{}))))}catch(t){if(!this._paused)throw this._active=!1,t}}stop(){this.pause();this._active=!1}async pause(t=!1){this._paused=!0;if(!this._active)return!0;this.$video.pause();this.$overlay&&(this.$overlay.style.display="none");let b=()=>{this.$video.srcObject instanceof MediaStream&&(e._stopVideoStream(this.$video.srcObject),this.$video.srcObject=null)};if(t)return b(),!0;await new Promise((t=>setTimeout(t,300)));if(!this._paused)return!1;b();return!0}async setCamera(t){t!==this._preferredCamera&&(this._preferredCamera=t,await this._restartVideoStream())}static async scanImage(t,i,a,s,n=!1,r=!1){let o,h=!1;i&&("scanRegion"in i||"qrEngine"in i||"canvas"in i||"disallowCanvasResizing"in i||"alsoTryWithoutScanRegion"in i||"returnDetailedScanResult"in i)?(o=i.scanRegion,a=i.qrEngine,s=i.canvas,n=i.disallowCanvasResizing||!1,r=i.alsoTryWithoutScanRegion||!1,h=!0):i||a||s||n||r?console.warn("You're using a deprecated api for scanImage which will be removed in the future."):console.warn("Note that the return type of scanImage will change in the future. To already switch to the new api today, you can pass returnDetailedScanResult: true.");i=!!a;try{let c,l;[a,c]=await Promise.all([a||e.createQrEngine(),e._loadImage(t)]);[s,l]=e._drawToCanvas(c,o,s,n);let g;if(a instanceof Worker){let t=a;i||e._postWorkerMessageSync(t,"inversionMode","both");g=await new Promise(((i,a)=>{let n,r,h,c=-1;r=s=>{s.data.id===c&&(t.removeEventListener("message",r),t.removeEventListener("error",h),clearTimeout(n),null!==s.data.data?i({data:s.data.data,cornerPoints:e._convertPoints(s.data.cornerPoints,o)}):a(e.NO_QR_CODE_FOUND))};h=i=>{t.removeEventListener("message",r);t.removeEventListener("error",h);clearTimeout(n);a("Scanner error: "+(i?i.message||i:"Unknown Error"))};t.addEventListener("message",r);t.addEventListener("error",h);n=setTimeout((()=>h("timeout")),1e4);let g=l.getImageData(0,0,s.width,s.height);c=e._postWorkerMessageSync(t,"decode",g,[g.data.buffer])}))}else g=await Promise.race([new Promise(((t,i)=>window.setTimeout((()=>i("Scanner error: timeout")),1e4))),(async()=>{try{var[i]=await a.detect(s);if(!i)throw e.NO_QR_CODE_FOUND;return{data:i.rawValue,cornerPoints:e._convertPoints(i.cornerPoints,o)}}catch(a){i=a.message||a;if(/not implemented|service unavailable/.test(i))return e._disableBarcodeDetector=!0,e.scanImage(t,{scanRegion:o,canvas:s,disallowCanvasResizing:n,alsoTryWithoutScanRegion:r});throw`Scanner error: ${i}`}})()]);return h?g:g.data}catch(i){if(!o||!r)throw i;let c=await e.scanImage(t,{qrEngine:a,canvas:s,disallowCanvasResizing:n});return h?c:c.data}finally{i||e._postWorkerMessage(a,"close")}}setGrayscaleWeights(t,i,a,s=!0){e._postWorkerMessage(this._qrEnginePromise,"grayscaleWeights",{red:t,green:i,blue:a,useIntegerApproximation:s})}setInversionMode(t){e._postWorkerMessage(this._qrEnginePromise,"inversionMode",t)}static async createQrEngine(t){t&&console.warn("Specifying a worker path is not required and not supported anymore.");t=()=>import("./qr-scanner-worker.min.js").then((t=>t.createWorker()));if(!(!e._disableBarcodeDetector&&"BarcodeDetector"in window&&BarcodeDetector.getSupportedFormats&&(await BarcodeDetector.getSupportedFormats()).includes("qr_code")))return t();let i=navigator.userAgentData;return i&&i.brands.some((({brand:t})=>/Chromium/i.test(t)))&&/mac ?OS/i.test(i.platform)&&await i.getHighEntropyValues(["architecture","platformVersion"]).then((({architecture:t,platformVersion:i})=>/arm/i.test(t||"arm")&&13<=parseInt(i||"13"))).catch((()=>!0))?t():new BarcodeDetector({formats:["qr_code"]})}_onPlay(){this._scanRegion=this._calculateScanRegion(this.$video);this._updateOverlay();this.$overlay&&(this.$overlay.style.display="");this._scanFrame()}_onLoadedMetaData(){this._scanRegion=this._calculateScanRegion(this.$video);this._updateOverlay()}_onVisibilityChange(){document.hidden?this.pause():this._active&&this.start()}_calculateScanRegion(t){let i=Math.round(2/3*Math.min(t.videoWidth,t.videoHeight));return{x:Math.round((t.videoWidth-i)/2),y:Math.round((t.videoHeight-i)/2),width:i,height:i,downScaledWidth:this._legacyCanvasSize,downScaledHeight:this._legacyCanvasSize}}_updateOverlay(){requestAnimationFrame((()=>{if(this.$overlay){var t=this.$video,i=t.videoWidth,a=t.videoHeight,s=t.offsetWidth,n=t.offsetHeight,r=t.offsetLeft,o=t.offsetTop,h=window.getComputedStyle(t),c=h.objectFit,l=i/a,g=s/n;switch(c){case"none":var m=i;var v=a;break;case"fill":m=s;v=n;break;default:("cover"===c?l>g:l<g)?(v=n,m=v*l):(m=s,v=m/l),"scale-down"===c&&(m=Math.min(m,i),v=Math.min(v,a))}var[u,_]=h.objectPosition.split(" ").map(((t,i)=>{const a=parseFloat(t);return t.endsWith("%")?(i?n-v:s-m)*a/100:a}));h=this._scanRegion.width||i;g=this._scanRegion.height||a;c=this._scanRegion.x||0;var y=this._scanRegion.y||0;l=this.$overlay.style;l.width=h/i*m+"px";l.height=g/a*v+"px";l.top=`${o+_+y/a*v}px`;a=/scaleX\(-1\)/.test(t.style.transform);l.left=`${r+(a?s-u-m:u)+(a?i-c-h:c)/i*m}px`;l.transform=t.style.transform}}))}static _convertPoints(t,i){if(!i)return t;let a=i.x||0,s=i.y||0,n=i.width&&i.downScaledWidth?i.width/i.downScaledWidth:1;i=i.height&&i.downScaledHeight?i.height/i.downScaledHeight:1;for(let r of t)r.x=r.x*n+a,r.y=r.y*i+s;return t}_scanFrame(){!this._active||this.$video.paused||this.$video.ended||("requestVideoFrameCallback"in this.$video?this.$video.requestVideoFrameCallback.bind(this.$video):requestAnimationFrame)((async()=>{if(!(1>=this.$video.readyState)){var t=Date.now()-this._lastScanTimestamp,i=1e3/this._maxScansPerSecond;t<i&&await new Promise((a=>setTimeout(a,i-t)));this._lastScanTimestamp=Date.now();try{var a=await e.scanImage(this.$video,{scanRegion:this._scanRegion,qrEngine:this._qrEnginePromise,canvas:this.$canvas})}catch(t){if(!this._active)return;this._onDecodeError(t)}!e._disableBarcodeDetector||await this._qrEnginePromise instanceof Worker||(this._qrEnginePromise=e.createQrEngine());a?(this._onDecode?this._onDecode(a):this._legacyOnDecode&&this._legacyOnDecode(a.data),this.$codeOutlineHighlight&&(clearTimeout(this._codeOutlineHighlightRemovalTimeout),this._codeOutlineHighlightRemovalTimeout=void 0,this.$codeOutlineHighlight.setAttribute("viewBox",`${this._scanRegion.x||0} ${this._scanRegion.y||0} ${this._scanRegion.width||this.$video.videoWidth} ${this._scanRegion.height||this.$video.videoHeight}`),this.$codeOutlineHighlight.firstElementChild.setAttribute("points",a.cornerPoints.map((({x:t,y:i})=>`${t},${i}`)).join(" ")),this.$codeOutlineHighlight.style.display="")):this.$codeOutlineHighlight&&!this._codeOutlineHighlightRemovalTimeout&&(this._codeOutlineHighlightRemovalTimeout=setTimeout((()=>this.$codeOutlineHighlight.style.display="none"),100))}this._scanFrame()}))}_onDecodeError(t){t!==e.NO_QR_CODE_FOUND&&console.log(t)}async _getCameraStream(){if(!navigator.mediaDevices)throw"Camera not found.";let t=/^(environment|user)$/.test(this._preferredCamera)?"facingMode":"deviceId",i=[{width:{min:1024}},{width:{min:768}},{}],a=i.map((i=>Object.assign({},i,{[t]:{exact:this._preferredCamera}})));for(let t of[...a,...i])try{let i=await navigator.mediaDevices.getUserMedia({video:t,audio:!1}),a=this._getFacingMode(i)||(t.facingMode?this._preferredCamera:"environment"===this._preferredCamera?"user":"environment");return{stream:i,facingMode:a}}catch(t){}throw"Camera not found."}async _restartVideoStream(){let t=this._paused;await this.pause(!0)&&!t&&this._active&&await this.start()}static _stopVideoStream(t){for(let i of t.getTracks())i.stop(),t.removeTrack(i)}_setVideoMirror(t){this.$video.style.transform="scaleX("+("user"===t?-1:1)+")"}_getFacingMode(t){return(t=t.getVideoTracks()[0])?/rear|back|environment/i.test(t.label)?"environment":/front|user|face/i.test(t.label)?"user":null:null}static _drawToCanvas(t,i,a,s=!1){a=a||document.createElement("canvas");let n=i&&i.x?i.x:0,r=i&&i.y?i.y:0,o=i&&i.width?i.width:t.videoWidth||t.width,h=i&&i.height?i.height:t.videoHeight||t.height;s||(s=i&&i.downScaledWidth?i.downScaledWidth:o,i=i&&i.downScaledHeight?i.downScaledHeight:h,a.width!==s&&(a.width=s),a.height!==i&&(a.height=i));i=a.getContext("2d",{alpha:!1});i.imageSmoothingEnabled=!1;i.drawImage(t,n,r,o,h,0,0,a.width,a.height);return[a,i]}static async _loadImage(t){if(t instanceof Image)return await e._awaitImageLoad(t),t;if(t instanceof HTMLVideoElement||t instanceof HTMLCanvasElement||t instanceof SVGImageElement||"OffscreenCanvas"in window&&t instanceof OffscreenCanvas||"ImageBitmap"in window&&t instanceof ImageBitmap)return t;if(!(t instanceof File||t instanceof Blob||t instanceof URL||"string"===typeof t))throw"Unsupported image type.";{let i=new Image;i.src=t instanceof File||t instanceof Blob?URL.createObjectURL(t):t.toString();try{return await e._awaitImageLoad(i),i}finally{(t instanceof File||t instanceof Blob)&&URL.revokeObjectURL(i.src)}}}static async _awaitImageLoad(t){t.complete&&0!==t.naturalWidth||await new Promise(((i,a)=>{let d=s=>{t.removeEventListener("load",d);t.removeEventListener("error",d);s instanceof ErrorEvent?a("Image load error"):i()};t.addEventListener("load",d);t.addEventListener("error",d)}))}static async _postWorkerMessage(t,i,a,s){return e._postWorkerMessageSync(await t,i,a,s)}static _postWorkerMessageSync(t,i,a,s){if(!(t instanceof Worker))return-1;let n=e._workerMessageId++;t.postMessage({id:n,type:i,data:a},s);return n}}e.DEFAULT_CANVAS_SIZE=400;e.NO_QR_CODE_FOUND="No QR code found";e._disableBarcodeDetector=!1;e._workerMessageId=0;export{e as default};
+