Instascan: IOS safari 11.4- مشكلة فتح الكاميرا الخلفية

هل يمكنك الوصول إلى جهاز Apple؟ هل تعرف ما إذا كان العرض التجريبي يعمل؟

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

كنت أحاول العرض التوضيحي على iPhone ، ولكنه لم ينجح.

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

لقد أضفت سمة داخل علامة الفيديو وعلامة meta المذكورة أيضًا.

لقد أضفت سمة playinline داخل علامة الفيديو وعلامة meta المذكورة أيضًا.

قام شخص ما بالفعل بإصلاح هذا في أحد الخيوط. أحاول ذلك الآن ولكن يجب أن أنتظر حتى يأتي شخص ما لديه iPhone للعمل.

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

هذا ما فعلته!

أضفت العلامة الوصفية.
<meta name="apple-mobile-web-app-capable" content="yes">

تمت إضافة هذه السمة:
<video id="scanner" class="video-back" playsinline></video>

تمت إضافة ملف JS هذا:
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

ثم حزم هذا للإفراج: https://github.com/JoseCDB/instascan/tree/ios-rear-camera. لست متأكدًا مما إذا كنت تعرف كيفية استخدام Gulp مع node.js ولكنه سهل. لقد تعلمت ذلك في 15 دقيقة! أنا أستخدم نسخة الأشخاص هذه من Instascan. كان على علم بالمشكلة وتمكن من إصلاحها. أتمنى أن يساعدك هذا. حظا طيبا وفقك الله.

لقد استخدمت علامة meta tag و video tag و adaptor-latest.js.
وأنا أستخدم instscan.min.js ولا أعرف كيف يمكنني استخدام ".js - scanner.js - camara.js" بشكل منفصل.

لقد استخدمت علامة meta tag و video tag و adaptor-latest.js.
وأنا أستخدم instscan.min.js ولا أعرف كيف يمكنني استخدام ".js - scanner.js - camara.js" بشكل منفصل.

من المفترض أن تكون قد قمت بتثبيت node.js. هناك موجه أوامر يقوم بتجميع كل هذه الملفات معًا ، سيكون الإخراج النهائي هو ملف JS المصغر الخاص بـ instascanner.

هذا منتج رائع وكان مفيدًا حقًا ، لذا شكرًا لك على جعله رائعًا. إليكم مشكلة هذا instascan من بحثي:

• عند استدعاء كاميرا getCameras ، تقوم فئة الكاميرا بإرجاع مجموعة من كائنات الكاميرا التي تم إنشاؤها من كائنات MediaDeviceInfo التي تم جمعها من خلال استدعاء إلى navigator.mediaDevices.enumerateDevices (). هذه ليست كائنات id _ و _ name _ وليس أكثر من ذلك. يتم استخدامها لإنشاء مجموعة من كائنات الكاميرا.

عند استدعاء _scanner.start (الكاميرا) _ ، فأنت تقوم بتمرير كائن كاميرا يستدعي طريقة _camera.start () _ على الكاميرا.

• و_camera.start () _ طريقة يدعو ثم _navigator.mediaDevices.getUserMedia (contraints) _، والتي ترجع إلى Arrary من تدفق الوسائط الكائنات على أساس القيود نظرا المدرجة في الأسلوب.
• _scanner.start () _ المكالمات _scanner._enableScan (الكاميرا) _ إعطائها كائن MediaStream الأول الذي تم إرجاعه من المكالمة أعلاه في الكاميرا. إنها تحدد ال

                  **This Part Is the Disconnect and what is messing it all up!**

قضية القيد:

يستخدم كائن الكاميرا الذي تم تمريره معرفه في القيود كـ _ "إلزامي" _ للبحث عن الأجهزة. إذا لم يتم العثور عليه ، فلن يظهر أي فيديو. كما يتم تعيين قيود "إلزامية" أخرى.

الأجهزة المختلفة لا تدعم القيود المستخدمة!
قم بتشغيل هذا الرابط على الجهاز الذي تريد استخدامه وسوف يخبرك بالقيود التي يدعمها:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

قم بتشغيل هذا الرابط على الجهاز الذي تريد استخدامه وأدخل قيدًا. سيخبرك إذا كان مدعومًا:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

القيود المدعومة من Ipad / Iphone / IOS:

نسبة العرض إلى الارتفاع ، وضع المواجهة ، _deviceId * _ ، الارتفاع ، العرض ، نسبة العرض إلى الارتفاع وغيرها.

_عندما اختبرت هذا ، سيتم تجاهل _deviceId كقيد. جرب ذلك في الرابط أعلاه للقيود وسترى أنه يعين deviceId = "". عندما أمسكت به في جافا سكريبت وعرضته ، كان جهاز iPhone يُرجع دائمًا معرف جهاز فارغ.

