Instascan: IOS safari 11.4- Masalah pembukaan kamera belakang

Apakah Anda memiliki akses ke perangkat apple? Apakah Anda tahu jika demo berfungsi?

Sepertinya ini mengalami masalah dengan safari iOS tetapi saya telah membaca bahwa orang dapat mengatasi masalah ini dengan menambahkan tag meta. Hanya menggali di sekitar forum ini dan Anda akan melihat. Saya sedang mengerjakan sesuatu yang serupa, jadi saya tertarik. Apa yang menahan saya adalah saya tidak memiliki perangkat yang tersedia.

Saya mencoba demo di iPhone, tidak berhasil.

Ya, sedang mengerjakan ini, saya tidak bisa membuatnya bekerja. Mencoba untuk kembali dan membaca kembali utas. Saya membuat kamera depan berfungsi dengan menambahkan adaptor RTC web terbaru dan menambahkan atribut _playsinline_ ke tag video. Itu bisa membaca kamera tetapi tidak melakukan apa-apa saat menukar ke kamera belakang.

saya telah menambahkan atribut di dalam tag video dan juga menyebutkan tag meta.

saya telah menambahkan atribut playsinline di dalam tag video dan juga menyebutkan tag meta.

Seseorang sebenarnya telah memperbaiki ini di salah satu utas. Saya sedang mencobanya sekarang tetapi harus menunggu seseorang dengan iPhone untuk bekerja.

Hei, saya berhasil tetapi masih ada masalah, meskipun memilih kamera, defaultnya akan selalu menjadi kamera belakang belakang. Jadi jika Anda perlu memilih kamera depan, Anda kacau (tapi serius, siapa yang akan mencoba dan memindai dengan kamera depan).

Inilah yang saya lakukan!

Saya menambahkan tag meta.
<meta name="apple-mobile-web-app-capable" content="yes">

Menambahkan atribut ini:
<video id="scanner" class="video-back" playsinline></video>

Menambahkan file JS ini:
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Dan kemudian mengemas ini untuk dirilis: https://github.com/JoseCDB/instascan/tree/ios-rear-camera. Tidak yakin apakah Anda tahu cara menggunakan Gulp dengan node.js tetapi itu mudah. Saya mendapatkannya dalam 15 menit! Saya menggunakan Instascan versi orang ini. Dia tahu masalahnya dan bisa memperbaikinya. Semoga ini membantu. Semoga beruntung.

Saya telah menggunakan tag meta, tag video, dan adapter-latest.js.
Dan saya menggunakan instscan.min.js dan tidak tahu bagaimana bisa menggunakan ".js - scanner.js - camara.js" secara terpisah.

Saya telah menggunakan tag meta, tag video, dan adapter-latest.js.
Dan saya menggunakan instscan.min.js dan tidak tahu bagaimana bisa menggunakan ".js - scanner.js - camara.js" secara terpisah.

Anda seharusnya telah menginstal node.js. Ada prompt perintah yang mengemas semua file itu bersama-sama, hasil akhirnya adalah file JS yang diperkecil dari instascanner.

Ini adalah produk hebat dan sangat berguna, jadi terima kasih telah membuatnya luar biasa. Inilah masalah dengan instascan ini dari penelitian saya:

• Kelas Kamera saat memanggil getCameras mengembalikan koleksi objek Kamera yang dibuat dari objek MediaDeviceInfo yang dikumpulkan melalui panggilan ke navigator.mediaDevices.enumerateDevices(). Ini BUKAN objek id _ dan _ name _ dan tidak lebih. Mereka digunakan untuk membuat array objek Kamera.

Saat Anda memanggil _scanner.start(camera)_, Anda meneruskan objek Kamera yang akan memanggil metode _camera.start()_ pada kamera.

• Metode _camera.start()_ KEMUDIAN memanggil _navigator.mediaDevices.getUserMedia(contraints)_, yang mengembalikan Array objek
• _scanner.start()_ memanggil _scanner._enableScan(camera)_ memberinya objek First MediaStream yang dikembalikan dari panggilan di atas di kamera. Ini mengatur

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

Masalah Kendala:

Objek Kamera yang diteruskan menggunakan id -nya dalam batasan sebagai _"wajib"_ untuk pencarian perangkat. Jika tidak ditemukan, tidak ada video yang akan ditampilkan. Batasan "wajib" lainnya juga ditetapkan.

