QR-Codes mit JavaScript lesen und generieren

Inhaltsverzeichnis

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.

Das war die Leseprobe unseres heise-Plus-Artikels "QR-Codes mit JavaScript lesen und generieren". Mit einem heise-Plus-Abo können sie den ganzen Artikel lesen und anhören.