لذلك ، للاستيلاء على الكاميرا الخلفية على Iphone ، يجب عليك استخدام وضع المواجهة وعدم استخدام معرف الجهاز.

قيود Android المدعومة:

deviceId و _facingMode * _ و AspRatio والارتفاع والعرض والعديد من الميزات الأخرى.

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

* * الإجابة على مشكلة ANDROID * * *
يتضمن إنشاء Gulp لهذا المشروع إصدار محول webrtc ^ 1.4.0 الذي يفسد وضع المواجهة على Android Chrome. بالنظر إلى الكود ، قام بالفعل بحذف وضع المواجهة.

• لإصلاح هذا المشروع - في _index.js_ ، قم بإزالة السطر 2 require('webrtc-adapter'); ثم اتبع إجراءات الإنشاء أدناه. عندما اختبرت على جهاز لوحي و 4 هواتف أندرويد مختلفة على Chrome ، عملت جميعها مرة أخرى للاستيلاء على الكاميرا الخلفية.

للاستيلاء على الكاميرا الخلفية على Android باستخدام رمز instascan هذا ، يمكنك استخدام معرف الجهاز.
تأكد من أن deviceId عبارة عن قيد فيديو مثل

video: {
  devideId: this.id
}

رمز قيد الكاميرا:

إليك الكود من المشروع الذي يحدد القيود ويحصل على كائنات MediaStream
السبب وراء عدم عمل هذا الرمز بشكل صحيح هو أن معرف المصدر لقيد الفيديو _ غير مدعوم لـ _Android_ أو _Iphone_. يجب تغيير هذا إلى معرف الجهاز . يجب أيضًا أن تذهب جميع العناصر الإلزامية إذا لم تكن ما يتعامل معه جهازك.

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

كيفية تعديل InstaScan وتصغيره:

للحصول على هذا وتغييره ، كنت أستخدم VSCode.
1) قم بتثبيت Node.js و vsCode.
2) في محطة طرفية في الدليل الذي تريده لتنزيله ، قم بتشغيل:
git clone https://github.com/JoseCDB/instascan.git

3) في الطرفية cd إلى دليل instascan:
cd instascan

4) قم بتغيير الجافا سكريبت وقم بتشغيل gulp لتحرير الكود:
gulp release

5) سيعطيك هذا عنصر instascan.min.js مصغرًا جديدًا في المجلد _dist_.

سأكتشف مشكلة Android هذه ، نأمل في نهاية هذا الأسبوع. آمل أن يمنحك هذا نظرة ثاقبة كافية لأي مشاريع مستقبلية مع هذه المكتبة الرائعة.

مرحبًا ، يجب أن يعمل هذا بشكل جيد.
أولاً ، أضف adapt.js من https://github.com/webrtc/adapter.

بعد ذلك استنساخ هذا:
git clone https://github.com/quocthai95/instascan.git
يركض:
npm i
لتثبيت الضروريات

استخدم gulp لإصدار الكود النهائي:
gulp release

لقد تحققت من Iphone 6 plus (iOS 11.4) و Iphone 8 plus (iOS 11.3) وعمل بشكل جيد. يمكنك تبديل الكاميرات بشكل طبيعي.

آمل أن تتمكن من حل مشكلتك.

مرحبًا ، يجب أن يعمل هذا بشكل جيد.
أولاً ، أضف adapt.js من https://github.com/webrtc/adapter.

بعد ذلك استنساخ هذا:
git clone https://github.com/quocthai95/instascan.git
يركض:
npm i
لتثبيت الضروريات

استخدم gulp لإصدار الكود النهائي:
gulp release

لقد تحققت من Iphone 6 plus (iOS 11.4) و Iphone 8 plus (iOS 11.3) وعمل بشكل جيد. يمكنك تبديل الكاميرات بشكل طبيعي.

آمل أن تتمكن من حل مشكلتك.

عند تثبيت الضروريات أحصل على "12 نقطة ضعف (1 منخفضة ، 5 متوسطة ، 6 عالية)".
يبدو أن بعض أوامر "$ npm install --save-dev [اسم الحزمة]" تعمل على حل هذه الثغرات الأمنية ، لكن لا يمكنني إنشائها بسبب الاستثناء التالي:

إصدار gulp $ assert.js: 351 throw err؛ ^ AssertionError [ERR_ASSERTION]: يجب تحديد وظيفة المهمة في Gulp.set [كـ _setTask] (C: \ Users \ John \ Downloads \ instascan-ios-rear-camera \ instascan-ios-rear-camera \ node_modules \ متعهد \ lib \ set-task.js: 10: 3)