Perangkat yang berbeda TIDAK MENDUKUNG kendala yang digunakan!
Jalankan tautan ini di perangkat yang ingin Anda gunakan dan itu akan memberi tahu Anda batasan apa yang didukungnya:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Jalankan tautan ini di perangkat yang ingin Anda gunakan dan masukkan batasan. Ini akan memberi tahu Anda jika didukung:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Batasan yang didukung Ipad/Iphone/IOS:

aspekRatio, menghadapiMode, _deviceId * _ , tinggi, lebar, aspekRatio dan lain-lain.

_Ketika saya menguji ini, _deviceId akan diabaikan sebagai batasan._ Coba ini di tautan di atas untuk batasan dan Anda akan melihatnya menetapkan deviceId = "". Ketika saya mengambilnya di javascript dan menampilkannya, iphone selalu mengembalikan deviceId kosong.

Jadi, Untuk mengambil kamera belakang di Iphone, Anda harus menggunakan mode menghadap dan TIDAK menggunakan deviceId.

Batasan yang didukung Android:

deviceId, _facingMode * _, aspectRatio, height, width, dan banyak lainnya.

Saya menguji ini, pada tablet samsung dan ponsel android. FaceMode default ke kamera depan "pengguna". Saya bereksperimen dengan kode ini dan menemukan bahwa untuk beberapa alasan yang belum ditemukan, FaceMode untuk Android tidak berfungsi. Namun itu berfungsi di tautan di atas. Saya akan terus menyelidiki bagian itu dan mungkin memperbaiki kode ini agar berfungsi dengan baik dengan menghadapiMode dan Android.

* * JAWABAN MASALAH ANDROID * * *
Pembuatan Gulp dari proyek ini menyertakan versi adaptor webrtc ^1.4.0 yang mengacaukan mode menghadapi di Android Chrome. Melihat melalui kode itu benar-benar menghapus mode menghadap.

• Untuk memperbaiki dalam proyek ini - di _index.js_, hapus baris 2 require('webrtc-adapter'); Kemudian ikuti prosedur pembuatan di bawah ini. Ketika saya menguji pada tablet dan 4 ponsel Android yang berbeda di Chrome, semuanya berfungsi kembali untuk mengambil kamera belakang.

Untuk mengambil kamera belakang di Android dengan kode instascan ini, Anda dapat menggunakan deviceId.
Pastikan deviceId adalah batasan _video_ seperti

video: {
  devideId: this.id
}

Kode Kendala Kamera:

Berikut adalah Kode dari proyek yang menetapkan batasan dan mendapatkan objek MediaStream
Alasan mengapa kode ini tidak berfungsi dengan baik adalah sourceId dari _video constraint_ tidak didukung untuk _Android_ atau _Iphone_. Ini harus diubah menjadi deviceId . Juga semua item wajib harus pergi jika mereka tidak menangani perangkat Anda.

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);
});

Cara memodifikasi InstaScan dan mengecilkannya:

untuk mendapatkan ini dan mengubahnya, saya telah menggunakan VSCode.
1) Instal Node.js dan vsCode.
2) di terminal di direktori yang ingin Anda unduh, jalankan:
git clone https://github.com/JoseCDB/instascan.git

3) di terminal cd ke direktori instascan:
cd instascan

4) ubah javascript dan jalankan gulp untuk melepaskan kode:
gulp release

5) Ini akan memberi Anda item instascan.min.js baru yang diperkecil di folder _dist_.

Saya akan mencari tahu masalah Android ini semoga akhir pekan ini. Saya harap ini memberi Anda wawasan yang cukup untuk proyek masa depan dengan perpustakaan yang luar biasa ini.

Hai, ini harus bekerja dengan baik.
Pertama, tambahkan adapter.js dari https://github.com/webrtc/adapter.

Setelah itu klon ini:
git clone https://github.com/quocthai95/instascan.git
Lari:
npm i
untuk menginstal kebutuhan

Gunakan tegukan untuk melepaskan kode akhir:
gulp release

Saya telah memeriksa Iphone 6 plus (iOS 11.4) & Iphone 8 plus (iOS 11.3) dan itu berfungsi dengan baik. Anda dapat menukar kamera secara normal.

Semoga Anda bisa menyelesaikan masalah Anda.

Hai, ini harus bekerja dengan baik.
Pertama, tambahkan adapter.js dari https://github.com/webrtc/adapter.

Setelah itu klon ini:
git clone https://github.com/quocthai95/instascan.git
Lari:
npm i
untuk menginstal kebutuhan

Gunakan tegukan untuk melepaskan kode akhir:
gulp release

