HTML5-QR-Code-Scanner
Der fertige Scanner plus die API-Details für alle, die selbst bauen.
Die Kamera wird erst nach einem Knopfdruck angefragt. Frames werden auf diesem Gerät decodiert und verworfen.
Ein HTML5-Scanner sind drei gestapelte Browser-Schnittstellen: getUserMedia für den Kamerastrom, Canvas für die Bildproben und ein Decoder – der native BarcodeDetector, wo er existiert, ein mitgelieferter JavaScript-Decoder, wo nicht. Kein Plugin, kein nativer Code.
Diese Seite ist zugleich Werkzeug und Erklärung, weil die meisten, die danach suchen, selbst eines bauen wollen und wissen möchten, welche Teile tragend sind.
So funktioniert es
- Den Scanner oben nutzen, wenn nur ein Code gelesen werden soll.
- Die Umsetzungshinweise unten für die Reihenfolge der API-Aufrufe lesen.
- Vor der Wahl eines Decoders für den Produktivbetrieb die Kompatibilitätshinweise prüfen.
Die Reihenfolge der Umsetzung
Den Strom mit `getUserMedia({ video: { facingMode: 'environment' } })` anfordern, an ein video-Element hängen und `playsinline` setzen – ohne das geht iOS Safari in den Vollbildmodus. Dann Bilder mit gedrosselter Rate, typisch 8 bis 10 pro Sekunde, auf ein Canvas zeichnen und das Canvas an den Decoder geben. Bei Erfolg die Tracks stoppen.
Die Falle ist die Auflösung. Ein 1080p-Bild an einen Decoder zu geben ist langsam und nicht genauer als eines mit 640 px Breite. Erst verkleinern, dann in festem Intervall decodieren statt bei jedem Animationsbild.
Geprüft am 2026-10-21. Dieses Werkzeug läuft vollständig in Ihrem Browser – kein Server, kein Konto, und nichts Erzeugtes wird gespeichert.
Häufige Fragen
Brauche ich eine Bibliothek wie html5-qrcode?
Nicht unbedingt. Die Bibliothek kümmert sich um Browser-Eigenheiten und Oberfläche, was sich lohnt, wenn viele Formate gebraucht werden. Für reines QR sind BarcodeDetector plus jsQR-Rückfall ein paar Dutzend Zeilen und deutlich kleiner.
Warum wirft getUserMedia auf meiner Seite einen Fehler?
Es verlangt einen sicheren Kontext – HTTPS oder localhost. Über einfaches HTTP ist `navigator.mediaDevices` undefiniert, das ist die häufigste Ursache.
Wie stoppe ich die Kamera danach?
Mit `stream.getTracks().forEach(t => t.stop())`. Zusätzlich auf `pagehide` hören, um die Kamera freizugeben, wenn mitten im Scan navigiert wird.
Verwandte Werkzeuge
Mehr aus QR-Codes.