html5 qrcode

HTML5-QRCode

Wichtig – Suche neue Eigentümer für dieses Projekt.

Bei Interesse wenden Sie sich bitte an [email protected] .

HTML5-QRCode

Wichtig: Das Projekt befindet sich bis auf Weiteres im Wartungsmodus. Der Autor kann vorerst keine Fehlerbehebungen oder Verbesserungen vornehmen. Auch Pull-Requests werden vorerst nicht zusammengeführt. Wenn Sie einen Fork haben, den Sie warten können, teilen Sie die Details bitte mit [email protected]. Gerne mache ich hier Werbung! Es ist in Ordnung, das Projekt so zu verwenden, wie es ist. Beispiel: scanapp.org.

Leichte und plattformübergreifende QR-Code- und Barcode-Scan-Bibliothek für das Web

Verwenden Sie diese kompakte Bibliothek, um QR-Code, Barcode und andere gängige Code-Scanfunktionen einfach und schnell in Ihre Webanwendung zu integrieren.

Wichtige Highlights

• ? Unterstützt das Scannen verschiedener Arten von Barcodes und QR-Codes.

• ? Unterstützt verschiedene Plattformen, sei es Android, IOS, MacOs, Windows oder Linux

• Unterstützt verschiedene Browser wie Chrome, Firefox, Safari, Edge, Opera ...

• ? Unterstützt das Scannen mit der Kamera sowie lokalen Dateien

• ➡️ Wird mit einer End-to-End-Bibliothek mit Benutzeroberfläche sowie einer Low-Level-Bibliothek geliefert, mit der Sie Ihre eigene Benutzeroberfläche erstellen können.

• ? Unterstützt Anpassungen wie Blitz-/Taschenlampenunterstützung, Zoomen usw.

Unterstützt zwei Arten von APIs

• Html5QrcodeScanner – End-to-End-Scanner mit Benutzeroberfläche, Integration mit weniger als zehn Codezeilen.

• Html5Qrcode – Leistungsstarker Satz von APIs, mit denen Sie Ihre Benutzeroberfläche erstellen können, ohne sich Gedanken über die Kameraeinrichtung, die Handhabung von Berechtigungen, das Lesen von Codes usw. machen zu müssen.

Die Unterstützung für das Scannen lokaler Dateien auf dem Gerät ist eine neue Ergänzung und hilfreich für den Webbrowser, der keinen Inline-Webkamerazugriff in Smartphones unterstützt. Hinweis: Dabei werden keine Dateien auf einen Server hochgeladen – alles wird lokal erledigt.

Demo auf scanapp.org	Demo unter qrcode.minhazav.dev – Scannen verschiedener Codetypen

Wir brauchen Ihre Hilfe!

Helfen Sie dabei, Anreize für die Funktionsentwicklung und Fehlerbehebung zu schaffen, indem Sie die Sponsoringziele dieses Projekts unterstützen. Eine Liste der gesponserten Funktionsanfragen finden Sie hier.

Dokumentation

Die Dokumentation für dieses Projekt wurde nach scanapp.org/html5-qrcode-docs verschoben.

• Erste Schritte
• Unterstützte Frameworks
• Unterstützte 1D- und 2D-Codeformate
• Detaillierte API-Dokumentation

Unterstützte Plattformen

Wir arbeiten kontinuierlich daran, Unterstützung für immer mehr Plattformen hinzuzufügen. Wenn Sie eine Plattform oder einen Browser finden, auf dem die Bibliothek nicht funktioniert, können Sie gerne ein Problem melden. Schauen Sie sich den Demo-Link an, um es auszuprobieren.

Legenden

• Bedeutet volle Unterstützung – Inline-Webcam und dateibasiert
• Bedeutet teilweise Unterstützung – nur dateibasiert, Webcam in Bearbeitung

PC/Mac

Firefox	Chrom	Safari	Oper	Rand

Android

Chrom	Firefox	Rand	Oper	Opera Mini	UC

IOS

Safari	Chrom	Firefox	Rand
	*	*

* Unterstützt für IOS-Versionen >= 15.1

Vor Version 15.1 wird Webkit für IOS von Chrome, Firefox und anderen Browsern in IOS verwendet und diese verfügen noch nicht über Webcam-Berechtigungen. Es gibt ein anhaltendes Problem bei der Behebung der Unterstützung für iOS – Issue/14

Framework-Unterstützung

Die Bibliothek kann problemlos mit mehreren anderen Frameworks verwendet werden. Für einige davon habe ich Beispiele hinzugefügt und werde auch weiterhin weitere hinzufügen.

HTML5	VueJs	ElektronenJs	Reagieren	Lit

Unterstützte Codeformate