Saya telah memeriksa Iphone 6 plus (iOS 11.4) & Iphone 8 plus (iOS 11.3) dan itu berfungsi dengan baik. Anda dapat menukar kamera secara normal.

Semoga Anda bisa menyelesaikan masalah Anda.

Saat memasang kebutuhan saya mendapatkan "12 kerentanan (1 rendah, 5 sedang, 6 tinggi)".
Beberapa perintah "$ npm install --save-dev [package-name]" tampaknya menyelesaikan kerentanan ini, tetapi saya tidak dapat membuatnya karena pengecualian berikut:

$ teguk rilis assert.js:351 throw err; ^ AssertionError [ERR_ASSERTION]: Fungsi tugas harus ditentukan di Gulp.set [sebagai _setTask] (C:\Users\John\Downloads\instascan-ios-rear-camera\instascan-ios-rear-camera\node_modules\undertaker\lib \set-task.js:10:3)

Bagaimana cara naik dari sini, saya sangat ingin mencoba build ini. Ini bekerja dengan baik dengan ponsel android saya?

/John

Hai @johnatitide ,
Apakah Anda menginstal gulp versi terbaru (4.0.0)? Jika demikian, coba batasi ke 3.9.1. FYI:
https://github.com/ampproject/docs/issues/793#issuecomment -354836162
Atau dapatkah Anda memberikan perintah mana yang Anda lakukan untuk membuatnya.

Hai @quocthai95

Bangunan bekerja dengan perintah berikut:
git clone https://github.com/quocthai95/instascan.git
npm install [email protected]
npm saya
rilis tegukan

Sekarang saya dapat mengganti kamera di Safari di iPad dan iPhone. Bagus.

Adakah kemungkinan perbaikan kendala akan digabungkan kembali ke repo schmich?

Adakah kemungkinan perbaikan kendala akan digabungkan kembali ke repo schmich?

Saya telah membuat permintaan tarik baru. Tunggu diterima ^^

@quocthai95 hai, saya mengikuti langkah Anda dari https://github.com/schmich/instascan/issues/182#issuecomment -447198290.

saya bertanya-tanya, saya mendapatkan kamera depan sebagai default di chrome android saya. bertanya-tanya bagaimana saya bisa membuat kamera belakang sebagai default? ada contoh kodenya?

@fariskas ,
Gunakan regexp untuk menguji apakah itu cocok dengan /back/ lalu mulai, sehingga Anda dapat memiliki kamera belakang sebagai default.

`Instascan.Camera.getCameras().then(fungsi (kamera) {
if(cameras[0].name.match(/back/i)){
scanner.start(kamera[0]);
} else if(cameras[1].name.match(/back/i)){
scanner.start(kamera[1]);
}
}

Ini mungkin berguna: Saya menggunakan for-loop untuk menemukan "kembali" di cameras[i].name tetapi saya tidak berhasil dan tidak dapat memilih kamera belakang di iPad sampai saya menulis cameras[i].name ke console.log dan mengetahui bahwa saya harus mencari "achterzijde" (yang berarti "kembali" dalam bahasa Belanda).
Jadi jika Anda tidak berhasil mencoba memilih kamera belakang di iOS, coba terjemahkan "kembali" atau tulis cameras[i].name menjadi console.log untuk mengetahui apa nama kamera belakang.

Saya dapat mengonfirmasi bahwa demo hanya berfungsi dengan kamera menghadap ke depan. Ini dengan Safari di iOS 12.2

Adakah yang tahu cara menggunakan kamera belakang dengan Safari di iOS 12+?

Adakah yang tahu cara menggunakan kamera belakang dengan Safari di iOS 12+?

Saya telah menggunakan versi modifikasi dari perpustakaan ini selama sekitar 7 bulan sekarang di lebih dari 30+ jenis ios dan ponsel dan tablet android. Lihat komentar yang saya tinggalkan di atas tentang versi modifikasi untuk mendapatkan kamera apa pun dari os yang Anda gunakan. Komentar terus berbicara tentang menambahkan webrtc setelahnya, yang menurut saya merupakan keseluruhan masalah perpustakaan ini.

Saya menghapus webrtc dari proyek sama sekali dan mengkompilasi ulang. webrtc tidak diperlukan lagi dengan kode ini ketika ditranspilasikan ke es5 atau lebih tinggi. Penggunaan webrtc di perpustakaan dan bagaimana itu dikodekan tidak memungkinkan kamera yang benar untuk diambil.

Saya telah menyertakan file js reguler dan minified yang diperbaiki dan ditranspilasikan yang telah saya gunakan untuk sementara waktu sekarang. Saya menggunakannya untuk kehadiran di sekolah dengan QRCodes di semua ponsel yang dimiliki siswa dan guru, yang saat ini sudah ada sekitar 30+ model. Itu bisa mengambil kamera apa pun.

Saya harap ini membantu.

Kode Kamera Belakang
```
pemindai = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
.then(handleSuccess)
.catch(handleError);
//Mulai memindai
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