كيف يمكنني الانتقال من هنا ، أود حقًا تجربة هذا البناء. يعمل بشكل جيد مع هاتف android الخاص بي؟

/يوحنا

مرحبا @ johnatitide ،
هل قمت بتثبيت أحدث إصدار من برنامج gulp (4.0.0)؟ إذا كان الأمر كذلك ، فيرجى محاولة قصره على 3.9.1. لمعلوماتك:
https://github.com/ampproject/docs/issues/793#issuecomment -354836162
أو يمكنك تقديم الأوامر التي قمت بها لإنشائه.

مرحبا @ quocthai95

يعمل البناء بالأوامر التالية:
استنساخ بوابة https://github.com/quocthai95/instascan.git
npm تثبيت [email protected]
npm أنا
الافراج عن جرعة

يمكنني الآن تبديل الكاميرا في Safari على iPad و iPhone. لطيف - جيد.

أي فرصة لإصلاحات القيد سيتم دمجها مرة أخرى في ريبو شميش؟

أي فرصة لإصلاحات القيد سيتم دمجها مرة أخرى في ريبو شميش؟

لقد قمت بإنشاء طلب سحب جديد. انتظر القبول ^ ^

@ quocthai95 hi ، اتبعت ive خطواتك من https://github.com/schmich/instascan/issues/182#issuecomment -447198290.

كنت أتساءل ، فأنا أحصل على الكاميرا الأمامية ككاميرا أمامية على جهاز android chrome الخاص بي. أتساءل كيف يمكنني جعل الكاميرا الخلفية افتراضية؟ هل لديك رمز مثال؟

fariskas ،
استخدم التعبير العادي لاختبار ما إذا كان يطابق / عكسيًا / ثم ابدأ تشغيله ، حتى تتمكن من استخدام الكاميرا الخلفية كإعداد افتراضي.

ثم Instascan.Camera.getCameras (). ثم (الوظيفة (الكاميرات) {
إذا (كاميرات [0] .name.match (/ ظهر / i)) {
scanner.start (الكاميرات [0]) ؛
} else if (camera [1] .name.match (/ back / i)) {
scanner.start (الكاميرات [1]) ؛
}
}

قد يكون هذا مفيدًا: أنا أستخدم حلقة for-loop للعثور على "رجوع" في cameras[i].name لكنني لم أنجح ولم أتمكن من تحديد الكاميرا الخلفية على iPad حتى كتبت cameras[i].name إلى console.log واكتشفت أنه كان عليّ البحث عن "achterzijde" (وهي كلمة "رجوع" باللغة الهولندية).
لذا إذا لم تنجح في محاولة تحديد الكاميرا الخلفية في iOS ، فحاول ترجمة "back" أو اكتب cameras[i].name إلى console.log لمعرفة اسم الكاميرا الخلفية.

أستطيع أن أؤكد أن العرض التوضيحي يعمل فقط مع الكاميرا الأمامية. هذا مع Safari على iOS 12.2

هل اكتشف أي شخص كيفية استخدام الكاميرا الخلفية مع Safari على نظام التشغيل iOS 12+؟

هل اكتشف أي شخص كيفية استخدام الكاميرا الخلفية مع Safari على نظام التشغيل iOS 12+؟

لقد كنت أستخدم نسخة معدلة من هذه المكتبة منذ حوالي 7 أشهر الآن على أكثر من 30 نوعًا من الهواتف والأجهزة اللوحية التي تعمل بنظامي التشغيل iOS و Android. انظر إلى التعليقات التي تركتها أعلاه حول نسخة معدلة للحصول على أي كاميرا من نظام التشغيل الذي تعمل به. تستمر التعليقات في الحديث عن إضافة webrtc بعد ذلك ، والذي وجدته هو المشكلة الكاملة لهذه المكتبة.

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

لقد قمت بتضمين ملفات js الثابتة والمترجمة والمُصغرة التي كنت أستخدمها منذ فترة حتى الآن. أستخدمه للحضور إلى المدرسة باستخدام رموز QrCodes عبر أي هواتف يمتلكها الطلاب والمعلمون ، والتي كانت عبارة عن أكثر من 30 نموذجًا في هذه المرحلة. يمكنه الاستيلاء على أي كاميرا.

آمل أن يساعد هذا.

رمز الكاميرا الخلفية
""
الماسح الضوئي = Instascan.Scanner الجديد ({فيديو: فيديو ، فترة المسح الضوئي: 4 ، مرآة: خطأ})
ثم (handleSuccess)
.catch (handleError) ؛
// ابدأ المسح
scanner.addListener ('scan' ، foundCode) ؛

            Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    scanner.start(cameras[0]);
                }
                else {
           ...        
                }
            }).catch (function (e) {
             ...  
            });

