หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ชุดของ Vue.js ส่วนประกอบสำหรับการตรวจจับรหัส QR และรูปแบบบาร์โค้ดอื่น ๆ ในเบราว์เซอร์:

  • QrcodeStream สแกนเฟรมจากสตรีมกล้องอย่างต่อเนื่อง

  • QrcodeDropZone เป็นพื้นที่ว่างเปล่าที่คุณสามารถถอดรหัสภาพลากแล้ววางได้

  • QrcodeCapture เป็นฟิลด์อัพโหลดไฟล์คลาสสิกสแกนไฟล์ทั้งหมดที่คุณเลือกทันที

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

 <qrcode-stream @detect = "ondetect"> </qrcode-stream>
 วิธีการ: {
  onDetect (detectedCodes) {// ...
  -

การติดตั้ง

ด้วย NPM

วิ่ง

 npm ติดตั้ง vue-qrcode-reader

คุณสามารถนำเข้าส่วนประกอบได้อย่างอิสระ

 นำเข้า {qrcodeStream, qrcodeDropzone, qrcodecapture} จาก 'vue-qrcode-reader'const myComponent = {
  -
  ส่วนประกอบ: {qrcodestream, qrcodedropzone, qrcodecapture}

  -

หรือลงทะเบียนทั้งหมดทั่วโลกทันที

 นำเข้า Vue จาก 'Vue'import Vueqrcodereader จาก' vue-qrcode-reader'vue.use (vueqrcodereader)

ไม่มี NPM

รวมไฟล์ JS ต่อไปนี้:

https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js

ตรวจสอบให้แน่ใจว่าได้รวมไว้หลังจาก Vue:

 <script src = "./ vue.js"> </script> <script src = "./ vue-qrcode-reader.umd.js"> </script>

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

 <qrcode-stream> </qrcode-stream> <qrcode-drop-zone> </qrcode-drop-zone> <qrcode-Capture> </qrcode-Capture>

การแก้ไขปัญหา⚡

ฉันไม่เห็นกล้องเมื่อใช้ QrcodeStream

  • ตรวจสอบว่ามันใช้งานได้ในหน้าสาธิตหรือไม่ โดยเฉพาะอย่างยิ่งการสาธิตข้อผิดพลาดในการจัดการเนื่องจากจะแสดงข้อความแสดงข้อผิดพลาด

    • การสาธิตใช้งานได้ แต่ไม่ได้ผลในโครงการของฉัน: ฟังเหตุการณ์ error เพื่อตรวจสอบข้อผิดพลาด

    • การสาธิตไม่ทำงาน: ตรวจสอบส่วนการสนับสนุนเบราว์เซอร์ด้านบนอย่างระมัดระวัง บางทีอุปกรณ์ของคุณอาจไม่รองรับ

ฉันใช้เซิร์ฟเวอร์ dev บน localhost วิธีทดสอบบนอุปกรณ์มือถือของฉันโดยไม่มี https?

  • หากการตั้งค่าของคุณคือ Desktop Chrome + Android Chrome ให้ใช้การดีบักระยะไกลซึ่งช่วยให้อุปกรณ์ Android ของคุณเข้าถึงเซิร์ฟเวอร์ท้องถิ่นของคุณเป็น localhost

  • มิฉะนั้นใช้พร็อกซีย้อนกลับเช่น Ngrok หรือ Serveo เพื่อให้เซิร์ฟเวอร์ท้องถิ่นของคุณเป็นแบบสาธารณะชั่วคราวด้วย HTTPS

  • นอกจากนี้ยังมีบริการโฮสติ้งแบบไม่มีเซิร์ฟเวอร์/สแตติกจำนวนมากที่เปิดใช้งาน HTTPS ตามค่าเริ่มต้นและสถานที่ที่คุณสามารถปรับใช้แอปพลิเคชันเว็บของคุณได้ฟรี (เช่น หน้า GitHub , หน้า Gitlab , Google Firebase , Netlify , Heroku , Zeit , ... )

ไม่พบรหัส QR ของฉัน

  • ตรวจสอบให้แน่ใจว่ามีเส้นขอบสีขาวอยู่รอบ ๆ รหัส QR

  • ทดสอบรหัส QR ของคุณในแพ็คเกจต้นน้ำ: barcode-detector -> zxing-wasm > zxing-cpp และปัญหาการตรวจจับไฟล์ในที่เก็บระดับสูงสุดซึ่งปัญหาเกิดขึ้นครั้งแรก

ไม่พบบาร์โค้ด 1D

ค่าเริ่มต้นสำหรับ formats คือ "['qr_code']" ซึ่งสะท้อนการตั้งค่าก่อนที่จะมีรูป formats คุณจะต้องเพิ่มรูปแบบบาร์โค้ดอื่น ๆ ในเสานี้เพื่อตรวจจับบาร์โค้ดประเภทนั้น ตรวจสอบการสาธิตนี้

จะทำให้มันทำงานกับ Vue 2 ได้อย่างไร?

การสนับสนุนลดลง แต่คุณสามารถลดระดับเป็น vue-qrcode-reader v3.* หรือต่ำกว่า

ฉันได้รับข้อผิดพลาด "ล้มเหลวในการดึง" ที่รันไทม์สำหรับไฟล์ WASM บางไฟล์

ไฟล์ WASM นั้นใช้เครื่องตรวจจับรหัส QR น่าเสียดายที่มันไม่สะดวกมากที่จะรวมไฟล์นี้เข้ากับแพ็คเกจ ดังนั้นโดยค่าเริ่มต้นเราจะดึงมันที่รันไทม์จาก CDN นั่นเป็นปัญหาสำหรับแอปพลิเคชันออฟไลน์หรือแอปพลิเคชันที่ทำงานในเครือข่ายที่มีนโยบาย CSP ที่เข้มงวด สำหรับวิธีแก้ปัญหาดู: #354

torch ไม่รองรับบนอุปกรณ์ของฉันแม้ว่าจะมีไฟฉาย

การสนับสนุนสำหรับ torch นั้นไม่สอดคล้องกันในอุปกรณ์กล้องและเบราว์เซอร์และระบบปฏิบัติการ ในอุปกรณ์บางตัวกล้องด้านหลังรองรับ torch แต่กล้องด้านหน้าไม่ได้แม้ว่ากล้องด้านหน้าจะมีไฟฉายจริงๆ

นอกจากนี้ torch ไม่ได้รับการสนับสนุนบน iOS เลย (ตรวจสอบครั้งล่าสุด iOS 17.1)

เยี่ยมชมหน้านี้ด้วยอุปกรณ์ของคุณ รายการลิงก์แสดงถึงกล้องทั้งหมดที่ติดตั้งบนอุปกรณ์ หากคุณคลิกควรโหลดกล้อง ด้านล่างของกล้องดูวัตถุ JSON ของ "ความสามารถ" ถูกพิมพ์ หากไม่มีคีย์/ค่าคู่ "torch": true แล้วไฟฉายจะไม่รองรับสำหรับกล้องนั้น

วัตถุ JSON นี้ให้เป็น payload ของเหตุการณ์ camera-on

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