Ini adalah produk hebat dan sangat berguna, jadi terima kasih telah membuatnya luar biasa. Inilah masalah dengan instascan ini dari penelitian saya:

• Kelas Kamera saat memanggil getCameras mengembalikan koleksi objek Kamera yang dibuat dari objek MediaDeviceInfo yang dikumpulkan melalui panggilan ke navigator.mediaDevices.enumerateDevices(). Ini BUKAN objek id _ dan _ name _ dan tidak lebih. Mereka digunakan untuk membuat array objek Kamera.

Saat Anda memanggil _scanner.start(camera)_, Anda meneruskan objek Kamera yang akan memanggil metode _camera.start()_ pada kamera.

• Metode _camera.start()_ KEMUDIAN memanggil _navigator.mediaDevices.getUserMedia(contraints)_, yang mengembalikan Array objek
• _scanner.start()_ memanggil _scanner._enableScan(camera)_ memberinya objek First MediaStream yang dikembalikan dari panggilan di atas di kamera. Ini menetapkan elemen src ke objek aliran media ini.
  **This Part Is the Disconnect and what is messing it all up!**

Masalah Kendala:

Objek Kamera yang diteruskan menggunakan id -nya dalam batasan sebagai _"wajib"_ untuk pencarian perangkat. Jika tidak ditemukan, tidak ada video yang akan ditampilkan. Batasan "wajib" lainnya juga ditetapkan.

Perangkat yang berbeda TIDAK MENDUKUNG kendala yang digunakan!
Jalankan tautan ini di perangkat yang ingin Anda gunakan dan itu akan memberi tahu Anda batasan apa yang didukungnya:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Jalankan tautan ini di perangkat yang ingin Anda gunakan dan masukkan batasan. Ini akan memberi tahu Anda jika didukung:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Batasan yang didukung Ipad/Iphone/IOS:

aspekRatio, menghadapiMode, _deviceId * _ , tinggi, lebar, aspekRatio dan lain-lain.

_Ketika saya menguji ini, _deviceId akan diabaikan sebagai batasan._ Coba ini di tautan di atas untuk batasan dan Anda akan melihatnya menetapkan deviceId = "". Ketika saya mengambilnya di javascript dan menampilkannya, iphone selalu mengembalikan deviceId kosong.

Jadi, Untuk mengambil kamera belakang di Iphone, Anda harus menggunakan mode menghadap dan TIDAK menggunakan deviceId.

Batasan yang didukung Android:

deviceId, _facingMode * _, aspectRatio, height, width, dan banyak lainnya.

Saya menguji ini, pada tablet samsung dan ponsel android. FaceMode default ke kamera depan "pengguna". Saya bereksperimen dengan kode ini dan menemukan bahwa untuk beberapa alasan yang belum ditemukan, FaceMode untuk Android tidak berfungsi. Namun itu berfungsi di tautan di atas. Saya akan terus menyelidiki bagian itu dan mungkin memperbaiki kode ini agar berfungsi dengan baik dengan menghadapiMode dan Android.

* _ * JAWABAN MASALAH ANDROID * _ **
Pembuatan Gulp dari proyek ini menyertakan versi adaptor webrtc ^1.4.0 yang mengacaukan mode menghadapi di Android Chrome. Melihat melalui kode itu benar-benar menghapus mode menghadap.

• Untuk memperbaiki dalam proyek ini - di _index.js_, hapus baris 2 require('webrtc-adapter'); Kemudian ikuti prosedur pembuatan di bawah ini. Ketika saya menguji pada tablet dan 4 ponsel Android yang berbeda di Chrome, semuanya berfungsi kembali untuk mengambil kamera belakang.

Untuk mengambil kamera belakang di Android dengan kode instascan ini, Anda dapat menggunakan deviceId.
Pastikan deviceId adalah batasan _video_ seperti

video: {
  devideId: this.id
}

Kode Kendala Kamera:

