html5 qrcode

Html5-QRCode

สำคัญ - กำลังมองหาเจ้าของใหม่สำหรับโครงการนี้

หากสนใจโปรดติดต่อที่ [email protected]

Html5-QRCode

สำคัญ โครงการอยู่ในโหมดการบำรุงรักษาจนกว่าจะมีประกาศเพิ่มเติม ผู้เขียนจะไม่สามารถแก้ไขข้อบกพร่องหรือปรับปรุงใดๆ ได้ในขณะนี้ คำขอดึงจะไม่ถูกรวมเข้าด้วยกันในขณะนี้ หากคุณมีทางแยกที่คุณสามารถรักษาได้ - โปรดแบ่งปันรายละเอียดไปที่ [email protected] ฉันยินดีที่จะโฆษณาพวกเขาที่นี่! ตกลงเพื่อใช้โครงการตามที่เป็นอยู่ ตัวอย่าง: scanapp.org

QR Code น้ำหนักเบาและข้ามแพลตฟอร์มและไลบรารีการสแกนบาร์โค้ดสำหรับเว็บ

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

ไฮไลท์ที่สำคัญ

• - รองรับการสแกนบาร์โค้ดและคิวอาร์โค้ดประเภทต่างๆ

• - รองรับแพลตฟอร์มที่แตกต่างกันไม่ว่าจะเป็น Android, IOS, MacOs, Windows หรือ Linux

• รองรับเบราว์เซอร์ต่าง ๆ เช่น Chrome, Firefox, Safari, Edge, Opera ...

• - รองรับการสแกนด้วยกล้องและไฟล์ในเครื่อง

• ➡️มาพร้อมกับไลบรารี่แบบ end to end พร้อม UI รวมถึงไลบรารี่ระดับต่ำสำหรับสร้าง UI ของคุณเองด้วย

• - รองรับการปรับแต่ง เช่น รองรับแฟลช/ไฟฉาย การซูม ฯลฯ

รองรับ API สองประเภท

• Html5QrcodeScanner — เครื่องสแกนแบบ end-to-end พร้อม UI ผสานรวมกับโค้ดน้อยกว่าสิบบรรทัด

• Html5Qrcode — ชุด API อันทรงพลังที่คุณสามารถใช้เพื่อสร้าง UI ของคุณโดยไม่ต้องกังวลกับการตั้งค่ากล้อง สิทธิ์ในการจัดการ การอ่านโค้ด ฯลฯ

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

การสาธิตที่ scanapp.org	สาธิตที่ qrcode.minhazav.dev - การสแกนรหัสประเภทต่างๆ

เราต้องการความช่วยเหลือจากคุณ!

ช่วยกระตุ้นการพัฒนาฟีเจอร์ แก้ไขข้อบกพร่องโดยสนับสนุนเป้าหมายการสนับสนุนของโปรเจ็กต์นี้ ดูรายการคำขอคุณลักษณะที่ได้รับการสนับสนุนที่นี่

เอกสารประกอบ

เอกสารสำหรับโครงการนี้ถูกย้ายไปที่ scanapp.org/html5-qrcode-docs

• เริ่มต้นใช้งาน
• กรอบการทำงานที่รองรับ
• รองรับรูปแบบโค้ด 1D และ 2D
• เอกสาร API โดยละเอียด

แพลตฟอร์มที่รองรับ

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

ตำนาน

• หมายถึงการสนับสนุนเต็มรูปแบบ — เว็บแคมแบบอินไลน์และแบบไฟล์
• หมายถึงการสนับสนุนบางส่วน — อิงตามไฟล์เท่านั้น กำลังดำเนินการกับเว็บแคม

พีซี/แมค

ไฟร์ฟอกซ์	โครเมียม	ซาฟารี	โอเปร่า	ขอบ

หุ่นยนต์

โครเมียม	ไฟร์ฟอกซ์	ขอบ	โอเปร่า	โอเปร่ามินิ	ยูซี

ไอโอเอส

ซาฟารี	โครเมียม	ไฟร์ฟอกซ์	ขอบ
	-	-

* รองรับ iOS เวอร์ชัน >= 15.1

ก่อนเวอร์ชัน 15.1 Chrome, Firefox และเบราว์เซอร์อื่นๆ ใน IOS จะใช้ Webkit สำหรับ IOS และเบราว์เซอร์เหล่านี้ยังไม่มีสิทธิ์ใช้เว็บแคม มีปัญหาอย่างต่อเนื่องในการแก้ไขปัญหาการรองรับ iOS - issue/14

การสนับสนุนกรอบงาน