""
instascan.min.zip

https://github.com/schmich/instascan/issues/182#issuecomment -443388022

هذا منتج رائع وكان مفيدًا حقًا ، لذا شكرًا لك على جعله رائعًا. إليكم مشكلة هذا instascan من بحثي:

• عند استدعاء كاميرا getCameras ، تقوم فئة الكاميرا بإرجاع مجموعة من كائنات الكاميرا التي تم إنشاؤها من كائنات MediaDeviceInfo التي تم جمعها من خلال استدعاء إلى navigator.mediaDevices.enumerateDevices (). هذه ليست كائنات id _ و _ name _ وليس أكثر من ذلك. يتم استخدامها لإنشاء مجموعة من كائنات الكاميرا.

عند استدعاء _scanner.start (الكاميرا) _ ، فأنت تقوم بتمرير كائن كاميرا يستدعي طريقة _camera.start () _ على الكاميرا.

• و_camera.start () _ طريقة يدعو ثم _navigator.mediaDevices.getUserMedia (contraints) _، والتي ترجع إلى Arrary من تدفق الوسائط الكائنات على أساس القيود نظرا المدرجة في الأسلوب.
• _scanner.start () _ المكالمات _scanner._enableScan (الكاميرا) _ إعطائها كائن MediaStream الأول الذي تم إرجاعه من المكالمة أعلاه في الكاميرا. يقوم بتعيين عنصر src على كائن دفق الوسائط هذا.
  **This Part Is the Disconnect and what is messing it all up!**

قضية القيد:

يستخدم كائن الكاميرا الذي تم تمريره معرفه في القيود كـ _ "إلزامي" _ للبحث عن الأجهزة. إذا لم يتم العثور عليه ، فلن يظهر أي فيديو. كما يتم تعيين قيود "إلزامية" أخرى.

الأجهزة المختلفة لا تدعم القيود المستخدمة!
قم بتشغيل هذا الرابط على الجهاز الذي تريد استخدامه وسوف يخبرك بالقيود التي يدعمها:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

قم بتشغيل هذا الرابط على الجهاز الذي تريد استخدامه وأدخل قيدًا. سيخبرك إذا كان مدعومًا:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

القيود المدعومة من Ipad / Iphone / IOS:

نسبة العرض إلى الارتفاع ، وضع المواجهة ، _deviceId * _ ، الارتفاع ، العرض ، نسبة العرض إلى الارتفاع وغيرها.

_عندما اختبرت هذا ، سيتم تجاهل _deviceId كقيد. جرب ذلك في الرابط أعلاه للقيود وسترى أنه يعين deviceId = "". عندما أمسكت به في جافا سكريبت وعرضته ، كان جهاز iPhone يُرجع دائمًا معرف جهاز فارغ.

لذلك ، للاستيلاء على الكاميرا الخلفية على Iphone ، يجب عليك استخدام وضع المواجهة وعدم استخدام معرف الجهاز.

قيود Android المدعومة:

deviceId و _facingMode * _ و AspRatio والارتفاع والعرض والعديد من الميزات الأخرى.

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

* _ * الرد على مشكلة ANDROID * _ **
يتضمن إنشاء Gulp لهذا المشروع إصدار محول webrtc ^ 1.4.0 الذي يفسد وضع المواجهة على Android Chrome. بالنظر إلى الكود ، قام بالفعل بحذف وضع المواجهة.

• لإصلاح هذا المشروع - في _index.js_ ، قم بإزالة السطر 2 require('webrtc-adapter'); ثم اتبع إجراءات الإنشاء أدناه. عندما اختبرت على جهاز لوحي و 4 هواتف أندرويد مختلفة على Chrome ، عملت جميعها مرة أخرى للاستيلاء على الكاميرا الخلفية.

للاستيلاء على الكاميرا الخلفية على Android باستخدام رمز instascan هذا ، يمكنك استخدام معرف الجهاز.
تأكد من أن deviceId عبارة عن قيد فيديو مثل

video: {
  devideId: this.id
}

رمز قيد الكاميرا:

إليك الكود من المشروع الذي يحدد القيود ويحصل على كائنات MediaStream
السبب وراء عدم عمل هذا الرمز بشكل صحيح هو أن معرف المصدر لقيد الفيديو _ غير مدعوم لـ _Android_ أو _Iphone_. يجب تغيير هذا إلى معرف الجهاز . يجب أيضًا أن تذهب جميع العناصر الإلزامية إذا لم تكن ما يتعامل معه جهازك.

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

كيفية تعديل InstaScan وتصغيره:

للحصول على هذا وتغييره ، كنت أستخدم VSCode.

