50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
import { Controller } from "@hotwire/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
|
|
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")
|
|
}
|
|
}
|
|
}
|