qr scanner

เครื่องสแกน QR

เครื่องสแกนรหัส QR Javascript อิงจากพอร์ตจาวาสคริปต์ของ Cosmo Wolfe ในไลบรารี ZXing ของ Google

ในไลบรารีนี้มีการปรับปรุงหลายอย่างกับพอร์ตดั้งเดิม:

• รองรับการสแกนเว็บแคมทันทีเมื่อแกะกล่อง
• ใช้ BarcodeDetector ดั้งเดิมของเบราว์เซอร์ หากมี
• น้ำหนักเบา: ~59.3 kB (~16.3 kB gzipped) ย่อขนาดด้วยคอมไพเลอร์ปิดของ Google หากมี BarcodeDetector ในตัว ระบบจะโหลดเพียง ~15.3 kB (~5.6 kB gzipped) เท่านั้น
• ปรับปรุงประสิทธิภาพและลดขนาดหน่วยความจำ
• ทำงานใน WebWorker ซึ่งช่วยให้เธรดหลัก / UI ตอบสนอง
• สามารถกำหนดค่าเพื่อประสิทธิภาพที่ดีขึ้นในรหัส QR แบบสี

จากการเปรียบเทียบของเรา อัตราการตรวจจับของกลไกสแกนเนอร์ของโปรเจ็กต์นี้อยู่ที่ประมาณ 2-3 เท่า (และสูงถึง 8 เท่า) ซึ่งสูงเท่ากับหนึ่งในไลบรารีสแกนเนอร์ QR จาวาสคริปต์ที่ได้รับความนิยมมากที่สุด LazarSoft/jsqrcode นอกจากนี้ห้องสมุดอื่นๆ มักจะอ่านเนื้อหาของรหัส QR ผิด ในขณะที่โปรเจ็กต์นี้ไม่มีการอ่านผิดในการเปรียบเทียบ

ไลบรารีรองรับการสแกนสตรีมวิดีโอต่อเนื่องจากเว็บแคมตลอดจนการสแกนภาพเดี่ยว

การพัฒนาห้องสมุดนี้ได้รับการสนับสนุนจาก nimiq ซึ่งเป็นบล็อคเชนที่ใช้เบราว์เซอร์ตัวแรกของโลก

สาธิต

ดู https://nimiq.github.io/qr-scanner/demo/

การติดตั้ง

วิธีติดตั้งผ่าน npm:

npm install --save qr-scanner

วิธีติดตั้งผ่านเส้นด้าย:

yarn add qr-scanner

หรือเพียงคัดลอก qr-scanner.min.js และ qr-scanner-worker.min.js ไปยังโปรเจ็กต์ของคุณ

ตั้งค่า

QR Scanner ประกอบด้วยไฟล์หลักสองไฟล์ qr-scanner.min.js เป็นไฟล์ API หลักที่โหลดสคริปต์ผู้ปฏิบัติงาน qr-scanner-worker.min.js ผ่านการนำเข้าแบบไดนามิก เฉพาะเมื่อจำเป็นเท่านั้น หากคุณไม่ได้ใช้ Bundler เช่น Rollup หรือ Webpack ที่จัดการการนำเข้าแบบไดนามิกโดยอัตโนมัติ คุณอาจต้องคัดลอก qr-scanner-worker.min.js ไปยัง dist ของคุณ ถัดจาก qr-scanner.min.js หรือถัดจากสคริปต์ ที่คุณกำลังรวม qr-scanner.min.js ไว้ด้วย

qr-scanner.min.js เป็นโมดูล es6 และสามารถนำเข้าได้ดังต่อไปนี้:

 import QrScanner from 'path/to/qr-scanner.min.js' ; // if using plain es6 import
import QrScanner from 'qr-scanner' ; // if installed via package and bundling with a module bundler like webpack or rollup

สิ่งนี้กำหนดให้สคริปต์การนำเข้าต้องเป็นโมดูล es6 หรือแท็กสคริปต์โมดูลด้วย เช่น:

 < script type =" module " >
    import QrScanner from 'path/to/qr-scanner.min.js' ;
    // do something with QrScanner
</ script >

หากโครงการของคุณไม่ได้ขึ้นอยู่กับโมดูล es6 คุณสามารถทำได้

