html5 qrcode

HTML5-رمز الاستجابة السريعة

هام - البحث عن ملاك جدد لهذا المشروع.

إذا كنت مهتما، يرجى التواصل على [email protected] .

HTML5-رمز الاستجابة السريعة

هام المشروع في وضع الصيانة حتى إشعار آخر. لن يتمكن المؤلف من إجراء أي إصلاحات أو تحسينات في الوقت الحالي. لن يتم أيضًا دمج طلبات السحب في الوقت الحالي. إذا كان لديك شوكة يمكنك صيانتها - يرجى مشاركة التفاصيل على [email protected]. ويسعدني الإعلان عنهم هنا! طيب لاستخدام المشروع كما هو. مثال: scanapp.org.

مكتبة مسح رمز الاستجابة السريعة والرمز الشريطي خفيفة الوزن ومتعددة المنصات للويب

استخدم هذه المكتبة خفيفة الوزن لدمج رمز الاستجابة السريعة والرمز الشريطي وإمكانات مسح الكود الشائعة الأخرى بسهولة/سرعة في تطبيق الويب الخاص بك.

النقاط الرئيسية

• ؟ دعم مسح أنواع مختلفة من الرموز الشريطية ورموز QR.

• ؟ يدعم منصات مختلفة سواء كانت Android أو IOS أو MacOs أو Windows أو Linux

• يدعم متصفحات مختلفة مثل Chrome و Firefox و Safari و Edge و Opera ...

• ؟ يدعم المسح بالكاميرا وكذلك الملفات المحلية

• ➡️ يأتي مع مكتبة شاملة مع واجهة المستخدم بالإضافة إلى مكتبة منخفضة المستوى لإنشاء واجهة المستخدم الخاصة بك.

• ؟ يدعم التخصيصات مثل دعم الفلاش/الشعلة والتكبير وما إلى ذلك.

يدعم نوعين من واجهات برمجة التطبيقات

• Html5QrcodeScanner — ماسح ضوئي شامل مع واجهة مستخدم، يتكامل مع أقل من عشرة أسطر من التعليمات البرمجية.

• Html5Qrcode - مجموعة قوية من واجهات برمجة التطبيقات التي يمكنك استخدامها لإنشاء واجهة المستخدم الخاصة بك دون القلق بشأن إعداد الكاميرا، أو التعامل مع الأذونات، أو قراءة الرموز، وما إلى ذلك.

يعد دعم فحص الملفات المحلية على الجهاز إضافة جديدة ومفيدة لمتصفح الويب الذي لا يدعم الوصول إلى كاميرا الويب المضمنة في الهواتف الذكية. ملاحظة: لا يؤدي هذا إلى تحميل الملفات إلى أي خادم — فكل شيء يتم محليًا.

العرض التوضيحي على scanapp.org	العرض التوضيحي على qrcode.minhazav.dev - مسح أنواع مختلفة من الرموز

نحن بحاجة لمساعدتكم!

ساعد في تحفيز تطوير الميزات وإصلاح الأخطاء من خلال دعم أهداف الرعاية لهذا المشروع. راجع قائمة طلبات الميزات المدعومة هنا.

التوثيق

تم نقل وثائق هذا المشروع إلى scanapp.org/html5-qrcode-docs.

• ابدء
• الأطر المدعومة
• تنسيقات الكود 1D و2D المدعومة
• وثائق API التفصيلية

المنصات المدعومة

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

أساطير

• يعني الدعم الكامل — يعتمد على كاميرا الويب والملفات المضمّنة
• يعني الدعم الجزئي — المستند إلى الملف فقط، وكاميرا الويب قيد التقدم

جهاز الكمبيوتر / ماك

فايرفوكس	الكروم	سفاري	الأوبرا	حافة

أندرويد

الكروم	فايرفوكس	حافة	الأوبرا	أوبرا ميني	جامعة كاليفورنيا

دائرة الرقابة الداخلية

سفاري	الكروم	فايرفوكس	حافة
	*	*

* مدعوم لإصدارات IOS >= 15.1

قبل الإصدار 15.1، تم استخدام Webkit لنظام IOS بواسطة Chrome وFirefox والمتصفحات الأخرى في IOS ولم يكن لديهم أذونات كاميرا الويب حتى الآن. هناك مشكلة مستمرة بشأن إصلاح الدعم لنظام التشغيل iOS - الإصدار/14

دعم الإطار

يمكن استخدام المكتبة بسهولة مع العديد من الأطر الأخرى، ولقد قمت بإضافة أمثلة لعدد قليل منها وسوف أستمر في إضافة المزيد.