ไลบรารี่สามารถใช้งานร่วมกับเฟรมเวิร์กอื่น ๆ ได้อย่างง่ายดาย ฉันได้เพิ่มตัวอย่างสำหรับบางเฟรมเวิร์กแล้วและจะเพิ่มต่อไปอีก

Html5	วิวเจส	อิเล็กตรอนจ	ตอบสนอง	สว่าง

รูปแบบรหัสที่รองรับ

การสแกนโค้ดขึ้นอยู่กับไลบรารี Zxing-js เราจะดำเนินการเพิ่มเติมเพื่อเพิ่มการรองรับสำหรับการสแกนโค้ดประเภทต่างๆ มากขึ้น หากคุณรู้สึกว่าโค้ดบางประเภทอาจเป็นประโยชน์ โปรดยื่นคำขอคุณลักษณะ

รหัส	ตัวอย่าง
คิวอาร์โค้ด
แอซเท็ก
รหัส_39
รหัส_93
รหัส_128
ไอทีเอฟ
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
ข้อมูล_เมทริกซ์
แม็กซิโค้ด*
RSS_14*
RSS_ขยาย*

*รูปแบบไม่ได้รับการสนับสนุนโดยการผสานรวมแบบทดลองของเราเข้ากับการผสานรวม BarcodeDetector API ดั้งเดิม (อ่านเพิ่มเติม)

คำอธิบาย - ดูการสาธิต

ดูประสบการณ์สแกนเนอร์ตั้งแต่ต้นจนจบที่ scanapp.org

นี่คือไลบรารี JavaScript ข้ามแพลตฟอร์มเพื่อรวมโค้ด QR บาร์โค้ด และความสามารถในการสแกนโค้ดประเภทอื่นๆ เข้ากับแอปพลิเคชันของคุณที่ทำงานบนเบราว์เซอร์ที่รองรับ HTML5

รองรับ:

• การสอบถามกล้องบนอุปกรณ์ (โดยได้รับอนุญาตจากผู้ใช้)
• แสดงผลฟีดกล้องสดพร้อมอินเทอร์เฟซผู้ใช้ที่ใช้งานง่ายสำหรับการสแกน
• รองรับการสแกนโค้ด QR บาร์โค้ด และรูปแบบอื่นๆ ประเภทต่างๆ
• รองรับการเลือกไฟล์รูปภาพจากอุปกรณ์เพื่อสแกนโค้ด

วิธีใช้

ค้นหาคำแนะนำโดยละเอียดเกี่ยวกับวิธีใช้ไลบรารีนี้ที่ scanapp.org/html5-qrcode-docs

สาธิต

สแกนภาพนี้หรือไปที่ blog.minhazav.dev/research/html5-qrcode.html

หากต้องการข้อมูลเพิ่มเติม

ตรวจสอบบทความเหล่านี้เกี่ยวกับวิธีใช้ไลบรารีนี้:

• เครื่องสแกน QR และบาร์โค้ดโดยใช้ HTML และ JavaScript
• การสแกนโค้ด HTML5 QR — เปิดตัว v1.0.1 โดยไม่มีการพึ่งพา jQuery และปรับโครงสร้าง API ตามสัญญาใหม่
• การสแกนโค้ด HTML5 QR ด้วย JavaScript — รองรับการสแกนไฟล์ในเครื่องและเพิ่มกล้องเริ่มต้น (v1.0.5)

ภาพหน้าจอ

รูปภาพ: ภาพหน้าจอจาก Google Chrome ที่ทำงานบน MacBook Pro

เอกสารประกอบ

ค้นหาเอกสาร API ฉบับเต็มได้ที่ scanapp.org/html5-qrcode-docs/docs/apis

configuration ค่าเพิ่มเติมเพิ่มเติมในเมธอด start()

ออบเจ็กต์การกำหนดค่าที่สามารถใช้เพื่อกำหนดค่าทั้งลักษณะการสแกนและอินเทอร์เฟซผู้ใช้ (UI) ฟิลด์ส่วนใหญ่มีคุณสมบัติเริ่มต้นที่จะใช้เว้นแต่จะระบุค่าอื่นไว้ หากคุณไม่ต้องการแทนที่สิ่งใด คุณสามารถส่งผ่านวัตถุว่าง {} ได้

fps — จำนวนเต็ม ตัวอย่าง = 10

AKA เฟรมต่อวินาที ค่าเริ่มต้นสำหรับสิ่งนี้คือ 2 แต่สามารถเพิ่มได้เพื่อให้สแกนเร็วขึ้น การเพิ่มมูลค่าที่สูงเกินไปอาจส่งผลต่อประสิทธิภาพ ค่า >1000 จะล้มเหลว