Berikut adalah Kode dari proyek yang menetapkan batasan dan mendapatkan objek MediaStream
Alasan mengapa kode ini tidak berfungsi dengan baik adalah sourceId dari _video constraint_ tidak didukung untuk _Android_ atau _Iphone_. Ini harus diubah menjadi deviceId . Juga semua item wajib harus pergi jika mereka tidak menangani perangkat Anda.

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);
});

Cara memodifikasi InstaScan dan mengecilkannya:

untuk mendapatkan ini dan mengubahnya, saya telah menggunakan VSCode.

1. Instal Node.js dan vsCode.
2. di terminal di direktori yang Anda inginkan untuk mengunduhnya:
   git clone https://github.com/JoseCDB/instascan.git
3. di terminal cd ke direktori instascan:
   cd instascan
4. ubah javascript dan jalankan gulp untuk melepaskan kode:
   gulp release
5. Ini akan memberi Anda item instascan.min.js baru yang diperkecil di folder _dist_.

Saya akan mencari tahu masalah Android ini semoga akhir pekan ini. Saya harap ini memberi Anda wawasan yang cukup untuk proyek masa depan dengan perpustakaan yang luar biasa ini.

Saya mengikuti langkah-langkah di atas kemudian mengedit file camera.js (pada baris 29) seperti di bawah ini
facingMode: { exact: "environment" },
Ini bekerja untuk saya. Terima kasih @apchandler

Saya senang Anda punya sesuatu untuk bekerja untuk Anda! Terima kasih @glorynguyen telah memposting perbaikan ini juga!

Sayangnya solusi ini tidak berfungsi di iOS 13. Ini hanya kosong (bahkan tidak hitam).
Saat melakukan debugging jarak jauh Safari, juga tidak ada kesalahan yang ditampilkan di konsol.

Adakah yang tahu cara menggunakan kamera belakang dengan Safari di iOS 12+?

Saya telah menggunakan versi modifikasi dari perpustakaan ini selama sekitar 7 bulan sekarang di lebih dari 30+ jenis ios dan ponsel dan tablet android. Lihat komentar yang saya tinggalkan di atas tentang versi modifikasi untuk mendapatkan kamera apa pun dari os yang Anda gunakan. Komentar terus berbicara tentang menambahkan webrtc setelahnya, yang menurut saya merupakan keseluruhan masalah perpustakaan ini.

Saya menghapus webrtc dari proyek sama sekali dan mengkompilasi ulang. webrtc tidak diperlukan lagi dengan kode ini ketika ditranspilasikan ke es5 atau lebih tinggi. Penggunaan webrtc di perpustakaan dan bagaimana itu dikodekan tidak memungkinkan kamera yang benar untuk diambil.

Saya telah menyertakan file js reguler dan minified yang diperbaiki dan ditranspilasikan yang telah saya gunakan untuk sementara waktu sekarang. Saya menggunakannya untuk kehadiran di sekolah dengan QRCodes di semua ponsel yang dimiliki siswa dan guru, yang saat ini sudah ada sekitar 30+ model. Itu bisa mengambil kamera apa pun.

Saya harap ini membantu.

Kode Kamera Belakang

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 (komentar)

Ini memecahkan masalah saya, terima kasih banyak.

Apa perbaikan terbaru untuk ini? Saya sudah mencoba beberapa dari utas tetapi sepertinya saya hanya mendapatkan kamera depan.
Tidak tahu bagaimana menggunakan Gulp atau benar-benar mengkompilasi proyek .js .git, saya terutama kode dalam C#/Asp.net Mvc jadi ini agak baru bagi saya.
solusi apchandler memberi saya kesalahan. (Video tidak ditentukan)
Saat ini memuat instascan.min.js "diperbaiki" untuk perangkat Android dan versinya untuk iOS, Tapi sepertinya saya tidak bisa membuatnya berfungsi.

Apa perbaikan terbaru untuk ini? Saya sudah mencoba beberapa dari utas tetapi sepertinya saya hanya mendapatkan kamera depan.
Tidak tahu bagaimana menggunakan Gulp atau benar-benar mengkompilasi proyek .js .git, saya terutama kode dalam C#/Asp.net Mvc jadi ini agak baru bagi saya.
solusi apchandler memberi saya kesalahan. (Video tidak ditentukan)
Saat ini memuat instascan.min.js "diperbaiki" untuk perangkat Android dan versinya untuk iOS, Tapi sepertinya saya tidak bisa membuatnya berfungsi.