1. قم بتثبيت Node.js و vsCode.
2. في محطة طرفية في الدليل الذي تريد تنزيله ، قم بتشغيل:
   git clone https://github.com/JoseCDB/instascan.git
3. في الطرفية cd إلى دليل instascan:
   cd instascan
4. قم بتغيير الجافا سكريبت وتشغيل gulp لتحرير الكود:
   gulp release
5. سيعطيك هذا عنصر instascan.min.js مصغرًا جديدًا في المجلد _dist_.

سأكتشف مشكلة Android هذه ، نأمل في نهاية هذا الأسبوع. آمل أن يمنحك هذا نظرة ثاقبة كافية لأي مشاريع مستقبلية مع هذه المكتبة الرائعة.

لقد اتبعت الخطوات المذكورة أعلاه ثم قم بتحرير ملف camera.js (في السطر 29) على النحو التالي
facingMode: { exact: "environment" },
انها تعمل بالنسبة لي. شكرا لكapchandler

أنا سعيد لأنك حصلت على شيء للعمل من أجلك! شكرا glorynguyen لنشر هذا الإصلاح أيضا!

للأسف هذه الحلول لا تعمل على iOS 13. إنها ببساطة فارغة (وليست سوداء).
عند تصحيح أخطاء Safari عن بُعد ، لا تظهر أي أخطاء في وحدة التحكم.

هل اكتشف أي شخص كيفية استخدام الكاميرا الخلفية مع Safari على نظام التشغيل iOS 12+؟

لقد كنت أستخدم نسخة معدلة من هذه المكتبة منذ حوالي 7 أشهر الآن على أكثر من 30 نوعًا من الهواتف والأجهزة اللوحية التي تعمل بنظامي التشغيل iOS و Android. انظر إلى التعليقات التي تركتها أعلاه حول نسخة معدلة للحصول على أي كاميرا من نظام التشغيل الذي تعمل به. تستمر التعليقات في الحديث عن إضافة webrtc بعد ذلك ، والذي وجدته هو المشكلة الكاملة لهذه المكتبة.

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

لقد قمت بتضمين ملفات js الثابتة والمترجمة والمُصغرة التي كنت أستخدمها منذ فترة حتى الآن. أستخدمه للحضور إلى المدرسة باستخدام رموز QrCodes عبر أي هواتف يمتلكها الطلاب والمعلمون ، والتي كانت عبارة عن أكثر من 30 نموذجًا في هذه المرحلة. يمكنه الاستيلاء على أي كاميرا.

آمل أن يساعد هذا.

رمز الكاميرا الخلفية

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

رقم 182 (تعليق)

هذا يحل مشكلتي ، شكرا جزيلا لك.

ما هو أحدث إصلاح لهذا؟ لقد جربت القليل من الخيط ولكن يبدو أنني أحصل على الكاميرا الأمامية فقط.
لا أعرف كيفية استخدام Gulp أو تجميع مشاريع .js .git فعليًا ، فأنا أكود بشكل أساسي في C # / Asp.net Mvc ، لذلك هذا جديد قليلاً بالنسبة لي.
حل apchandler يعطيني أخطاء. (الفيديو غير محدد)
يتم حاليًا تحميل ملف instascan.min.js "ثابت" لأجهزة Android وإصداره لنظام IOS ، لكن لا يمكنني تشغيله على ما يبدو.

ما هو أحدث إصلاح لهذا؟ لقد جربت القليل من الخيط ولكن يبدو أنني أحصل على الكاميرا الأمامية فقط.
لا أعرف كيفية استخدام Gulp أو تجميع مشاريع .js .git فعليًا ، فأنا أكود بشكل أساسي في C # / Asp.net Mvc ، لذلك هذا جديد قليلاً بالنسبة لي.
حل apchandler يعطيني أخطاء. (الفيديو غير محدد)
يتم حاليًا تحميل ملف instascan.min.js "ثابت" لأجهزة Android وإصداره لنظام IOS ، لكن لا يمكنني تشغيله على ما يبدو.

هل لديك عنصر فيديو html موجود؟
""

When you run instascan you need to speficy a video element like:

فار النفس = هذا ؛
self.scanner = جديد Instascan.Scanner ({video: document.getElementById ('معاينة')، scanPeriod: 5}) ؛
self.scanner.addListener ('مسح' ، وظيفة (محتوى ، صورة) {
self.scans.unshift ({date: + (Date.now ())، content: content}) ؛
}) ؛
Instascan.Camera.getCameras (). ثم (الوظيفة (الكاميرات) {
الكاميرات الذاتية = الكاميرات ؛
إذا (camera.length> 0) {
self.activeCameraId = الكاميرات [0] .id ؛
self.scanner.start (الكاميرات [0]) ؛
} آخر {
console.error ("لم يتم العثور على كاميرات.") ؛
}
}). catch (function (e) {
خطأ وحدة التحكم (هـ) ؛
}) ؛
""