qrbox — QrDimensions หรือ QrDimensionFunction (ไม่บังคับ) ตัวอย่าง = { width: 250, height: 250 }

ใช้คุณสมบัตินี้เพื่อจำกัดขอบเขตของช่องมองภาพที่คุณต้องการใช้สำหรับการสแกน ช่องมองภาพที่เหลือจะเป็นสีเทา ตัวอย่างเช่น โดยการส่ง config { qrbox : { width: 250, height: 250 } } หน้าจอจะมีลักษณะดังนี้:

สามารถใช้เพื่อตั้งค่าพื้นที่สแกนสี่เหลี่ยมด้วยการกำหนดค่าดังนี้:

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

การกำหนดค่านี้ยังยอมรับฟังก์ชันประเภทด้วย

 /**
  * 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 ;

ซึ่งช่วยให้คุณกำหนดขนาดกล่อง QR แบบไดนามิกตามขนาดวิดีโอได้ ดูตัวอย่างบทความบล็อกนี้: การตั้งค่าขนาดกล่อง QR แบบไดนามิกใน Html5-qrcode - บล็อก ScanApp

นี่อาจเป็นที่ต้องการสำหรับการสแกนบาร์โค้ด

หากไม่ได้ตั้งค่านี้ จะไม่มีการแสดงกล่อง QR ที่แรเงา และเครื่องสแกนจะสแกนพื้นที่ทั้งหมดของสตรีมวิดีโอ

aspectRatio — ลอย ตัวอย่าง 1.777778 สำหรับอัตราส่วนภาพ 16:9

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

ค่า	อัตราส่วนภาพ	ใช้กรณี
1.333334	4:3	อัตราส่วนภาพของกล้องมาตรฐาน
1.777778	16:9	เต็มจอแบบภาพยนตร์
1.0	1:1	วิวสี่เหลี่ยม

หากคุณไม่ผ่านค่าใดๆ ช่องมองภาพทั้งหมดจะถูกใช้สำหรับการสแกน หมายเหตุ : ค่านี้จะต้องน้อยกว่าความกว้างและความสูงของ QR code HTML element

disableFlip — บูลีน (ไม่บังคับ) ค่าเริ่มต้น = เท็จ

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

• คุณแน่ใจว่าฟีดกล้องไม่สามารถสะท้อนได้ (พลิกแนวนอน)
• คุณกำลังประสบปัญหาด้านประสิทธิภาพเมื่อเปิดใช้งานสิ่งนี้

นี่คือตัวอย่าง QR Code แบบปกติและแบบมิเรอร์

รหัส QR ปกติ	มิเรอร์รหัส QR

rememberLastUsedCamera — บูลีน (ไม่บังคับ) ค่าเริ่มต้น = จริง

หากเป็น true กล้องตัวสุดท้ายที่ผู้ใช้ใช้และสภาพอากาศหรือไม่อนุญาตจะถูกจดจำไว้ในที่จัดเก็บในตัวเครื่อง หากผู้ใช้ให้สิทธิ์ก่อนหน้านี้ ตัวเลือกการขอสิทธิ์ใน UI จะถูกข้ามและกล้องที่เลือกล่าสุดจะถูกเปิดใช้งานโดยอัตโนมัติสำหรับการสแกน

หาก true ห้องสมุดจะจดจำว่าก่อนหน้านี้มีการอนุญาตกล้องหรือไม่ และกล้องใดที่ใช้งานครั้งล่าสุด หากได้รับสิทธิ์อนุญาตสำหรับ "กล้อง" แล้ว การสแกนโค้ด QR จะ * เริ่มต้นโดยอัตโนมัติสำหรับกล้องที่ใช้ก่อนหน้านี้

supportedScanTypes - Array<Html5QrcodeScanType> | []

สิ่งนี้รองรับเฉพาะ Html5QrcodeScanner เท่านั้น

ค่าเริ่มต้น = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]

ฟิลด์นี้สามารถใช้เพื่อ:

• จำกัดการสนับสนุนการสแกนตาม Camera หรือ File
• เปลี่ยนประเภทการสแกนเริ่มต้น

วิธีใช้:

 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 ) ;

สำหรับการสแกนตามไฟล์ ให้เลือก:

supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]

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

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
  Html5QrcodeScanType . SCAN_TYPE_FILE ]

หากต้องการตั้งค่าการสแกนตามไฟล์เป็นค่าเริ่มต้นให้เปลี่ยนลำดับ:

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_FILE ,
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ] 

showTorchButtonIfSupported - boolean | undefined

สิ่งนี้รองรับเฉพาะ Html5QrcodeScanner เท่านั้น

หากเป็น true UI ที่แสดงผลจะมีปุ่มสำหรับเปิดหรือปิดแฟลชตามการรองรับอุปกรณ์และเบราว์เซอร์ ค่าเป็น false โดยค่าเริ่มต้น

การสแกนเฉพาะรูปแบบที่กำหนด

ตามค่าเริ่มต้น ทั้งสตรีมของกล้องและไฟล์ภาพจะถูกสแกนเทียบกับรูปแบบโค้ดที่รองรับทั้งหมด ทั้งคลาส Html5QrcodeScanner และ Html5Qrcode สามารถกำหนดค่าให้รองรับเฉพาะชุดย่อยของรูปแบบที่รองรับเท่านั้น รูปแบบที่รองรับถูกกำหนดไว้ใน enum Html5QrcodeSupportedFormats

 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 ,
}

ฉันแนะนำให้ใช้สิ่งนี้เฉพาะเมื่อคุณต้องการละเว้นการสนับสนุนสำหรับรูปแบบบางอย่างอย่างชัดเจน หรือต้องการลดจำนวนการสแกนต่อวินาทีด้วยเหตุผลด้านประสิทธิภาพ

สแกนเฉพาะรหัส QR ด้วย 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 ) ; 

สแกนเฉพาะรหัส QR และรหัส UPC ด้วย 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 ) ; 

คุณสมบัติการทดลอง

ขณะนี้ไลบรารีสนับสนุนคุณลักษณะทดลองบางอย่างซึ่งได้รับการสนับสนุนในไลบรารี แต่ไม่แนะนำสำหรับการใช้งานจริง เนื่องจากการทดสอบที่จำกัดหรือความเข้ากันได้ที่จำกัดสำหรับ API พื้นฐานที่ใช้ อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่ คุณลักษณะการทดลองบางอย่าง ได้แก่:

• รองรับ BarcodeDetector JavaScript API

วิธีการแก้ไขและสร้าง

1. การเปลี่ยนแปลงโค้ดควรทำใน /src เท่านั้น

2. รัน npm install เพื่อติดตั้งการขึ้นต่อกันทั้งหมด

3. รัน npm run-script build เพื่อสร้างเอาต์พุต JavaScript การกระจาย JavaScript เอาต์พุตถูกสร้างขึ้นเพื่อ /dist/html5-qrcode.min.js หากคุณกำลังพัฒนาบน Windows OS ให้รัน npm run-script build-windows

4. การทดสอบ

   • รัน npm test
   • รันการทดสอบก่อนที่จะส่งคำขอดึง การทดสอบทั้งหมดควรดำเนินการ
   • โปรดเพิ่มการทดสอบสำหรับพฤติกรรมใหม่ที่ส่งใน PR

5. ส่งคำขอดึง

   • รวมการเปลี่ยนแปลงโค้ดเป็น ./src เท่านั้น อย่าเปลี่ยน ./dist ด้วยตนเอง
   • ในคำขอดึงให้เพิ่มความคิดเห็นเช่น

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

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

วิธีการมีส่วนร่วม

คุณสามารถมีส่วนร่วมในโครงการได้หลายวิธี:

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

สนับสนุน ?

โครงการนี้คงเป็นไปไม่ได้หากไม่มีผู้มีส่วนร่วมและผู้สนับสนุนที่ยอดเยี่ยมของเรา หากคุณต้องการสนับสนุนการบำรุงรักษาและบำรุงรักษาโครงการนี้ คุณสามารถบริจาคผ่านผู้สนับสนุน GitHub

สนับสนุนโครงการเพื่อจัดลำดับความสำคัญคำขอคุณลักษณะ/ข้อบกพร่องที่เกี่ยวข้องกับคุณ (ขึ้นอยู่กับขอบเขตการถามและแบนด์วิธของผู้มีส่วนร่วม)

ช่วยกระตุ้นการพัฒนาฟีเจอร์ แก้ไขข้อบกพร่องโดยสนับสนุนเป้าหมายการสนับสนุนของโปรเจ็กต์นี้ ดูรายการคำขอคุณลักษณะที่ได้รับการสนับสนุนที่นี่

นอกจากนี้ ขอขอบคุณอย่างยิ่งต่อองค์กรต่อไปนี้สำหรับการให้การสนับสนุนที่ไม่เกี่ยวกับการเงิน

เครดิต

ตัวถอดรหัสที่ใช้สำหรับการอ่านโค้ด QR มาจาก Zxing-js https://github.com/zxing-js/library