QR-Codes mit JavaScript lesen und generieren
QR-Codes leiten Nutzer aus der analogen Welt auf Websites. Das funktioniert ohne App: Mit JavaScript-Bibliotheken integrieren Sie QR-Codes in Webanwendungen.
(Bild: Thorsten Hübner)
- Manuel Ottlik
QR-Codes tauchen im Alltag immer mal wieder auf: auf Speise- und Konzertkarten oder auf Werbung an Litfaßsäulen. Meistens kodieren sie nur einen Link, theoretisch kann man aber jede beliebige Zeichenfolge in ein quadratisches Pixelbild verwandeln. Bis zu 4296 alphanumerische Zeichen lassen sich in einem QR-Code unterbringen – weit mehr als nur ein Link. Solch eine Zeichenfolge kann man nicht nur serverseitig, sondern auch clientseitig in einer Webanwendung kodieren. Und auch zum Einlesen brauchen Sie keine App: Über ein JavaScript-API kann jeder Browser auf die Kamera zugreifen und mit den richtigen Bibliotheken QR-Codes interpretieren.
Für QR-Codes in der eigenen Webanwendung kann es viele Gründe geben. So regelt unter anderem WhatsApp die Registrierung der Endgeräte für WhatsApp Web über einen QR-Code. Immer dann, wenn der Nutzer vor einem Medienbruch steht, also zum Beispiel von einem Stück Papier zum Handy, oder vom Handy zum Desktop-PC wechseln soll, erleichtern solche Codes den Übergang. Außer einem Link können Sie dann unter anderem ein Token zur Authentifizierung kodieren – oder gleich ein JSON-Objekt mit verschiedenen Informationen.
Damit Sie im Web per JavaScript QR-Codes generieren oder lesen können, müssen Sie nicht viele Zeilen tippen – zwei Open-Source-Bibliotheken erledigen die meiste Arbeit. Um zu verdeutlichen, wie sich diese Bibliotheken im Alltag schlagen, entsteht in diesem Artikel ein Adressbuch, mit dem Sie Kontakte per QR-Code austauschen und einlesen. In der kleinen Anwendung hinterlegen Sie die eigenen Kontaktdaten und zeigen sie als QR-Code an. Mit einem zweiten Gerät lesen Sie diesen QR-Code ein, um die Kontaktdaten in die Kontaktliste zu übernehmen. Auf Messen und Konferenzen könnten Sie so ganz ohne Visitenkarten aus Pappe schnell Daten mit Gesprächspartnern austauschen.
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Dauertest Audi e-tron: Was toll ist, was besser ginge und was unfassbar nervt
Handy weg, was nun? Die wichtigsten Schritte danach – und wie Sie vorbeugen
Funktionsweise von Passkeys im Detail erklärt
High-End-Smartphones im Kameravergleich: Wettkampf um die beste Bildqualität
Mit ETFs und Fonds in Schwellenländer investieren: Wie Sie vom Boom profitieren
Fünf Monitore im Test: 27 Zoll mit 4K-Auflösung und USB-C-Eingang
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Dauertest Audi e-tron: Was toll ist, was besser ginge und was unfassbar nervt
Handy weg, was nun? Die wichtigsten Schritte danach – und wie Sie vorbeugen
Funktionsweise von Passkeys im Detail erklärt
High-End-Smartphones im Kameravergleich: Wettkampf um die beste Bildqualität
Mit ETFs und Fonds in Schwellenländer investieren: Wie Sie vom Boom profitieren