نعم ، لقد عملت مع:

<video class="player" style="max-width:100%" id="preview" playsinline></video>

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
</script>

بدء تشغيل الكاميرات [0] لأجهزة iPhone / Ios. وهذا لنظام Android:

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    var selectedCam = cameras[0];
                    $.each(cameras, (i, c) => {
                        if (c.name.indexOf('back') != -1) {
                            selectedCam = c;
                            return false;
                        }
                    });
                    scanner.start(selectedCam);
                }
                else {
                    console.error('No cameras found.');
                }
              });
</script>

يبدو أن المشكلة تكمن في أنني تحققت فقط مما إذا كان Request.UserAgent.Contains ("ios") وليس "iphone" ، لذلك قمت بتشغيل برنامج Android النصي لجهاز Iphone أيضًا.

من الجيد أن تعرف. شكرا للمعلومة.

apchandler مرحبًا ، هل تعرف ما إذا كانت هناك طريقة لاختيار الكاميرا الخلفية "الرئيسية"؟

لدي موقع ويب حيث يقوم المستخدمون بمسح رموز QR باستخدام instascan. أقوم بتطوير موقع الويب وإجراء بعض الاختبارات التي أدخلها إلى الموقع باستخدام هاتفي mobiIe الذي يحتوي على 4 كاميرات خلفية (HUAWEI P30 PRO).

لقد جربت $ .each ومع اختيار الكاميرا الخلفية الأولى ، لا يمكنني مسح أي شيء لأن الرؤية مشوشة للغاية وبالكثير من التكبير.

ولكن ، إذا قمت بتحديد الكاميرات [2] فأنا قادر على مسح كل شيء.

هل توجد طريقة عامة لاختيار الكاميرا الخلفية "الرئيسية"؟

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

أو هل تنصح بالاختيار مع جميع الكاميرات ثم السماح للمستخدم بالتقاط الصورة التي تناسبه بشكل مثالي؟

شكرا

apchandler مرحبًا ، هل تعرف ما إذا كانت هناك طريقة لاختيار الكاميرا الخلفية "الرئيسية"؟

لدي موقع ويب حيث يقوم المستخدمون بمسح رموز QR باستخدام instascan. أقوم بتطوير موقع الويب وإجراء بعض الاختبارات التي أدخلها إلى الموقع باستخدام هاتفي mobiIe الذي يحتوي على 4 كاميرات خلفية (HUAWEI P30 PRO).

لقد جربت $ .each ومع اختيار الكاميرا الخلفية الأولى ، لا يمكنني مسح أي شيء لأن الرؤية مشوشة للغاية وبالكثير من التكبير.

ولكن ، إذا قمت بتحديد الكاميرات [2] فأنا قادر على مسح كل شيء.

هل توجد طريقة عامة لاختيار الكاميرا الخلفية "الرئيسية"؟

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

أو هل تنصح بالاختيار مع جميع الكاميرات ثم السماح للمستخدم بالتقاط الصورة التي تناسبه بشكل مثالي؟

شكرا

أنا آسف. لا أعرف أي قيمة يتم تحديدها ككاميرا "رئيسية" عند وجود العديد. يمكنك إعطاء وظيفة تحديد الكاميرا كائن المعايير الذي يحدد أنه يجب أن يكون على الأقل دقة معينة ومواصفات أخرى. يمكن أن يمنحك ذلك على الأقل كاميرا ذات قدرة دنيا. وإلا فإن الحل الخاص بك يبدو جيدًا بالنسبة لكيفية التعامل معه.

apchandler مرحبًا ، هل تعرف ما إذا كانت هناك طريقة لاختيار الكاميرا الخلفية "الرئيسية"؟
لدي موقع ويب حيث يقوم المستخدمون بمسح رموز QR باستخدام instascan. أقوم بتطوير موقع الويب وإجراء بعض الاختبارات التي أدخلها إلى الموقع باستخدام هاتفي mobiIe الذي يحتوي على 4 كاميرات خلفية (HUAWEI P30 PRO).
لقد جربت $ .each ومع اختيار الكاميرا الخلفية الأولى ، لا يمكنني مسح أي شيء لأن الرؤية مشوشة للغاية وبالكثير من التكبير.
ولكن ، إذا قمت بتحديد الكاميرات [2] فأنا قادر على مسح كل شيء.
هل توجد طريقة عامة لاختيار الكاميرا الخلفية "الرئيسية"؟
أعني ، سيتم استخدام تطبيق الويب الخاص بي من قبل العديد من المستخدمين الذين لديهم هواتف محمولة مختلفة ، وعدد مختلف من الكاميرات وسيكون ترتيب الكاميرات مختلفًا أيضًا.
أو هل تنصح بالاختيار مع جميع الكاميرات ثم السماح للمستخدم بالتقاط الصورة التي تناسبه بشكل مثالي؟
شكرا