Das Scannen des Codes ist von der Zxing-js-Bibliothek abhängig. Darüber hinaus werden wir daran arbeiten, Unterstützung für weitere Arten des Code-Scannens hinzuzufügen. Wenn Sie der Meinung sind, dass eine bestimmte Art von Code hilfreich wäre, reichen Sie bitte eine Funktionsanfrage ein.

Code	Beispiel
QR-Code
AZTEKISCH
CODE_39
CODE_93
CODE_128
ITF
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
DATA_MATRIX
MAXICODE*
RSS_14*
RSS_EXPANDED*

*Formate werden von unserer experimentellen Integration mit der nativen BarcodeDetector-API-Integration nicht unterstützt (Weitere Informationen).

Beschreibung – Demo ansehen

Sehen Sie sich ein End-to-End-Scanner-Erlebnis auf scanapp.org an.

Dies ist eine plattformübergreifende JavaScript-Bibliothek zur Integration von QR-Code, Barcodes und einigen anderen Arten von Code-Scanfunktionen in Ihre Anwendungen, die in einem HTML5-kompatiblen Browser ausgeführt werden.

Unterstützt:

• Kamera auf dem Gerät abfragen (mit Benutzerberechtigungen)
• Rendern von Live-Kamera-Feeds mit benutzerfreundlicher Benutzeroberfläche zum Scannen
• Unterstützt das Scannen verschiedener Arten von QR-Codes, Barcodes und anderen Formaten
• Unterstützt die Auswahl von Bilddateien vom Gerät zum Scannen von Codes

Wie zu verwenden

Detaillierte Richtlinien zur Verwendung dieser Bibliothek finden Sie unter scanapp.org/html5-qrcode-docs.

Demo

Scannen Sie dieses Bild oder besuchen Sie blog.minhazav.dev/research/html5-qrcode.html

Weitere Informationen

Lesen Sie diese Artikel zur Verwendung dieser Bibliothek:

• QR- und Barcode-Scanner mit HTML und JavaScript
• Scannen von HTML5-QR-Codes – Einführung in Version 1.0.1 ohne jQuery-Abhängigkeit und überarbeitete Promise-basierte APIs.
• Scannen von HTML5-QR-Codes mit JavaScript – Unterstützung für das Scannen der lokalen Datei und die Verwendung der Standardkamera hinzugefügt (v1.0.5)

Screenshots

Abbildung: Screenshot von Google Chrome, das auf dem MacBook Pro läuft

Dokumentation

Die vollständige API-Dokumentation finden Sie unter scanapp.org/html5-qrcode-docs/docs/apis.

Zusätzliche optionale configuration in start() -Methode

Konfigurationsobjekt, mit dem sowohl das Scanverhalten als auch die Benutzeroberfläche (UI) konfiguriert werden können. Die meisten Felder verfügen über Standardeigenschaften, die verwendet werden, sofern kein anderer Wert angegeben wird. Wenn Sie nichts überschreiben möchten, können Sie einfach ein leeres Objekt {} übergeben.

fps – Ganzzahl, Beispiel = 10

Der Standardwert hierfür ist 2, auch bekannt als „Frames pro Sekunde“, er kann jedoch erhöht werden, um ein schnelleres Scannen zu ermöglichen. Eine zu hohe Erhöhung des Werts könnte sich auf die Leistung auswirken. Ein Wert >1000 schlägt einfach fehl.

qrbox – QrDimensions oder QrDimensionFunction (Optional), Beispiel = { width: 250, height: 250 }

Verwenden Sie diese Eigenschaft, um den Bereich des Suchers einzuschränken, den Sie zum Scannen verwenden möchten. Der Rest des Suchers wäre schattiert. Wenn Sie beispielsweise config { qrbox : { width: 250, height: 250 } } übergeben, sieht der Bildschirm folgendermaßen aus:

Dies kann verwendet werden, um einen rechteckigen Scanbereich mit einer Konfiguration wie der folgenden festzulegen:

 let config = { qrbox : { width : 400 , height : 150 } }

Diese Konfiguration akzeptiert auch eine Funktion vom Typ

 /**
  * A function that takes in the width and height of the video stream 
* and returns QrDimensions.
* 
* Viewfinder refers to the video showing camera stream.
*/
type QrDimensionFunction =
    ( viewfinderWidth : number , viewfinderHeight : number ) => QrDimensions ;

Dadurch können Sie dynamische QR-Box-Abmessungen basierend auf den Videoabmessungen festlegen. Sehen Sie sich zum Beispiel diesen Blog-Artikel an: Festlegen der dynamischen QR-Boxgröße in Html5-qrcode – ScanApp-Blog

Dies kann für das Scannen von Barcodes wünschenswert sein.

Wenn dieser Wert nicht festgelegt ist, wird kein schattiertes QR-Feld gerendert und der Scanner scannt den gesamten Bereich des Videostreams.

