react instascan Download – react instascan Quellcode herunterladen

react instascan

Anderer Quellcode

1.0.0

Herunterladen

Reagieren Sie auf Instascan

Port der Instascan-Bibliothek für React

Warnung

Diese Bibliothek verwendet instascan-umd anstelle von instascan als pro-Abhängigkeit. Wenn Sie ein Upgrade auf neuere Versionen durchführen, müssen Sie istascan-umd installieren.

Installieren

npm

npm install react-instascan react instascan-umd --save

Garn

yarn add react-instascan react instascan-umd

Verwenden von unpkg CDN

 < script type =" application/javascript " src =" https://unpkg.com/react-instascan/dist/main.js " > </ script >

Anforderungen

Um diese Bibliothek nutzen zu können, benötigen Sie mindestens:

reagieren >= 16,3
instascan-umd >= 1

Benutze es

Importieren

React Instascan macht zwei Komponenten verfügbar: Kameras und Scanner .
Mit ESModulen:

 import { Cameras , Scanner } from "react-instascan" ;

oder mit CommonsJS:

 const { Cameras , Scanner } = require ( "react-instascan" ) ;

Die Komponente „Kameras“ mit einer Render-Requisite ruft die verfügbaren Kameras auf Ihrem Gerät ab.
Die Scanner-Komponente erhält als Requisiten die Kamera und ein VideoHTMLElement als untergeordnetes Element. Dann wird beim Lesen eines Codes der OnScan- Listener aufgerufen. Es sind auch andere Ereignistypen verfügbar (siehe API-Tabelle):

 < Cameras >
  { cameras => (
    < div >
      < h1 > Scan the code! < / h1 >
      < Scanner camera = { cameras [ 0 ] } onScan = { onScan } >
        < video style = { { width : 400 , height : 400 } } / >
      < / Scanner >
    < / div >
  ) }
< / Cameras >

Scannereigenschaften

Name	Typ	Beschreibung
Kamera	Objekt	Von <Camera /> zurückgegebenes Kameraobjekt
Optionen	Objekt	Gleiche Optionen von Instascan.Scanner
stoppen	Boolescher Wert	Wenn Stop wahr ist, stoppt die Kamera und umgekehrt
onScan	Funktion	Wird ausgegeben, wenn ein QR-Code mit der Kamera im kontinuierlichen Modus gescannt wird
onStart	Funktion	Wird aufgerufen, wenn die Kamera aktiv ist und der Scanvorgang gestartet wurde
onStop	Funktion	Wird aufgerufen, wenn Kamera und Scanvorgang gestoppt wurden
onActive	Funktion	Wird ausgegeben, wenn der Scanner aktiv wird, weil der Stopp falsch wird oder die Registerkarte den Fokus erhält
onInaktiv	Funktion	Wird ausgegeben, wenn der Scanner inaktiv wird, weil „Stopp“ wahr wird oder die Registerkarte den Fokus verliert

Weitere Informationen finden Sie in der Instascan-API

Mitwirken

Verwendung direkt von der Quelle

Obwohl dieses Projekt ein einfaches Beispiel enthält, möchten Sie diesen Code möglicherweise direkt in Ihrem Code verwenden, um mögliche Fehler zu testen und zu beheben. Dazu können Sie einfach dieses Paket verlinken