أتش تي أم أل 5	VueJs	الإلكترون	رد فعل	مضاءة

تنسيقات التعليمات البرمجية المدعومة

يعتمد مسح الكود على مكتبة Zxing-js. سنعمل على إضافة دعم لمزيد من أنواع مسح التعليمات البرمجية. إذا كنت تشعر أنه من المفيد الحصول على نوع معين من التعليمات البرمجية، فيرجى تقديم طلب ميزة.

شفرة	مثال
رمز الاستجابة السريعة
أزتيك
CODE_39
الكود_93
CODE_128
الـITF
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
DATA_MATRIX
الرمز الأقصى*
RSS_14*
RSS_EXPANDED*

*التنسيقات غير مدعومة من خلال تكاملنا التجريبي مع تكامل BarcodeDetector API الأصلي (اقرأ المزيد).

الوصف - عرض تجريبي

شاهد تجربة الماسح الضوئي الشاملة على موقع scanapp.org.

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

يدعم:

• الاستعلام عن الكاميرا على الجهاز (مع أذونات المستخدم)
• تقديم بث مباشر للكاميرا، مع واجهة مستخدم سهلة الاستخدام للمسح الضوئي
• يدعم مسح نوع مختلف من رموز QR والرموز الشريطية والتنسيقات الأخرى
• يدعم اختيار ملفات الصور من الجهاز لمسح الرموز

كيفية الاستخدام

يمكنك العثور على إرشادات مفصلة حول كيفية استخدام هذه المكتبة على scanapp.org/html5-qrcode-docs.

تجريبي

امسح هذه الصورة ضوئيًا أو قم بزيارة blog.minhazav.dev/research/html5-qrcode.html

لمزيد من المعلومات

تحقق من هذه المقالات حول كيفية استخدام هذه المكتبة:

• QR وماسح الباركود باستخدام HTML وJavaScript
• مسح رمز الاستجابة السريعة HTML5 - تم إطلاق الإصدار 1.0.1 بدون تبعية jQuery وواجهات برمجة التطبيقات المستندة إلى Promise المُعاد هيكلتها.
• مسح رمز الاستجابة السريعة HTML5 باستخدام JavaScript — دعم مسح الملف المحلي واستخدام الكاميرا الافتراضية المضافة (الإصدار 1.0.5)

لقطات الشاشة

الشكل: لقطة شاشة من Google Chrome الذي يعمل على جهاز MacBook Pro

التوثيق

ابحث عن وثائق واجهة برمجة التطبيقات الكاملة على 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 - Float، مثال 1.777778 لنسبة العرض إلى الارتفاع 16:9

استخدم هذه الخاصية لعرض تغذية الفيديو بنسبة عرض إلى ارتفاع معينة. قد يؤدي تمرير نسبة عرض إلى ارتفاع غير قياسية مثل 100000:1 إلى عدم ظهور بث الفيديو. القيم المثالية يمكن أن تكون:

قيمة	نسبة الارتفاع	حالة الاستخدام
1.333334	4:3	نسبة العرض إلى الارتفاع القياسية للكاميرا
1.777778	16:9	شاشة كاملة، سينمائية
1.0	1:1	منظر مربع

إذا لم تقم بتمرير أي قيمة، فسيتم استخدام عدسة الكاميرا بالكامل للمسح الضوئي. ملاحظة : يجب أن تكون هذه القيمة أصغر من العرض والارتفاع QR code HTML element .

disableFlip - منطقي (اختياري)، الافتراضي = خطأ

افتراضيًا، يمكن للماسح الضوئي البحث عن رموز QR المعكوسة أفقيًا. يتيح ذلك أيضًا مسح رمز الاستجابة السريعة ضوئيًا باستخدام الكاميرا الأمامية على الأجهزة المحمولة والتي يتم عكسها أحيانًا. هذا false بشكل افتراضي وأوصي بتغيير هذا فقط إذا:

• أنت متأكد من أنه لا يمكن عكس بث الكاميرا (مقلوب أفقيًا)
• أنت تواجه مشكلات في الأداء مع تمكين هذا.

فيما يلي مثال على رمز QR عادي ومعكوس

رمز الاستجابة السريعة العادي	رمز الاستجابة السريعة معكوسة

rememberLastUsedCamera - منطقي (اختياري)، الافتراضي = صحيح

