React-Komponente zum Lesen von QR-Codes von der Webcam

Blog

React-Komponente zum Lesen von QR-Codes von der Webcam

React-Komponente zum Lesen von QR-Codes von der Webcam

Einführung

ZU Reagieren Komponente zum Lesen von QR-Codes von der Webcam. Es verwendet die WebRTC-Standards zum Lesen von Webcam-Daten und jsQR wird zum Erkennen von QR-Codes in diesen Daten verwendet. Um die Geschwindigkeit und Erfahrung zu optimieren, wird ein Web-Worker verwendet, um den umfangreichen QR-Code-Algorithmus auf einen separaten Prozess auszulagern. Der Webworker wird inline eingebunden und beim Erstellen der Komponente geladen.

Bekannte Probleme

  • Serverseitiges Rendering funktioniert nicht, daher ist die Komponente nur beim Rendern in einer Browserumgebung erforderlich.
  • Aufgrund von Browserimplementierungen kann auf die Kamera nur über https oder localhost zugegriffen werden.
  • In Firefox wird dem Benutzer eine Eingabeaufforderung angezeigt, die fragt, welche Kamera er verwenden soll, also |_+_| wird es nicht beeinflussen.
  • Unter IOS 11 wird es nur von Safari und nicht von Chrome oder Firefox unterstützt, da Apple die API für Browser von Drittanbietern nicht verfügbar macht.

Installieren

facingMode

Beispiel

npm install --save react-qr-reader

Requisiten

Veranstaltungen

Stütze Streit Beschreibung
onScan import React, { Component } from 'react' import QrReader from 'react-qr-reader' class Test extends Component { state = { result: 'No result' } handleScan = data => { if (data) { this.setState({ result: data }) } } handleError = err => { console.error(err) } render() { return (

{this.state.result}

vue js ziehen und ablegen
) } }
Ereignishandler scannen. Wird bei jedem Scan mit dem decodierten Wert aufgerufen oder |_+_| wenn kein QR-Code gefunden wurde.
onError result Wird aufgerufen, wenn ein Fehler auftritt.
onLoad null Wird aufgerufen, wenn die Komponente einsatzbereit ist. Objekteigenschaften sind |_+_|: boolean, |_+_|: string
onImageLoad img onLoad-Ereignis Wird aufgerufen, wenn das Image im LegacyMode geladen wird.

Optionen

Stütze Typ Standard Beschreibung
verzögern Zahl oder |_+_| Error Die Verzögerung zwischen Scans in Millisekunden. Um das Intervall zu deaktivieren, gehen Sie in |_+_|.
Ausrichtungsmodus |_+_| oder |_+_| object Geben Sie an, welche Kamera verwendet werden soll (falls verfügbar).
Auflösung Nummer mirrorVideo Die Auflösung des Videos (oder Bildes im LegacyMode). Eine höhere Auflösung erhöht die Genauigkeit, verlangsamt aber auch die Verarbeitungszeit.
Stil ein gültiger React-Stil keiner Styling für das Containerelement. Warnung Die Vorschau behält immer das Seitenverhältnis von 1:1.
Klassenname Schnur keiner ClassName für das Containerelement.
anzeigenViewFinder boolesch streamLabel Blenden Sie den Build im Ansichtsfinder ein oder aus. Demo ansehen
Einschränkungen Objekt false Verwenden Sie benutzerdefinierte Kamerabeschränkungen, die das Standardverhalten überschreiben. MediaTrack-Einschränkungen
LegacyModus boolesch 500 Wenn das Gerät keinen Kamerazugriff zulässt (z. B. IOS-Browser, Safari), können Sie den LegacyMode aktivieren, um dem Benutzer zu ermöglichen, ein Bild aufzunehmen (auf einem mobilen Gerät) oder ein vorhandenes zu verwenden. Um den Bilddialog auszulösen, rufen Sie einfach die Methode |_+_| . auf von der Elternkomponente. Warnung Sie müssen die Methode von einer Benutzeraktion aus aufrufen (z. B. Click-Ereignis auf einem Element).

Dev

Abhängigkeiten installieren

false

Bauen

user

Demo

environment

wo kann man filecoin kaufen?

Rollen

environment

eslint hübscher/reagieren

Getestete Plattformen

  • Chrome macOS und Android
  • Firefox macOS und Android
  • Safari macOS & IOS

Download-Details:

Autor: JodusNodus

Live-Demo: https://jodusnodus.github.io/react-qr-reader

GitHub: https://github.com/JodusNodus/react-qr-reader

#reactjs #javascript #reagieren