aspectRatio – Float, Beispiel 1,777778 für ein Seitenverhältnis von 16:9

Verwenden Sie diese Eigenschaft, um den Video-Feed in einem bestimmten Seitenverhältnis zu rendern. Die Übergabe eines nicht standardmäßigen Seitenverhältnisses wie 100000:1 könnte dazu führen, dass der Video-Feed nicht einmal angezeigt wird. Ideale Werte können sein:

Wert	Seitenverhältnis	Anwendungsfall
1.333334	4:3	Standard-Kamera-Seitenverhältnis
1.777778	16:9	Vollbild, filmisch
1,0	1:1	Blick auf den Platz

Wenn Sie keinen Wert übergeben, wird der gesamte Sucher zum Scannen verwendet. Hinweis : Dieser Wert muss kleiner sein als die Breite und Höhe des QR code HTML element .

disableFlip – Boolean (Optional), Standard = false

Standardmäßig kann der Scanner nach horizontal gespiegelten QR-Codes suchen. Dies ermöglicht auch das Scannen von QR-Codes mit der Frontkamera auf mobilen Geräten, die teilweise gespiegelt sind. Dies ist standardmäßig false und ich empfehle, dies nur zu ändern, wenn:

• Sie sind sicher, dass das Kamerabild nicht gespiegelt (horizontal gespiegelt) werden kann.
• Wenn diese Option aktiviert ist, treten Leistungsprobleme auf.

Hier ist ein Beispiel für einen normalen und gespiegelten QR-Code

Normaler QR-Code	Gespiegelter QR-Code

rememberLastUsedCamera – Boolean (Optional), Standard = true

Wenn true wird die zuletzt vom Benutzer verwendete Kamera und das Wetter im lokalen Speicher gespeichert, sofern keine Genehmigung erteilt wurde. Wenn der Benutzer zuvor Berechtigungen erteilt hat, wird die Option „Berechtigung anfordern“ in der Benutzeroberfläche übersprungen und die zuletzt ausgewählte Kamera wird automatisch zum Scannen gestartet.

Bei true merkt sich die Bibliothek, ob die Kameraberechtigungen zuvor erteilt wurden und welche Kamera zuletzt verwendet wurde. Wenn die Berechtigungen für „Kamera“ bereits erteilt wurden, wird das Scannen des QR-Codes automatisch * für die zuvor verwendete Kamera gestartet.

supportedScanTypes – Array<Html5QrcodeScanType> | []

Dies wird nur für Html5QrcodeScanner unterstützt.

Standard = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]

Dieses Feld kann verwendet werden für:

• Beschränken Sie die Unterstützung entweder auf den Camera oder File Scan.
• Ändern Sie den Standard-Scantyp.

Anwendung:

 function onScanSuccess ( decodedText , decodedResult ) {
  // handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

let config = {
  fps : 10 ,
  qrbox : { width : 100 , height : 100 } ,
  rememberLastUsedCamera : true ,
  // Only support camera scan type.
  supportedScanTypes : [ Html5QrcodeScanType . SCAN_TYPE_CAMERA ]
} ;

let html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" , config , /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

Wählen Sie für nur dateibasierten Scan:

supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]

Um beides in der heutigen Form zu unterstützen, können Sie dieses Feld ignorieren oder Folgendes festlegen:

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
  Html5QrcodeScanType . SCAN_TYPE_FILE ]

Um den dateibasierten Scan als Standard festzulegen, ändern Sie die Reihenfolge:

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_FILE ,
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ] 

showTorchButtonIfSupported – boolean | undefined

Dies wird nur für Html5QrcodeScanner unterstützt.

Wenn true verfügt die gerenderte Benutzeroberfläche über eine Schaltfläche zum Ein- oder Ausschalten des Flashs, je nach Geräte- und Browserunterstützung. Der Wert ist standardmäßig false .

Es werden nur bestimmte Formate gescannt

Standardmäßig werden sowohl Kamerastream als auch Bilddateien anhand aller unterstützten Codeformate gescannt. Sowohl Html5QrcodeScanner als auch Html5Qrcode -Klasse können so konfiguriert werden, dass sie nur eine Teilmenge der unterstützten Formate unterstützen. Unterstützte Formate sind in der Enumeration Html5QrcodeSupportedFormats definiert.

 enum Html5QrcodeSupportedFormats {
  QR_CODE = 0 ,
  AZTEC ,
  CODABAR ,
  CODE_39 ,
  CODE_93 ,
  CODE_128 ,
  DATA_MATRIX ,
  MAXICODE ,
  ITF ,
  EAN_13 ,
  EAN_8 ,
  PDF_417 ,
  RSS_14 ,
  RSS_EXPANDED ,
  UPC_A ,
  UPC_E ,
  UPC_EAN_EXTENSION ,
}

