59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
import { Controller } from "@hotwired/stimulus";
|
|
|
|
export default class extends Controller {
|
|
static targets = ["input", "preview", "modal"];
|
|
|
|
connect() {
|
|
this.html5QrCode = null;
|
|
}
|
|
|
|
// Öffnet das Modal und startet den Kamera-Stream
|
|
startCamera(event) {
|
|
event.preventDefault();
|
|
|
|
// 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);
|
|
|
|
// FPS-Rate und Scan-Rahmen (250x250px) festlegen
|
|
const config = { fps: 10, qrbox: { width: 250, height: 250 } };
|
|
|
|
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);
|
|
});
|
|
}
|
|
|
|
// Schließt das Modal und beendet den Stream sauber
|
|
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");
|
|
}
|
|
}
|
|
}
|