أنا آسف. لا أعرف أي قيمة يتم تحديدها ككاميرا "رئيسية" عند وجود العديد. يمكنك إعطاء وظيفة تحديد الكاميرا كائن المعايير الذي يحدد أنه يجب أن يكون على الأقل دقة معينة ومواصفات أخرى. يمكن أن يمنحك ذلك على الأقل كاميرا ذات قدرة دنيا. وإلا فإن الحل الخاص بك يبدو جيدًا بالنسبة لكيفية التعامل معه.

شكرا جزيلا لاجابتك! سأحاول مع القرار. يمكن أن يعود Instascan القرار من الكاميرا؟

وفقًا للطرق التي يوفرها glorynguyen وapchandler.
يمكن الآن تشغيل الكاميرا الخلفية
تعديل instascan.min
قبل
case 0:return i={audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}
بعد، بعدما
case 0:return i=(/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream)?{audio:!1,video:{facingMode:{exact:"environment"},mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}:{audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}

هل اكتشف أي شخص كيفية استخدام الكاميرا الخلفية مع Safari على نظام التشغيل iOS 12+؟

لقد كنت أستخدم نسخة معدلة من هذه المكتبة منذ حوالي 7 أشهر الآن على أكثر من 30 نوعًا من الهواتف والأجهزة اللوحية التي تعمل بنظامي التشغيل iOS و Android. انظر إلى التعليقات التي تركتها أعلاه حول نسخة معدلة للحصول على أي كاميرا من نظام التشغيل الذي تعمل به. تستمر التعليقات في الحديث عن إضافة webrtc بعد ذلك ، والذي وجدته هو المشكلة الكاملة لهذه المكتبة.

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

لقد قمت بتضمين ملفات js الثابتة والمترجمة والمُصغرة التي كنت أستخدمها منذ فترة حتى الآن. أستخدمه للحضور إلى المدرسة باستخدام رموز QrCodes عبر أي هواتف يمتلكها الطلاب والمعلمون ، والتي كانت عبارة عن أكثر من 30 نموذجًا في هذه المرحلة. يمكنه الاستيلاء على أي كاميرا.

آمل أن يساعد هذا.

رمز الكاميرا الخلفية

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

رقم 182 (تعليق)

لقد حفظت يا سيدي للتو وظيفة مطور مبتدئ ، لقد حصلت على نفسك من المعجبين مدى الحياة.

شكرا. كنت على حق حيث كنت عندما رأيت هذا الرمز. كان لديه موعد نهائي ويحتاج إلى كاميرات من 30 نوعًا مختلفًا. أنا سعيد لأنهم كتبوا هذا.

يعمل الآن لمدة 15 شهرًا مع 45 طرازًا مختلفًا من الهواتف وفواق واحد فقط على هاتف Samsung تم إصلاحه عندما قامت Samsung بتصحيحه. لذلك كان خطأ Samsung WebKit.

أهلا،
أواجه أيضًا مشكلة الكاميرا الخلفية مع IOS كشخص آخر. الكاميرا الخلفية لا تفتح على iPhone ، والكاميرا الأمامية الافتراضية قيد التشغيل. الرجاء مساعدتي إذا قام أي شخص بحل هذه المشكلة باستخدام الإصدار المحدث (13.xx. xx) من Safari.

هل اكتشف أي شخص كيفية استخدام الكاميرا الخلفية مع Safari على نظام التشغيل iOS 12+؟

لقد كنت أستخدم نسخة معدلة من هذه المكتبة منذ حوالي 7 أشهر الآن على أكثر من 30 نوعًا من الهواتف والأجهزة اللوحية التي تعمل بنظامي التشغيل iOS و Android. انظر إلى التعليقات التي تركتها أعلاه حول نسخة معدلة للحصول على أي كاميرا من نظام التشغيل الذي تعمل به. تستمر التعليقات في الحديث عن إضافة webrtc بعد ذلك ، والذي وجدته هو المشكلة الكاملة لهذه المكتبة.

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

لقد قمت بتضمين ملفات js الثابتة والمترجمة والمُصغرة التي كنت أستخدمها منذ فترة حتى الآن. أستخدمه للحضور إلى المدرسة باستخدام رموز QrCodes عبر أي هواتف يمتلكها الطلاب والمعلمون ، والتي كانت عبارة عن أكثر من 30 نموذجًا في هذه المرحلة. يمكنه الاستيلاء على أي كاميرا.

آمل أن يساعد هذا.

رمز الكاميرا الخلفية

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

رقم 182 (تعليق)

عملت مثل السحر على كل من Android و iOS! لقد قمت للتو بتنزيل فرع instascan الرئيسي الأصلي ، ووضع ملفاتك في مجلد "dist" ، وهذا كل شيء! شكرا جزيلا سيدي !

عملت مثل السحر على كل من Android و iOS! لقد قمت للتو بتنزيل فرع instascan الرئيسي الأصلي ، ووضع ملفاتك في مجلد "dist" ، وهذا كل شيء! شكرا جزيلا سيدي !

@ antworks-hub هل استخدمت الكود الكامل من الفرع أو js المصغر؟
من أين حصلت على مجلد "dist"؟

عملت مثل السحر على كل من Android و iOS! لقد قمت للتو بتنزيل فرع instascan الرئيسي الأصلي ، ووضع ملفاتك في مجلد "dist" ، وهذا كل شيء! شكرا جزيلا سيدي !

@ antworks-hub هل استخدمت الكود الكامل من الفرع أو js المصغر؟
من أين حصلت على مجلد "dist"؟

@ Sandi2211 أعتقد أنني أنشأت مجلد "dist" في جذر الفرع الرئيسي الأصلي لـ instascan ووضعت محتوى ملف instasca، min.zip في هذا المجلد.

هل اكتشف أي شخص كيفية استخدام الكاميرا الخلفية مع Safari على نظام التشغيل iOS 12+؟

لقد كنت أستخدم نسخة معدلة من هذه المكتبة منذ حوالي 7 أشهر الآن على أكثر من 30 نوعًا من الهواتف والأجهزة اللوحية التي تعمل بنظامي التشغيل iOS و Android. انظر إلى التعليقات التي تركتها أعلاه حول نسخة معدلة للحصول على أي كاميرا من نظام التشغيل الذي تعمل به. تستمر التعليقات في الحديث عن إضافة webrtc بعد ذلك ، والذي وجدته هو المشكلة الكاملة لهذه المكتبة.
لقد أزلت webrtc من المشروع تمامًا وأعدت تجميعه. لم تعد هناك حاجة إلى webrtc مع هذا الرمز عند تحويله إلى es5 أو أعلى. استخدام webrtc في المكتبة وكيفية ترميزها لا يسمح باسترداد الكاميرا الصحيحة.
لقد قمت بتضمين ملفات js الثابتة والمترجمة والمُصغرة التي كنت أستخدمها منذ فترة حتى الآن. أستخدمه للحضور إلى المدرسة باستخدام رموز QrCodes عبر أي هواتف يمتلكها الطلاب والمعلمون ، والتي كانت عبارة عن أكثر من 30 نموذجًا في هذه المرحلة. يمكنه الاستيلاء على أي كاميرا.
آمل أن يساعد هذا.
رمز الكاميرا الخلفية

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip
رقم 182 (تعليق)

هذا يحل مشكلتي ، شكرا جزيلا لك.

شكرا يا رجل ، بلدي يعمل بشكل جيد ، فقط أضف js الجديد الخاص بك.

لا مشكلة. أنا سعيد لأن هذا كله لا يزال يعمل هنا.

هل اكتشف أي شخص كيفية استخدام الكاميرا الخلفية مع Safari على نظام التشغيل iOS 12+؟

لقد كنت أستخدم نسخة معدلة من هذه المكتبة منذ حوالي 7 أشهر الآن على أكثر من 30 نوعًا من الهواتف والأجهزة اللوحية التي تعمل بنظامي التشغيل iOS و Android. انظر إلى التعليقات التي تركتها أعلاه حول نسخة معدلة للحصول على أي كاميرا من نظام التشغيل الذي تعمل به. تستمر التعليقات في الحديث عن إضافة webrtc بعد ذلك ، والذي وجدته هو المشكلة الكاملة لهذه المكتبة.

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

لقد قمت بتضمين ملفات js الثابتة والمترجمة والمُصغرة التي كنت أستخدمها منذ فترة حتى الآن. أستخدمه للحضور إلى المدرسة باستخدام رموز QrCodes عبر أي هواتف يمتلكها الطلاب والمعلمون ، والتي كانت عبارة عن أكثر من 30 نموذجًا في هذه المرحلة. يمكنه الاستيلاء على أي كاميرا.

آمل أن يساعد هذا.

رمز الكاميرا الخلفية

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

رقم 182 (تعليق)

Tks ، @ apchandler11! لقد حفظت عملي. dms الله!