Apakah Anda memiliki elemen video html?
```

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

var diri = ini;
self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
self.scanner.addListener('scan', fungsi (konten, gambar) {
self.scans.unshift({ tanggal: +(Tanggal.sekarang()), konten: konten });
});
Instascan.Camera.getCameras().then(fungsi (kamera) {
self.cameras = kamera;
if (panjang kamera > 0) {
self.activeCameraId = kamera[0].id;
self.scanner.start(kamera[0]);
} lain {
console.error('Kamera tidak ditemukan.');
}
}).catch(fungsi (e){
console.error(e);
});
```

Ya, saya membuatnya bekerja dengan:

<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>

Memulai kamera[0] untuk Perangkat Iphone/Ios. Dan ini untuk 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>

Sepertinya masalahnya adalah saya hanya memeriksa jika Request.UserAgent.Contains("ios") dan bukan "iphone", jadi saya menjalankan skrip Android untuk Iphone juga.

Senang mendengarnya. Terimakasih atas infonya.

@apchandler Hai, Apakah Anda tahu jika ada cara untuk memilih kamera belakang 'utama'?

Saya memiliki situs web tempat pengguna saya akan memindai KODE QR menggunakan instascan. Saya sedang mengembangkan situs web dan melakukan beberapa tes yang saya akses ke situs web menggunakan ponsel seluler saya yang memiliki 4 kamera belakang (HUAWEI P30 PRO).

Saya telah mencoba $.each dan dengan kamera belakang pertama yang dipilih, saya tidak dapat memindai apa pun karena penglihatannya sangat kabur dan dengan banyak zoom.

Tapi, jika saya memilih kamera [2] saya bisa memindai semuanya.

Adakah cara umum untuk memilih kamera belakang 'utama'?

Maksud saya, aplikasi web saya akan digunakan oleh begitu banyak pengguna dengan ponsel yang berbeda, jumlah kamera yang berbeda dan urutan kamera juga akan berbeda.

Atau apakah Anda merekomendasikan untuk melakukan pemilihan dengan semua kamera dan kemudian membiarkan pengguna mengambil kamera yang paling cocok untuknya?

Terima kasih

@apchandler Hai, Apakah Anda tahu jika ada cara untuk memilih kamera belakang 'utama'?

Saya memiliki situs web tempat pengguna saya akan memindai KODE QR menggunakan instascan. Saya sedang mengembangkan situs web dan melakukan beberapa tes yang saya akses ke situs web menggunakan ponsel seluler saya yang memiliki 4 kamera belakang (HUAWEI P30 PRO).

Saya telah mencoba $.each dan dengan kamera belakang pertama yang dipilih, saya tidak dapat memindai apa pun karena penglihatannya sangat kabur dan dengan banyak zoom.

Tapi, jika saya memilih kamera [2] saya bisa memindai semuanya.

Adakah cara umum untuk memilih kamera belakang 'utama'?

Maksud saya, aplikasi web saya akan digunakan oleh begitu banyak pengguna dengan ponsel yang berbeda, jumlah kamera yang berbeda dan urutan kamera juga akan berbeda.

Atau apakah Anda merekomendasikan untuk melakukan pemilihan dengan semua kamera dan kemudian membiarkan pengguna mengambil kamera yang paling cocok untuknya?

Terima kasih

Saya menyesal. Saya tidak tahu nilai apa pun yang ditetapkan sebagai kamera 'utama' ketika ada banyak. Anda dapat memberikan fungsi kamera pilih objek kriteria yang menentukan bahwa itu harus setidaknya resolusi tertentu dan spesifikasi lainnya. Itu setidaknya bisa memberi Anda kemampuan kamera yang minimal. Kalau tidak, solusi Anda terdengar bagus untuk bagaimana Anda ingin mendekatinya.

@apchandler Hai, Apakah Anda tahu jika ada cara untuk memilih kamera belakang 'utama'?
Saya memiliki situs web tempat pengguna saya akan memindai KODE QR menggunakan instascan. Saya sedang mengembangkan situs web dan melakukan beberapa tes yang saya akses ke situs web menggunakan ponsel seluler saya yang memiliki 4 kamera belakang (HUAWEI P30 PRO).
Saya telah mencoba $.each dan dengan kamera belakang pertama yang dipilih, saya tidak dapat memindai apa pun karena penglihatannya sangat kabur dan dengan banyak zoom.
Tapi, jika saya memilih kamera [2] saya bisa memindai semuanya.
Adakah cara umum untuk memilih kamera belakang 'utama'?
Maksud saya, aplikasi web saya akan digunakan oleh begitu banyak pengguna dengan ponsel yang berbeda, jumlah kamera yang berbeda dan urutan kamera juga akan berbeda.
Atau apakah Anda merekomendasikan untuk melakukan pemilihan dengan semua kamera dan kemudian membiarkan pengguna mengambil kamera yang paling cocok untuknya?
Terima kasih

