Instascan: IOS11 - Kompatibilitas RTC Web

Hadiah $500 Saya tidak dapat menyelesaikan masalah ini Mungkin hadiah $500 akan mendorong seseorang yang lebih mampu daripada saya untuk memecahkan masalah ini. Saya percaya bahwa IOS11 Beta sekarang mendukung webRTC getUserMedia() . Anda dapat melihat demo yang berfungsi (hanya jika Anda menginstal iOS11 beta :-) --> https://tokbox.com/developer/sdks/js/ --> https://tokbox.com/developer/beta/safari /

Hadiah ini masih berlaku - dan saya akan menghormatinya.
kami bermaksud menggunakan instascan dalam proyek kami, tetapi membutuhkan dukungan (yang kami siap bayar)
apakah ada yang bisa
[1] memecahkan masalah
[2] berkontribusi kode sumber terbuka ke proyek instascan
[3] dan dapatkan sedikit uang untuk usaha Anda

+1

@ddwyer Kami menerapkan Instascan dalam aplikasi baru-baru ini. Ini adalah perpustakaan yang bagus dan berfungsi seperti yang diharapkan. Kami tidak menggunakan versi yang dirilis, tetapi membangun yang baru dari master.

Inilah yang saya lakukan untuk mendapatkan build baru ke aplikasi kami:

git clone [email protected]:schmich/instascan.git
cd instascan/
npm install gulp-cli -g
npm install
gulp release
cp dist/instascan.min.js /path/to/our/libraries/include/dir

Memilih kamera berdasarkan ID tidak berhasil. Itu selalu menggunakan kamera depan. Kami memecahkan ini dengan menambahkan tambalan jelek ke camera.js:

diff --git a/src/camera.js b/src/camera.js
index 5403b3c..4a46e32 100644
--- a/src/camera.js
+++ b/src/camera.js
@@ -31,6 +31,11 @@ class Camera {
       }
     };

+    var userAgent = window.navigator.userAgent;
+    if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
+        constraints.video.facingMode = "environment";
+    }
+
     this._stream = await Camera._wrapErrors(async () => {
       return await navigator.mediaDevices.getUserMedia(constraints);
     });

Saya tidak akan membuat PR untuk perubahan ini karena ini bukan solusi yang bagus. Tapi itu berhasil, jangan ragu untuk menggunakannya di proyek Anda.

Perlu diketahui, di iOS11 beta elemen <video /> membutuhkan atribut playsinline . Tampaknya menjadi bug untuk sementara tetapi sekarang karena beta segera keluar ...

https://github.com/serratus/quaggaJS/commit/e8352c7017a2f7a7500fa054f342b9689ff5d8b7#diff -afd7828cb7f3e7a1f8fe7305f50b5021

https://github.com/PaulKinlan/qrcode/commit/b79718b2391969b2291db93ba388b4c2b2f3f9d4

saya dapat mengonfirmasi bahwa kami mengikuti instruksi oleh @inorbert dan shazam .. seperti sulap semuanya berfungsi.
kami akan berusaha memperbaiki apa yang telah kami temukan dan melaporkan kembali.
-- Darren

Ini diperbaiki di schmich/instascan/pull/78. Jangan lupa untuk memasukkan webrtc-adapter terbaru secara manual dalam proyek Anda.

@PallasKatze adalah GURU javascript - ini semua berfungsi sekarang dan mungkin harus diuji dan digabungkan? jika ada yang tertarik, hadiah telah dibayarkan penuh -- terima kasih atas bantuan Anda.

mengapa saya tidak mengerjakannya di safari11
var userAgent = window.navigator.userAgent;

• if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
• constraint.video.facingMode = "lingkungan";
• }
  +
  this._stream = menunggu Kamera._wrapErrors(async() => {
  kembali menunggu navigator.mediaDevices.getUserMedia(kendala);
  });

Ini adalah versi yang berfungsi dikompilasi dari https://github.com/centogram/instascan
instascan.zip

@centogram apakah mungkin saya menggunakan kamera depan dengan kode ios11 Anda? Terima kasih :)

@pandalion ya, tetapi Anda perlu mengubah kodenya. Anda hanya ingin mengubah batasan constraint.video.facingMode dari "environment" menjadi "user".

@centogram bekerja seperti pesona. Terima kasih!

@centogram @hrrsppzgl
baris mana yang harus saya modifikasi?

@centogram @hrrsppzgl
baris mana yang harus saya modifikasi?

@adelsadek1
Apa yang benar-benar Anda butuhkan? Sudahkah Anda mengunduh kode modifikasi @centogram dari sini?
https://github.com/centogram/instascan

@hrrsppzgl ya saya punya tetapi masih tidak berfungsi @centogram disebutkan untuk memodifikasi baris tetapi saya tidak tahu baris mana yang harus saya modifikasi

@hrrsppzgl ya saya punya tetapi masih tidak berfungsi @centogram disebutkan untuk memodifikasi baris tetapi saya tidak tahu baris mana yang harus saya modifikasi

Pencarian untuk
menghadapiMode: { tepat: "lingkungan" },
Ubah "lingkungan" menjadi "pengguna"

Hai @lnorbert

Aku mencoba mengikuti langkahmu,

git clone [email protected]:schmich/instascan.git
cd instascan/
npm install gulp-cli -g
npm install
gulp release
cp dist/instascan.min.js /path/to/our/libraries/include/dir

Tetapi ketika mencoba cmd pertama, itu menimbulkan kesalahan di bawah ini

Tolong, bisakah Anda membantu saya di sini?

Terima kasih