vue qrcode reader

مجموعة من مكونات vue.js للكشف عن رموز QR وتنسيقات الباركود الأخرى المختلفة مباشرة في المتصفح:

• يقوم QrcodeStream بمسح الإطارات بشكل مستمر من دفق الكاميرا.

• QrcodeDropZone هي منطقة فارغة حيث يمكنك سحب الصور ليتم فك تشفيرها.

• QrcodeCapture هو حقل تحميل ملف كلاسيكي ، يقوم على الفور بفحص جميع الملفات التي تحددها.

جميع المكونات مستجيبة. أبعد من ذلك ، بالقرب من التصميم الصفر. اجعلها تناسب التصميم الخاص بك. الاستخدام بسيط ومباشر للأمام:

 <qrcode-tream @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>

يتم تسجيل جميع المكونات تلقائيًا على مستوى العالم. استخدم kebab-case للإشارة إليها في القوالب الخاصة بك:

 <qrcode-stream> </qrcode-stream> <Qrcode-drop-Zone> </qrcode-drop-Zone> <qrcode-capture> </qrcode-capture>

استكشاف الأخطاء وإصلاحها ⚡

لا أرى الكاميرا عند استخدام QrcodeStream .

• تحقق مما إذا كان يعمل على الصفحة التجريبية. لا سيما عرض أخطاء المقبض ، لأنه يجعل رسائل الخطأ.

• يعمل العرض التوضيحي ولكنه لا يعمل في مشروعي: استمع إلى حدث error للتحقيق في الأخطاء.

• لا يعمل العرض التوضيحي: مراجعة قسم دعم المتصفح بعناية. ربما جهازك غير مدعوم.

أقوم بتشغيل خادم DEV على مضيف محلي. كيفية الاختبار على جهازي المحمول بدون HTTPS؟

• إذا كان الإعداد الخاص بك هو سطح المكتب Chrome + Android Chrome ، فاستخدم تصحيح الأخطاء عن بُعد والذي يسمح لجهاز Android الخاص بك بالوصول إلى الخادم المحلي بمثابة مضيف محلي.

• وإلا استخدم وكيلًا عكسيًا مثل Ngrok أو Servo لجعل الخادم المحلي متاحًا بشكل عام مع HTTPS.

• هناك أيضًا الكثير من خدمات الاستضافة بدون خادم/ثابتة تم تمكين HTTPS افتراضيًا وحيث يمكنك نشر تطبيق الويب الخاص بك مجانًا (على سبيل المثال صفحات Github ، صفحات gitlab ، Google Firebase ، Netlify ، Heroku ، Zeit Now ، ...)

لا يتم اكتشاف بعض رموز QR الخاصة بي.

• تأكد من أن هناك بعض الحدود البيضاء حول رمز الاستجابة السريعة.

• اختبر رموز QR الخاصة بك في حزم المنبع: barcode-detector > zxing-wasm > zxing-cpp ، ومشكلات اكتشاف الملفات في مستودع أعلى مستوى حيث تحدث المشكلة لأول مرة.

لا يتم اكتشاف الرموز الباركية 1D.

القيمة الافتراضية للتنسيقات formats هي "['qr_code']" ، والتي تعكس الإعداد قبل أن يتوفر formats . ستحتاج إلى إضافة تنسيقات الباركود الأخرى إلى هذا الدعامة للكشف عن هذه الأنواع من الرموز الباركية. تحقق من هذا العرض التوضيحي.

كيف تجعلها تعمل مع Vue 2؟

يتم إسقاط الدعم ولكن يمكنك خفض التصنيف إلى Vue-Qrcode-Reader V3.* أو أقل.

أحصل على خطأ "فشل في الجلب" في وقت التشغيل لبعض ملف WASM.

هذا ملف WASM ينفذ كاشف رمز الاستجابة السريعة. لسوء الحظ ، ليس من المناسب للغاية تجميع هذا الملف مع الحزمة. لذلك افتراضيًا ، نجلبه في وقت التشغيل من CDN. هذه مشكلة للتطبيقات أو التطبيقات غير المتصلة بالإنترنت التي تعمل في شبكة لها سياسة CSP الصارمة. للحصول على حل بديل انظر: #354

لا يتم دعم torch على جهازي ، على الرغم من أنه يحتوي على مصباح يدوي.

دعم torch غير متسق عبر الأجهزة والكاميرات والمتصفحات وأنظمة التشغيل. في بعض الأجهزة ، تدعم الكاميرا الخلفية torch ولكن الكاميرا الأمامية لا ، حتى لو كانت الكاميرا الأمامية تحتوي بالفعل على مصباح يدوي.

علاوة على ذلك ، لا يتم دعم torch على iOS على الإطلاق (آخر مرة تم فحصها iOS 17.1).

قم بزيارة هذه الصفحة مع جهازك. تمثل قائمة الروابط جميع الكاميرات المثبتة على الجهاز. إذا قمت بالنقر فوق ، يجب تحميل الكاميرا. أسفل الكاميرا ، يتم طباعة كائن JSON لـ "القدرات". إذا لم يحتوي على زوج المفتاح/القيمة "torch": true ، فلا يتم دعم المصباح لتلك الكاميرا.

تم توفير هذا الكائن JSON كحمولة حمولة camera-on .