Saya menyesal. Saya tidak tahu nilai apa pun yang ditetapkan sebagai kamera 'utama' ketika ada banyak. Anda dapat memberikan fungsi kamera pilih objek kriteria yang menentukan bahwa itu harus setidaknya resolusi tertentu dan spesifikasi lainnya. Itu setidaknya bisa memberi Anda kemampuan kamera yang minimal. Kalau tidak, solusi Anda terdengar bagus untuk bagaimana Anda ingin mendekatinya.

Terima kasih banyak atas jawabannya! Saya akan mencoba dengan resolusi. Instascan dapat mengembalikan resolusi cameraA?

Menurut metode yang disediakan oleh @glorynguyen dan @apchandler.
Sekarang dapat mengaktifkan kamera belakang
Ubah instascan.min
Sebelum
case 0:return i={audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}
Setelah
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:[]}}

Adakah yang tahu cara menggunakan kamera belakang dengan Safari di iOS 12+?

Saya telah menggunakan versi modifikasi dari perpustakaan ini selama sekitar 7 bulan sekarang di lebih dari 30+ jenis ios dan ponsel dan tablet android. Lihat komentar yang saya tinggalkan di atas tentang versi modifikasi untuk mendapatkan kamera apa pun dari os yang Anda gunakan. Komentar terus berbicara tentang menambahkan webrtc setelahnya, yang menurut saya merupakan keseluruhan masalah perpustakaan ini.

Saya menghapus webrtc dari proyek sama sekali dan mengkompilasi ulang. webrtc tidak diperlukan lagi dengan kode ini ketika ditranspilasikan ke es5 atau lebih tinggi. Penggunaan webrtc di perpustakaan dan bagaimana itu dikodekan tidak memungkinkan kamera yang benar untuk diambil.

Saya telah menyertakan file js reguler dan minified yang diperbaiki dan ditranspilasikan yang telah saya gunakan untuk sementara waktu sekarang. Saya menggunakannya untuk kehadiran di sekolah dengan QRCodes di semua ponsel yang dimiliki siswa dan guru, yang saat ini sudah ada sekitar 30+ model. Itu bisa mengambil kamera apa pun.

Saya harap ini membantu.

Kode Kamera Belakang

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 (komentar)

Tuan Anda baru saja menyelamatkan pekerjaan seorang junior dev, Anda telah menjadi penggemar seumur hidup.

Terima kasih. Saya berada tepat di tempat Anda berada ketika saya melihat kode ini. Memiliki tenggat waktu dan membutuhkan kamera dari 30 jenis yang berbeda. Saya senang mereka menulis ini.

Berjalan 15 bulan sekarang dengan 45 model ponsel yang berbeda dan hanya satu cegukan pada ponsel Samsung yang diperbaiki saat Samsung menambalnya. Jadi itu adalah kesalahan Samsung WebKit.

Hai,
Saya juga menghadapi masalah kamera belakang dengan iOS seperti orang lain. Kamera belakang saya tidak terbuka di iPhone, kamera depan default sedang berjalan. Tolong bantu saya jika ada yang telah menyelesaikan masalah ini dengan versi terbaru dari safari (13.xx. xx).

Adakah yang tahu cara menggunakan kamera belakang dengan Safari di iOS 12+?

Saya telah menggunakan versi modifikasi dari perpustakaan ini selama sekitar 7 bulan sekarang di lebih dari 30+ jenis ios dan ponsel dan tablet android. Lihat komentar yang saya tinggalkan di atas tentang versi modifikasi untuk mendapatkan kamera apa pun dari os yang Anda gunakan. Komentar terus berbicara tentang menambahkan webrtc setelahnya, yang menurut saya merupakan keseluruhan masalah perpustakaan ini.

Saya menghapus webrtc dari proyek sama sekali dan mengkompilasi ulang. webrtc tidak diperlukan lagi dengan kode ini ketika ditranspilasikan ke es5 atau lebih tinggi. Penggunaan webrtc di perpustakaan dan bagaimana itu dikodekan tidak memungkinkan kamera yang benar untuk diambil.