Ich empfehle dies nur, wenn Sie die Unterstützung bestimmter Formate explizit auslassen müssen oder aus Leistungsgründen die Anzahl der Scans pro Sekunde reduzieren möchten.

Scannen nur QR-Code mit Html5Qrcode

 const html5QrCode = new Html5Qrcode (
  "reader" , { formatsToSupport : [ Html5QrcodeSupportedFormats . QR_CODE ] } ) ;
const qrCodeSuccessCallback = ( decodedText , decodedResult ) => {
    /* handle success */
} ;
const config = { fps : 10 , qrbox : { width : 250 , height : 250 } } ;

// If you want to prefer front camera
html5QrCode . start ( { facingMode : "user" } , config , qrCodeSuccessCallback ) ; 

Scannen nur QR-Code und UPC-Codes mit Html5QrcodeScanner

 function onScanSuccess ( decodedText , decodedResult ) {
  // Handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

const formatsToSupport = [
  Html5QrcodeSupportedFormats . QR_CODE ,
  Html5QrcodeSupportedFormats . UPC_A ,
  Html5QrcodeSupportedFormats . UPC_E ,
  Html5QrcodeSupportedFormats . UPC_EAN_EXTENSION ,
] ;
const html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" ,
  {
    fps : 10 ,
    qrbox : { width : 250 , height : 250 } ,
    formatsToSupport : formatsToSupport
  } ,
  /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ; 

Experimentelle Funktionen

Die Bibliothek unterstützt jetzt einige experimentelle Funktionen, die zwar in der Bibliothek unterstützt werden, jedoch aufgrund begrenzter Tests oder eingeschränkter Kompatibilität mit den verwendeten zugrunde liegenden APIs nicht für den Produktionseinsatz empfohlen werden. Lesen Sie hier mehr darüber. Zu den experimentellen Funktionen gehören:

• Unterstützung für die BarcodeDetector-JavaScript-API

Wie man modifiziert und baut

1. Codeänderungen sollten nur an /src vorgenommen werden.

2. Führen Sie npm install aus, um alle Abhängigkeiten zu installieren.

3. Führen Sie npm run-script build aus, um die JavaScript-Ausgabe zu erstellen. Die Ausgabe-JavaScript-Verteilung wird in /dist/html5-qrcode.min.js erstellt. Wenn Sie unter Windows entwickeln, führen Sie npm run-script build-windows aus.

4. Testen

   • Führen Sie npm test aus
   • Führen Sie die Tests aus, bevor Sie eine Pull-Anfrage senden. Alle Tests sollten ausgeführt werden.
   • Bitte fügen Sie in PR gesendete Tests für neue Verhaltensweisen hinzu.

5. Senden Sie eine Pull-Anfrage

   • Codeänderungen nur in ./src einbeziehen. Ändern Sie ./dist nicht manuell.
   • Fügen Sie im Pull-Request einen Kommentar wie „Gefällt mir“ hinzu

    @all-contributors please add @mebjas for this new feature or tests
   

   • Um Ihre Beiträge abzurufen, aktualisiert der Bot die Beitragsdatei.
   • Der Code wird vom Autor stapelweise erstellt und veröffentlicht.

So können Sie einen Beitrag leisten

Sie können auf verschiedene Weise zum Projekt beitragen:

• Datei-Problemticket für jeden beobachteten Fehler oder Kompatibilitätsproblem mit dem Projekt.
• Funktionsanfrage für fehlende Funktionen einreichen.
• Nehmen Sie offene Fehler oder Funktionsanfragen auf, arbeiten Sie daran und senden Sie eine Pull-Anfrage.
• Schreiben Sie Unit-Tests für die vorhandene Codebasis (die heute nicht durch Tests abgedeckt wird). Hilfe hierzu gesucht – lesen Sie mehr.

Unterstützung ?

Dieses Projekt wäre ohne all unsere fantastischen Mitwirkenden und Sponsoren nicht möglich. Wenn Sie die Wartung und Instandhaltung dieses Projekts unterstützen möchten, können Sie über GitHub Sponsors spenden.

Sponsern Sie das Projekt, um für Sie relevante Funktionsanfragen/Fehler zu priorisieren . (Hängt vom Umfang der Anfrage und der Bandbreite der Mitwirkenden ab).

Helfen Sie dabei, Anreize für die Funktionsentwicklung und Fehlerbehebung zu schaffen, indem Sie die Sponsoringziele dieses Projekts unterstützen. Eine Liste der gesponserten Funktionsanfragen finden Sie hier.

Ein großes Dankeschön geht auch an die folgenden Organisationen für ihr nicht monetäres Sponsoring

Credits

Der zum Lesen des QR-Codes verwendete Decoder stammt von Zxing-js https://github.com/zxing-js/library