إذا كان true فسيتم تذكر الكاميرا الأخيرة التي استخدمها المستخدم والطقس أو عدم منح الإذن في وحدة التخزين المحلية. إذا كان المستخدم قد منح أذونات مسبقًا - فسيتم تخطي خيار طلب الإذن في واجهة المستخدم وسيتم تشغيل آخر كاميرا محددة تلقائيًا للمسح الضوئي.

إذا كان 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 فستحتوي واجهة المستخدم المعروضة على زر لتشغيل الفلاش أو إيقاف تشغيله بناءً على دعم الجهاز + المتصفح. القيمة false بشكل افتراضي.

مسح تنسيقات محددة فقط

افتراضيًا، يتم فحص كل من ملفات دفق الكاميرا والصور ومقارنتها بجميع تنسيقات التعليمات البرمجية المدعومة. يمكن تكوين فئتي Html5QrcodeScanner و Html5Qrcode لدعم مجموعة فرعية من التنسيقات المدعومة فقط. يتم تعريف التنسيقات المدعومة في التعداد 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 ,
}

أوصي باستخدام هذا فقط إذا كنت بحاجة إلى حذف الدعم بشكل صريح لتنسيقات معينة أو ترغب في تقليل عدد عمليات الفحص التي يتم إجراؤها في الثانية لأسباب تتعلق بالأداء.

مسح رمز الاستجابة السريعة فقط باستخدام 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 ) ; 

مسح رمز الاستجابة السريعة ورموز 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 ) ; 

الميزات التجريبية

تدعم المكتبة الآن بعض الميزات التجريبية المدعومة في المكتبة ولكن لا يوصى باستخدامها في الإنتاج إما بسبب الاختبار المحدود الذي تم إجراؤه أو التوافق المحدود لواجهات برمجة التطبيقات الأساسية المستخدمة. اقرأ المزيد عنها هنا تتضمن بعض الميزات التجريبية ما يلي:

• دعم BarcodeDetector JavaScript API

كيفية التعديل والبناء

1. يجب إجراء تغييرات التعليمات البرمجية على /src فقط.

2. قم بتشغيل npm install لتثبيت كافة التبعيات.

3. قم بتشغيل npm run-script build لإنشاء مخرجات JavaScript. تم إنشاء توزيع JavaScript الناتج على /dist/html5-qrcode.min.js. إذا كنت تقوم بالتطوير على نظام التشغيل Windows، فقم بتشغيل npm run-script build-windows .

4. اختبار

   • قم بتشغيل npm test
   • قم بإجراء الاختبارات قبل إرسال طلب السحب، ويجب تشغيل جميع الاختبارات.
   • الرجاء إضافة اختبارات للسلوكيات الجديدة المرسلة في العلاقات العامة.

5. إرسال طلب سحب

   • قم بتضمين تغييرات التعليمات البرمجية فقط على ./src . لا تقم بتغيير ./dist يدويًا.
   • في طلب السحب أضف تعليقًا مثل

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

   • لاستدعاء مساهماتك، سيقوم الروبوت بتحديث ملف المساهمات.
   • سيتم إنشاء الكود ونشره بواسطة المؤلف على دفعات.

كيفية المساهمة

يمكنك المساهمة في المشروع بعدة طرق:

• ملف تذكرة الإصدار لأي خطأ ملحوظ أو مشكلة توافق مع المشروع.
• طلب ميزة الملف للميزات المفقودة.
• خذ الأخطاء المفتوحة أو طلب الميزة واعمل عليها وأرسل طلب سحب.
• اكتب اختبارات الوحدة لقاعدة التعليمات البرمجية الموجودة (والتي لا تغطيها الاختبارات اليوم). مطلوب مساعدة في هذا الشأن - اقرأ المزيد.

يدعم ؟

لم يكن هذا المشروع ممكنًا بدون جميع المساهمين والرعاة الرائعين لدينا. إذا كنت ترغب في دعم صيانة هذا المشروع وصيانته، يمكنك التبرع عبر رعاة GitHub.

قم برعاية المشروع لتحديد أولويات طلبات الميزات / الأخطاء ذات الصلة بك . (يعتمد على نطاق الطلب وعرض النطاق الترددي للمساهمين).

ساعد في تحفيز تطوير الميزات وإصلاح الأخطاء من خلال دعم أهداف الرعاية لهذا المشروع. راجع قائمة طلبات الميزات المدعومة هنا.

وأيضًا، شكرًا جزيلاً للمنظمات التالية للرعايات غير المالية

الاعتمادات

وحدة فك التشفير المستخدمة لقراءة رمز الاستجابة السريعة هي من Zxing-js https://github.com/zxing-js/library