• ใช้การนำเข้าแบบไดนามิกเพื่อนำเข้าโมดูล es6:

 import ( 'path/to/qr-scanner.min.js' ) . then ( ( module ) => {
    const QrScanner = module . default ;
    // do something with QrScanner
} ) ;

• ใช้ UMD build qr-scanner.umd.min.js สำหรับการใช้งานโดยตรงเป็นสคริปต์ที่ไม่ใช่โมดูล

 < script src =" path/to/qr-scanner.umd.min.js " > </ script >
< script >
    // do something with QrScanner
</ script >

• รวม qr-scanner.umd.min.js โดยตรงกับโค้ดที่ไม่ใช่โมดูลของคุณด้วยเครื่องมือเช่น gulp หรือ grunt
• รวม lib ด้วยบันเดิล require เช่น browserify:

 const QrScanner = require ( 'qr-scanner' ) ; // if installed via package
const QrScanner = require ( 'path/to/qr-scanner.umd.min.js' ) ; // if not installed via package
// do something with QrScanner

ไลบรารีนี้ใช้คุณสมบัติ ECMAScript 2017 เช่น ฟังก์ชัน async หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่า คุณสามารถใช้ qr-scanner.legacy.min.js ซึ่งเข้ากันได้กับ ECMAScript 2015 (ES6) เป็นรุ่น UMD และสามารถใช้แทน qr-scanner.umd.min.js ได้ ดูด้านบน โปรดทราบว่าบิลด์แบบเดิมมีขนาดใหญ่กว่าเนื่องจากมีโพลีฟิลบางตัว และเพื่อรองรับเบราว์เซอร์ที่ไม่รองรับการนำเข้าแบบไดนามิก ให้อินไลน์สคริปต์ของผู้ปฏิบัติงาน ซึ่งอย่างไรก็ตาม จะต้องโหลดในเบราว์เซอร์รุ่นเก่าอยู่ดี คุณอาจไม่จำเป็นต้องใช้รุ่นเดิม เนื่องจากการรองรับเบราว์เซอร์ทั่วไปนั้นดีมากสำหรับรุ่นปกติอยู่แล้ว โดยเฉพาะอย่างยิ่งหากคุณต้องการสแกนจากกล้องของอุปกรณ์ การรองรับกล้องโดยเบราว์เซอร์ถือเป็นข้อจำกัดที่เข้มงวดยิ่งขึ้น

การใช้งาน

การสแกนเว็บแคม

1. สร้าง HTML

สร้างองค์ประกอบ <video> ที่สตรีมวิดีโอของเว็บแคมควรได้รับการเรนเดอร์:

 < video > </ video > 

2. สร้างอินสแตนซ์ QrScanner

 // To enforce the use of the new api with detailed scan results, call the constructor with an options object, see below.
const qrScanner = new QrScanner (
    videoElem ,
    result => console . log ( 'decoded qr code:' , result ) ,
    { /* your options or returnDetailedScanResult: true if you're not specifying any other options */ } ,
) ;

// For backwards compatibility, omitting the options object will currently use the old api, returning scan results as
// simple strings. This old api will be removed in the next major release, by which point the options object is then
// also not required anymore to enable the new api.
const qrScanner = new QrScanner (
    videoElem ,
    result => console . log ( 'decoded qr code:' , result ) ,
    // No options provided. This will use the old api and is deprecated in the current version until next major version.
) ;

เนื่องจากเป็นพารามิเตอร์ตัวที่สามที่เป็นทางเลือก จึงสามารถระบุออบเจ็กต์ตัวเลือกได้ ตัวเลือกที่รองรับคือ:

ตัวเลือก	คำอธิบาย
onDecodeError	ตัวจัดการที่จะเรียกใช้เมื่อข้อผิดพลาดในการถอดรหัส ค่าเริ่มต้นคือ QrScanner._onDecodeError
preferredCamera	การตั้งค่าสำหรับกล้องที่จะใช้ การตั้งค่าอาจเป็นรหัสอุปกรณ์ที่ส่งคืนโดย listCameras หรือโหมดหันหน้าที่ระบุเป็น 'environment' หรือ 'user' ค่าเริ่มต้นคือ 'environment' โปรดทราบว่าไม่มีการรับประกันว่าจะสามารถตอบสนองความต้องการได้จริง
maxScansPerSecond	ตัวเลือกนี้สามารถใช้เพื่อควบคุมการสแกนเพื่อลดการใช้พลังงานแบตเตอรี่ ค่าเริ่มต้นคือ 25 หากเบราว์เซอร์รองรับ อัตราการสแกนจะไม่สูงกว่าอัตราเฟรมของกล้องเพื่อหลีกเลี่ยงการสแกนซ้ำโดยไม่จำเป็นในเฟรมเดียวกัน
calculateScanRegion	วิธีการที่กำหนดขอบเขตที่ควรจำกัดการสแกนเพื่อปรับปรุงประสิทธิภาพ ภูมิภาคนี้สามารถเลือกลดขนาดลงก่อนทำการสแกนเพื่อเป็นการปรับปรุงประสิทธิภาพเพิ่มเติมได้ ขอบเขตถูกระบุเป็น x , y , width และ height ; มิติข้อมูลสำหรับขอบเขตที่ลดขนาดเป็น downScaledWidth และ downScaledHeight โปรดทราบว่าอัตราส่วนกว้างยาวระหว่าง width และ height และ downScaledWidth และ downScaledHeight ควรยังคงเหมือนเดิม ตามค่าเริ่มต้น พื้นที่สแกนจะถูกจำกัดไว้ที่สี่เหลี่ยมจัตุรัสตรงกลางสองในสามของความกว้างหรือความสูงของวิดีโอ ขึ้นอยู่กับว่าขนาดใดจะเล็กกว่า และปรับขนาดลงเป็นสี่เหลี่ยมจัตุรัสขนาด 400x400
highlightScanRegion	ตั้งค่าตัวเลือกนี้เป็น true สำหรับการแสดงโครงร่างรอบๆ พื้นที่สแกนในสตรีมวิดีโอ สิ่งนี้ใช้ div ที่อยู่ในตำแหน่งที่แน่นอนซึ่งครอบคลุมขอบเขตการสแกน div นี้สามารถระบุเป็นตัวเลือก overlay ดูด้านล่าง หรือสร้างขึ้นโดยอัตโนมัติแล้วเข้าถึงผ่าน qrScanner.$overlay สามารถจัดสไตล์ได้อย่างอิสระผ่าน CSS เช่น โดยการตั้งค่าโครงร่าง เส้นขอบ สีพื้นหลัง ฯลฯ ดูตัวอย่างเพื่อดูตัวอย่าง
highlightCodeOutline	ตั้งค่าตัวเลือกนี้เป็น true สำหรับการแสดงโครงร่างรอบๆ โค้ด QR ที่ตรวจพบ สิ่งนี้ใช้ div ในตำแหน่งที่แน่นอนซึ่งจะวาง SVG สำหรับการแสดงผลโครงร่าง div นี้สามารถระบุเป็นตัวเลือก overlay ดูด้านล่าง หรือเข้าถึงได้ผ่าน qrScanner.$overlay SVG สามารถจัดสไตล์ได้อย่างอิสระผ่าน CSS เช่น โดยการตั้งค่าสีเติม สีเส้นขีด ความกว้างเส้นขีด ฯลฯ ดูตัวอย่าง สำหรับความต้องการพิเศษเพิ่มเติม คุณสามารถใช้ cornerPoints ได้โดยตรง ดูด้านล่าง เพื่อแสดงโครงร่างหรือจุดด้วยตนเอง
overlay	div แบบกำหนดเองที่สามารถจัดหาเพื่อใช้สำหรับ highlightScanRegion และ highlightCodeOutline div ควรเป็นพี่น้องของ videoElem ใน DOM หากระบุตัวเลือกนี้ไว้ ระบบจะไม่นำสไตล์เริ่มต้นสำหรับ highlightCodeOutline มาใช้ เนื่องจากคาดว่าองค์ประกอบนั้นจะใช้สไตล์ที่กำหนดเองบางอย่างอยู่แล้ว
returnDetailedScanResult	บังคับใช้การรายงานผลการสแกนโดยละเอียด ดูด้านล่าง

หากต้องการใช้ค่าเริ่มต้นสำหรับตัวเลือก ให้ละเว้นหรือระบุ undefined