Saya telah menyertakan file js reguler dan minified yang diperbaiki dan ditranspilasikan yang telah saya gunakan untuk sementara waktu sekarang. Saya menggunakannya untuk kehadiran di sekolah dengan QRCodes di semua ponsel yang dimiliki siswa dan guru, yang saat ini sudah ada sekitar 30+ model. Itu bisa mengambil kamera apa pun.

Saya harap ini membantu.

Kode Kamera Belakang

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 (komentar)

bekerja seperti pesona di Android dan iOS! Saya baru saja mengunduh cabang master instascan asli, memasukkan file Anda ke folder "dist", dan hanya itu! Terima kasih banyak Pak !

bekerja seperti pesona di Android dan iOS! Saya baru saja mengunduh cabang master instascan asli, memasukkan file Anda ke folder "dist", dan hanya itu! Terima kasih banyak Pak !

@antworks-hub apakah Anda menggunakan seluruh kode dari cabang atau js yang diperkecil?
dari mana Anda mendapatkan folder "dist"?

bekerja seperti pesona di Android dan iOS! Saya baru saja mengunduh cabang master instascan asli, memasukkan file Anda ke folder "dist", dan hanya itu! Terima kasih banyak Pak !

@antworks-hub apakah Anda menggunakan seluruh kode dari cabang atau js yang diperkecil?
dari mana Anda mendapatkan folder "dist"?

@Sandi2211 Saya kira saya membuat folder "dist" di root cabang master instascan asli dan memasukkan konten file instasca,min.zip ke dalam folder itu.

Adakah yang tahu cara menggunakan kamera belakang dengan Safari di iOS 12+?

Saya telah menggunakan versi modifikasi dari perpustakaan ini selama sekitar 7 bulan sekarang di lebih dari 30+ jenis ios dan ponsel dan tablet android. Lihat komentar yang saya tinggalkan di atas tentang versi modifikasi untuk mendapatkan kamera apa pun dari os yang Anda gunakan. Komentar terus berbicara tentang menambahkan webrtc setelahnya, yang menurut saya merupakan keseluruhan masalah perpustakaan ini.
Saya menghapus webrtc dari proyek sama sekali dan mengkompilasi ulang. webrtc tidak diperlukan lagi dengan kode ini ketika ditranspilasikan ke es5 atau lebih tinggi. Penggunaan webrtc di perpustakaan dan bagaimana itu dikodekan tidak memungkinkan kamera yang benar untuk diambil.
Saya telah menyertakan file js reguler dan minified yang diperbaiki dan ditranspilasikan yang telah saya gunakan untuk sementara waktu sekarang. Saya menggunakannya untuk kehadiran di sekolah dengan QRCodes di semua ponsel yang dimiliki siswa dan guru, yang saat ini sudah ada sekitar 30+ model. Itu bisa mengambil kamera apa pun.
Saya harap ini membantu.
Kode Kamera Belakang

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 (komentar)

Ini memecahkan masalah saya, terima kasih banyak.

Terima kasih kawan, saya berfungsi dengan baik, tambahkan saja js baru Anda.

Tidak masalah. Saya senang ini semua masih bekerja di sini.

Adakah yang tahu cara menggunakan kamera belakang dengan Safari di iOS 12+?

Saya telah menggunakan versi modifikasi dari perpustakaan ini selama sekitar 7 bulan sekarang di lebih dari 30+ jenis ios dan ponsel dan tablet android. Lihat komentar yang saya tinggalkan di atas tentang versi modifikasi untuk mendapatkan kamera apa pun dari os yang Anda gunakan. Komentar terus berbicara tentang menambahkan webrtc setelahnya, yang menurut saya merupakan keseluruhan masalah perpustakaan ini.

Saya menghapus webrtc dari proyek sama sekali dan mengkompilasi ulang. webrtc tidak diperlukan lagi dengan kode ini ketika ditranspilasikan ke es5 atau lebih tinggi. Penggunaan webrtc di perpustakaan dan bagaimana itu dikodekan tidak memungkinkan kamera yang benar untuk diambil.

Saya telah menyertakan file js reguler dan minified yang diperbaiki dan ditranspilasikan yang telah saya gunakan untuk sementara waktu sekarang. Saya menggunakannya untuk kehadiran di sekolah dengan QRCodes di semua ponsel yang dimiliki siswa dan guru, yang saat ini sudah ada sekitar 30+ model. Itu bisa mengambil kamera apa pun.

Saya harap ini membantu.

Kode Kamera Belakang

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 (komentar)

Terima kasih, @apchandler11! Anda menyelamatkan pekerjaan saya. tuhan dm!