react instascan ดาวน์โหลด - ดาวน์โหลด react instascan ซอร์สโค้ด

react instascan

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

โต้ตอบ Instascan

พอร์ตของไลบรารี Instascan ที่จะตอบสนอง

คำเตือน

ไลบรารีนี้ใช้ instascan-umd แทน instascan เป็นการพึ่งพาต่อครั้ง หากคุณกำลังอัพเกรดเป็นเวอร์ชันที่ใหม่กว่าคุณต้องติดตั้ง istascan-umd

กำลังติดตั้ง

เวลา 22.00 น

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

เส้นด้าย

yarn add react-instascan react instascan-umd

ใช้ unpkg CDN

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

ความต้องการ

หากต้องการใช้ไลบรารีนี้ คุณต้องมีอย่างน้อย:

ตอบสนอง >= 16.3
instascan-umd >= 1

ใช้มัน

กำลังนำเข้า

React Instascan เปิดเผยส่วนประกอบสองส่วน: กล้อง และ เครื่องสแกนเนอร์
ด้วย ESModules:

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

หรือกับ CommonsJS:

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

คอมโพเนนต์ "กล้อง" พร้อมอุปกรณ์ประกอบการเรนเดอร์ และจะดึงข้อมูลสำหรับกล้องที่มีอยู่ในอุปกรณ์ของคุณ
Scanner Component ได้รับเป็นอุปกรณ์ประกอบฉาก ของกล้อง และ VideoHTMLElement เป็นองค์ประกอบลูก จากนั้นจะเรียกผู้ฟัง onScan เมื่ออ่านโค้ด นอกจากนี้ยังมีเหตุการณ์ประเภทอื่นๆ ให้เลือก (ตรวจสอบตาราง API):

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

คุณสมบัติสแกนเนอร์

ชื่อ	พิมพ์	คำอธิบาย
กล้อง	วัตถุ	วัตถุกล้องส่งคืนโดย <Camera />
ตัวเลือก	วัตถุ	ตัวเลือกเดียวกันจาก Instascan.Scanner
หยุด	บูลีน	หากหยุดเป็นจริง กล้องจะหยุดและในทางกลับกัน
บนสแกน	การทำงาน	ปล่อยออกมาเมื่อสแกนโค้ด QR โดยใช้กล้องในโหมดต่อเนื่อง
บนเริ่มต้น	การทำงาน	เรียกว่าเมื่อกล้องทำงานและเริ่มการสแกน
บนหยุด	การทำงาน	โทรเมื่อกล้องและการสแกนหยุดทำงาน
onActive	การทำงาน	ปล่อยออกมาเมื่อสแกนเนอร์เริ่มทำงานอันเป็นผลมาจากการหยุดเป็นเท็จหรือแท็บได้รับการโฟกัส
บนไม่ได้ใช้งาน	การทำงาน	ปล่อยออกมาเมื่อเครื่องสแกนไม่ทำงานอันเป็นผลมาจากการหยุดเป็นจริงหรือแท็บสูญเสียโฟกัส

สำหรับรายละเอียดเพิ่มเติม โปรดตรวจสอบ Instascan API

มีส่วนร่วม

ใช้โดยตรงจากแหล่งที่มา

แม้ว่าโปรเจ็กต์นี้จะมาพร้อมกับตัวอย่างง่ายๆ แต่คุณอาจต้องการใช้โค้ดนี้กับโค้ดของคุณโดยตรงเพื่อทดสอบและแก้ไขข้อบกพร่องที่อาจเกิดขึ้น เพื่อที่คุณสามารถเชื่อมโยงแพ็คเกจนี้ได้