ผลลัพธ์ที่ส่งผ่านไปยังการโทรกลับขึ้นอยู่กับว่ามีการระบุวัตถุตัวเลือกไว้หรือไม่:

• หากไม่มีออบเจ็กต์ตัวเลือก ผลลัพธ์จะเป็นสตริงที่มีเนื้อหาของโค้ด QR ที่อ่านได้ ประเภทการส่งคืนสตริงแบบง่ายมีไว้เพื่อความเข้ากันได้แบบย้อนหลัง ขณะนี้เลิกใช้แล้วและจะถูกลบออกในอนาคต
• หากระบุออบเจ็กต์ตัวเลือก ผลลัพธ์จะเป็นออบเจ็กต์ที่มี data คุณสมบัติซึ่งเป็นเนื้อหาสตริงของโค้ด QR ที่อ่านและ cornerPoints ซึ่งเป็นจุดมุมของโครงร่างของโค้ด QR ที่อ่านบนสตรีมของกล้อง

เพื่อหลีกเลี่ยงการใช้ API ที่เลิกใช้งานแล้ว หากคุณไม่ได้ระบุตัวเลือกอื่นๆ คุณสามารถระบุ { returnDetailedScanResult: true } เพื่อเปิดใช้งาน API ใหม่และรับผลการสแกนโดยละเอียด

3. เริ่มการสแกน

 qrScanner . start ( ) ;

เรียกใช้งานได้เมื่อคุณพร้อมที่จะสแกน เช่น เมื่อคลิกปุ่มหรือเมื่อโหลดหน้าเว็บโดยตรง มันจะแจ้งให้ผู้ใช้ขออนุญาตใช้กล้อง หมายเหตุ: หากต้องการอ่านจากสตรีมเว็บแคม เพจของคุณต้องให้บริการผ่าน HTTPS

4. หยุดการสแกน

 qrScanner . stop ( ) ;

หากต้องการ คุณสามารถหยุดการสแกนได้ตลอดเวลาและดำเนินการต่อโดยเรียก start() อีกครั้ง

การสแกนภาพเดียว

 QrScanner . scanImage ( image )
    . then ( result => console . log ( result ) )
    . catch ( error => console . log ( error || 'No QR code found.' ) ) ;

แหล่งที่มาของรูปภาพที่รองรับ ได้แก่ HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, File / Blob, URI ข้อมูล, URL ที่ชี้ไปที่รูปภาพ (หากอยู่ในแหล่งกำเนิดเดียวกันหรือเปิดใช้งาน CORS)

เนื่องจากเป็นพารามิเตอร์ตัวที่สองที่เป็นทางเลือก จึงสามารถระบุออบเจ็กต์ตัวเลือกได้ ตัวเลือกที่รองรับคือ:

ตัวเลือก	คำอธิบาย
scanRegion	ขอบเขตที่กำหนดโดย x , y , width และ height ซึ่งควรจำกัดการค้นหาโค้ด QR เพื่อเป็นการปรับปรุงประสิทธิภาพ ภูมิภาคนี้สามารถปรับขนาดลงก่อนทำการสแกนโดยระบุ downScaledWidth และ downScaledHeight โปรดทราบว่าอัตราส่วนกว้างยาวระหว่าง width และ height และ downScaledWidth และ downScaledHeight ควรยังคงเหมือนเดิม ตามค่าเริ่มต้น ขอบเขตจะขยายทั้งรูปภาพและไม่ได้ลดขนาดลง
qrEngine	อินสแตนซ์กลไกเครื่องสแกน QR ที่สร้างขึ้นด้วยตนเองเพื่อนำมาใช้ซ้ำ วิธีนี้จะปรับปรุงประสิทธิภาพหากคุณสแกนภาพจำนวนมาก สามารถสร้างเอ็นจิ้นได้ด้วยตนเองผ่าน QrScanner.createQrEngine(QrScanner.WORKER_PATH) ตามค่าเริ่มต้น จะไม่มีการใช้กลไกซ้ำสำหรับการสแกนรูปภาพเดี่ยว
canvas	ผืนผ้าใบที่สร้างขึ้นด้วยตนเองเพื่อนำมาใช้ซ้ำ วิธีนี้จะปรับปรุงประสิทธิภาพหากคุณสแกนภาพจำนวนมาก คุณสามารถสร้างผืนผ้าใบได้ด้วยตนเองผ่านแท็ก <canvas> ในมาร์กอัปของคุณหรือ document.createElement('canvas') ตามค่าเริ่มต้น จะไม่มีการใช้ Canvas ซ้ำสำหรับการสแกนรูปภาพเดี่ยว
disallowCanvasResizing	ขอผืนผ้าใบที่เตรียมไว้เพื่อใช้ซ้ำเพื่อไม่ให้ปรับขนาด โดยไม่คำนึงถึงขนาดรูปภาพต้นฉบับหรือขอบเขตของแหล่งที่มา โปรดทราบว่าพื้นที่แคนวาสและแหล่งที่มาควรมีอัตราส่วนเท่ากัน เพื่อหลีกเลี่ยงไม่ให้รูปภาพที่จะสแกนบิดเบี้ยว ซึ่งอาจทำให้ไม่สามารถตรวจจับโค้ด QR ได้ ตามค่าเริ่มต้น ขนาดผืนผ้าใบจะถูกปรับตามขนาดขอบเขตการสแกนหรือขอบเขตการสแกนที่ลดขนาดลงสำหรับการสแกนภาพเดียว
alsoTryWithoutScanRegion	ขอให้สแกนรูปภาพทั้งหมดอีกครั้งหากมีการระบุ scanRegion และไม่พบโค้ด QR ภายในภูมิภาคนั้น ตามค่าเริ่มต้น จะไม่มีการพยายามสแกนครั้งที่สอง
returnDetailedScanResult	บังคับใช้การรายงานผลการสแกนโดยละเอียด ดูด้านล่าง

หากต้องการใช้ค่าเริ่มต้นสำหรับตัวเลือก ให้ละเว้นหรือระบุ undefined

ผลลัพธ์ที่ส่งคืนขึ้นอยู่กับว่ามีการระบุออบเจ็กต์ตัวเลือกไว้หรือไม่:

• หากไม่มีออบเจ็กต์ตัวเลือก ผลลัพธ์จะเป็นสตริงที่มีเนื้อหาของโค้ด QR ที่อ่านได้ ประเภทการส่งคืนสตริงแบบง่ายมีไว้เพื่อความเข้ากันได้แบบย้อนหลัง ขณะนี้เลิกใช้แล้วและจะถูกลบออกในอนาคต
• หากระบุออบเจ็กต์ตัวเลือก ผลลัพธ์จะเป็นออบเจ็กต์ที่มี data คุณสมบัติซึ่งเป็นเนื้อหาสตริงของโค้ด QR ที่อ่านและ cornerPoints ซึ่งเป็นจุดมุมของโครงร่างของโค้ด QR ที่อ่านบนสตรีมของกล้อง

เพื่อหลีกเลี่ยงการใช้ API ที่เลิกใช้งานแล้ว หากคุณไม่ได้ระบุตัวเลือกอื่นๆ คุณสามารถระบุ { returnDetailedScanResult: true } เพื่อเปิดใช้งาน API ใหม่และรับผลการสแกนโดยละเอียด

หากไม่สามารถอ่านโค้ด QR ได้ scanImage จะส่งออกมา

กำลังตรวจสอบความพร้อมของกล้อง

ไลบรารีนี้มีวิธีการอรรถประโยชน์ในการตรวจสอบว่าอุปกรณ์มีกล้องหรือไม่ สิ่งนี้มีประโยชน์ในการพิจารณาว่าจะเสนอฟังก์ชันการสแกนเว็บแคม QR ให้กับผู้ใช้หรือไม่

 QrScanner . hasCamera ( ) ; // async

รับรายการกล้องที่มีอยู่

ไลบรารีนี้มีวิธีอรรถประโยชน์ในการรับรายการกล้องของอุปกรณ์ ซึ่งกำหนดผ่าน id และ label สิ่งนี้มีประโยชน์สำหรับการให้ผู้ใช้เลือกกล้องเฉพาะที่จะใช้

