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.

Lesezeit: 7 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen

(Bild: Thorsten Hübner)

Von
  • Manuel Ottlik
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.

Immer mehr Wissen. Das digitale Abo für IT und Technik.

  • Zugriff auf alle Inhalte von heise+
  • exklusive Tests, Ratgeber & Hintergründe: unabhängig, kritisch fundiert
  • c't, iX, Technology Review, Mac & i, Make, c't Fotografie direkt im Browser lesen
  • einmal anmelden – auf allen Geräten lesen - monatlich kündbar
  • erster Monat gratis, danach monatlich 9,95 €
  • Wöchentlicher Newsletter mit persönlichen Leseempfehlungen des Chefredakteurs
GRATIS-Monat beginnen Jetzt GRATIS-Monat beginnen Mehr Informationen zu heise+