60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
import { Controller } from "@hotwired/stimulus";
|
|
|
|
//import QrScanner from "qr-scanner"; // Rails findet jetzt über die Importmap deine Datei unter vendor/javascript/
|
|
// KORREKTUR: Lädt das Modul ohne Namens-Zuweisung, da die Legacy-Datei keinen Default-Export besitzt
|
|
import "qr-scanner";
|
|
|
|
export default class extends Controller {
|
|
static targets = ["input", "preview", "modal"];
|
|
|
|
connect() {
|
|
this.qrScanner = null;
|
|
}
|
|
|
|
startCamera(event) {
|
|
event.preventDefault();
|
|
this.modalTarget.classList.remove("hidden");
|
|
|
|
const videoElement = this.previewTarget;
|
|
|
|
// Scanner initialisieren (Direkt über die importierte Klasse ohne 'window.')
|
|
//this.qrScanner = new QrScanner(
|
|
// Greift jetzt absolut fehlerfrei auf die geladene Klasse zu
|
|
this.qrScanner = new window.QrScanner(
|
|
videoElement,
|
|
(result) => { this.handleScanSuccess(result.data); },
|
|
{
|
|
onDecodeError: (error) => { /* Fehler ignorieren */ },
|
|
highlightScanRegion: true,
|
|
highlightCodeOutline: true,
|
|
maxScansPerSecond: 10
|
|
}
|
|
);
|
|
|
|
this.qrScanner.start().catch((err) => {
|
|
alert("Kamera-Zugriff blockiert! Bitte prüfe die Browser-Berechtigungen.");
|
|
console.error("Kamera-Fehler:", err);
|
|
this.modalTarget.classList.add("hidden");
|
|
});
|
|
}
|
|
|
|
handleScanSuccess(decodedText) {
|
|
this.inputTarget.value = decodedText;
|
|
this.inputTarget.dispatchEvent(new Event("input", { bubbles: true }));
|
|
this.stopCamera();
|
|
}
|
|
|
|
stopCamera() {
|
|
if (this.qrScanner) {
|
|
this.qrScanner.stop();
|
|
this.qrScanner.destroy();
|
|
this.qrScanner = null;
|
|
}
|
|
this.modalTarget.classList.add("hidden");
|
|
}
|
|
|
|
disconnect() {
|
|
this.stopCamera();
|
|
}
|
|
}
|