คุณสามารถเลือกขอฉลากของกล้องได้ โปรดทราบว่าการดำเนินการนี้ต้องได้รับอนุญาตจากผู้ใช้ในการเข้าถึงกล้อง ซึ่งระบบจะถามเขาหากยังไม่อนุญาต หากไม่ได้รับการร้องขอเป็นพิเศษ ป้ายกำกับอุปกรณ์จะถูกกำหนดบนพื้นฐานความพยายามอย่างดีที่สุด กล่าวคือ ป้ายกำกับจริงจะถูกส่งกลับหากได้รับอนุญาตแล้ว และป้ายกำกับทางเลือกอื่นๆ หากคุณต้องการขอป้ายกำกับกล้อง ขอแนะนำให้โทรหา listCameras หลังจากเริ่มต้นอินสแตนซ์ QrScanner สำเร็จแล้ว เนื่องจากเมื่อถึงตอนนั้นผู้ใช้จะได้ให้สิทธิ์แล้ว

 QrScanner . listCameras ( ) ; // async; without requesting camera labels
QrScanner . listCameras ( true ) ; // async; requesting camera labels, potentially asking the user for permission

การระบุกล้องที่จะใช้

คุณสามารถเปลี่ยนกล้องที่ต้องการใช้ การตั้งค่าอาจเป็นรหัสอุปกรณ์ที่ส่งคืนโดย listCameras หรือโหมดหันหน้าที่ระบุเป็น 'environment' หรือ 'user' โปรดทราบว่าไม่มีการรับประกันว่าจะสามารถตอบสนองความต้องการได้จริง

 qrScanner . setCamera ( facingModeOrDeviceId ) ; // async

โหมดกลับสี

เครื่องสแกนตามค่าเริ่มต้นจะสแกนหารหัส QR ที่มืดบนพื้นหลังที่สว่าง คุณสามารถเปลี่ยนลักษณะการทำงานนี้เพื่อสแกนหารหัส QR ที่สว่างบนพื้นหลังสีเข้มหรือทั้งสองอย่างในเวลาเดียวกัน:

 qrScanner . setInversionMode ( inversionMode ) ;

โดยที่ inversionMode สามารถเป็น original , invert หรือ both ค่าเริ่มต้นสำหรับการสแกนเว็บแคมเป็น original และสำหรับการสแกนรูปภาพเดียว both

การแก้ไขสี

เปลี่ยนน้ำหนักของสีแดง เขียว และน้ำเงินในการคำนวณระดับสีเทาเพื่อปรับปรุงคอนทราสต์สำหรับโค้ด QR ของสีเฉพาะ:

 qrScanner . setGrayscaleWeights ( red , green , blue , useIntegerApproximation = true ) ;

โดยที่ red , green และ blue ควรรวมเป็น 256 ถ้า useIntegerApproximation === true และ 1 เป็นอย่างอื่น ตามค่าเริ่มต้น ระบบจะใช้ค่าเหล่านี้

การสนับสนุนไฟฉาย

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

 qrScanner . hasFlash ( ) ; // check whether the browser and used camera support turning the flash on; async.
qrScanner . isFlashOn ( ) ; // check whether the flash is on
qrScanner . turnFlashOn ( ) ; // turn the flash on if supported; async
qrScanner . turnFlashOff ( ) ; // turn the flash off if supported; async
qrScanner . toggleFlash ( ) ; // toggle the flash if supported; async.

ทำความสะอาด

คุณสามารถทำลายเครื่องสแกน QR ได้หากไม่ต้องการใช้อีกต่อไป:

 qrScanner . destroy ( ) ;
qrScanner = null ;

การดำเนินการนี้จะหยุดการสตรีมของกล้องและพนักงานเว็บ และล้างข้อมูลผู้ฟังเหตุการณ์ เครื่องสแกน QR จะทำงานผิดปกติหลังจากถูกทำลาย

สร้างโครงการ

โปรเจ็กต์นี้สร้างไว้ล่วงหน้าใน qr-scanner.min.js ร่วมกับ qr-scanner-worker.min.js การสร้างตัวเองเป็นสิ่งจำเป็นเฉพาะในกรณีที่คุณต้องการเปลี่ยนโค้ดในโฟลเดอร์ /src จำเป็นต้องมี NodeJs สำหรับการสร้าง

ติดตั้งแพ็คเกจบิลด์ที่จำเป็น:

yarn

อาคาร:

yarn build