Bagaimana cara mengakses kamera di aplikasi web layar awal iOS11?

Ringkasan

Kami tidak dapat mengakses kamera dari aplikasi web layar awal iOS11 (rilis publik) baik menggunakan WebRTC atau input file, detail di bawah ini. Bagaimana bisa pengguna kami terus mengakses kamera?

Kami melayani halaman aplikasi web melalui https.

Pembaruan, April

Rilis publik iOS 11.3 tampaknya telah memperbaiki masalah dan akses kamera input file berfungsi lagi!

Pembaruan, Maret

Seperti yang dikatakan orang-orang di sini, dokumen Apple menyarankan fungsi kamera aplikasi web kembali dalam 11.3 bersama dengan pekerja layanan. Ini bagus tapi kami belum yakin apakah kami ingin semua orang menginstal ulang sampai kami benar-benar menguji pada 11.3GM.

Solusi, November

Kami kehilangan harapan Apple ingin memperbaiki ini dan bergerak maju. Dimodifikasi aplikasi web kami untuk menghapus fungsi "Tambahkan ke layar awal" iOS dan meminta pengguna yang terpengaruh untuk menghapus ikon layar beranda sebelumnya.

Pembaruan, 6 Desember

iOS 11.2 dan iOS 11.1.2 tidak diperbaiki.

Penanganan masalah, 21 September

Sepertinya kita bisa bertanya kepada pelanggan aplikasi web yang ada

• tidak meningkatkan ke iOS11 - semoga berhasil :)
• ambil foto di kamera iOS lalu pilih kembali di aplikasi web
• tunggu ios beta berikutnya
• instal ulang sebagai halaman Safari di browser (setelah kami menghapus logika ATHS)
• beralih ke Android

Input File

Kode produksi kami saat ini menggunakan input file yang telah bekerja dengan baik selama bertahun-tahun dengan iOS 10 dan lebih lama. Di iOS11 berfungsi sebagai tab Safari tetapi tidak dari aplikasi layar beranda. Dalam kasus terakhir kamera dibuka dan hanya layar hitam yang ditampilkan, karenanya tidak dapat digunakan.

   <meta name="apple-mobile-web-app-capable" content="yes">
   ...
   <input type="file" accept="image/*">

WebRTC

Safari 11 di iOS11 menawarkan penangkapan media WebRTC yang hebat.

Kita dapat menangkap gambar kamera ke kanvas di halaman web normal di desktop dan seluler menggunakan navigator.mediaDevices.getUserMedia per kode sampel yang ditautkan di sini .

Saat kami menambahkan halaman ke layar beranda iPad atau iPhone, navigator.mediaDevicesmenjadi undefineddan tidak dapat digunakan.

    <meta name="apple-mobile-web-app-capable" content="yes">
    ...
    // for some reason safari on mac can debug ios safari page but not ios home screen web apps 
    var d = 'typeof navigator : ' + typeof navigator; //object
    d += 'typeof navigator.mediaDevices : ' + typeof navigator.mediaDevices; // undefined
    // try alternates
    d += 'typeof navigator.getUserMedia  : ' + typeof navigator.getUserMedia; // undefined
    d += 'typeof navigator.webkitGetUserMedia  : ' + typeof navigator.webkitGetUserMedia; // undefined
    status1.innerHTML = d;

Kami memiliki masalah yang sangat mirip. Sejauh ini satu-satunya solusi yang dapat kami lakukan adalah menghapus tag meta agar menjadi "apple-mobile-web-app-able" dan memungkinkan pengguna untuk membukanya di Safari, di mana semuanya tampak bekerja secara normal.

Pembaruan : Sementara beberapa changelog dan posting yang dipublikasikan sebelumnya membuat saya percaya bahwa Aplikasi Web yang menggunakan manifest.jsonalih - alih pada apple-mobile-web-app-capableakhirnya akan memiliki akses ke implementasi WebRTC yang tepat, sayangnya ini tidak benar, seperti yang lain di sini tunjukkan dan pengujian telah dikonfirmasi. Muka sedih. Maaf atas ketidaknyamanan yang disebabkan oleh ini dan mari kita berharap bahwa suatu hari yang beruntung di galaksi yang jauh, jauh Apple akhirnya akan memberi kita akses kamera dalam pandangan yang didukung oleh (non-Safari) WebKit ...

Ya, seperti yang disebutkan orang lain, getUserMedia hanya tersedia langsung di Safari tetapi tidak di UIWebView atau WKWebView, jadi sayangnya satu-satunya pilihan Anda adalah

• menghapus <meta name="apple-mobile-web-app-capable" content="yes">agar 'aplikasi' Anda berjalan di tab Safari normal, tempat getuserMedia dapat diakses
• menggunakan kerangka kerja seperti Apache Cordova yang memberi Anda akses ke kamera perangkat dengan cara lain.

Ini untuk berharap Apple menghapus pembatasan WebRTC ini lebih cepat daripada nanti ...

Sumber:
Untuk pengembang yang menggunakan WebKit di aplikasi mereka, RTCPeerConnection dan RTCDataChannel tersedia di semua tampilan web, tetapi akses ke kamera dan mikrofon saat ini terbatas untuk Safari.

Kabar baik! Kamera akhirnya tampaknya dapat diakses dari aplikasi web layar awal di iOS 11.3 beta pertama.

Saya telah membuat repo dengan beberapa file, yang menunjukkan bahwa ia berfungsi:

https://github.com/joachimboggild/uploadtest

Langkah-langkah untuk menguji:

1. Sajikan file-file ini dari situs web yang dapat diakses dari ponsel Anda
2. Buka index.html di iOS Safari
3. Tambahkan ke layar beranda
4. Buka aplikasi dari layar beranda. Sekarang halaman web terbuka di layar penuh, tanpa navigasi ui.
5. Tekan tombol file untuk memilih gambar dari kamera.

Sekarang kamera seharusnya bekerja secara normal dan bukan layar hitam. Ini menunjukkan bahwa fungsionalitas berfungsi kembali.

Saya harus menambahkan bahwa saya menggunakan bidang polos, bukan getUserMedia atau semacamnya. Saya tidak tahu apakah itu berhasil.

Rupanya diselesaikan dalam "ios 13 beta 1": https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Pembaruan 20/03/2020: https://twitter.com/firt/status/1241163092207243273?s=19

Ini tampaknya berfungsi lagi di iOS 11.4 jika Anda menggunakan bidang input file.

Baru-baru ini saya menghadapi masalah yang sama, satu-satunya solusi yang saya buat adalah membuka aplikasi di browser alih-alih mode normal. Tetapi hanya di iOS!

Triknya adalah membuat 2 file manifes.json dengan konfigurasi berbeda.

Yang normal untuk android dan satu untuk semuanya adalah Apple, manifest-ios.json, satu-satunya perbedaan adalah pada properti tampilan.

Langkah 1: Tambahkan id ke tag tautan manifes:

<link id="manifest" rel="manifest" href="manifest.json">

Langkah 2: Menambahkan skrip ini ke bagian bawah tubuh:

<script>
    let isIOS = /(ipad|iphone|ipod|mac)/g.test(navigator.userAgent.toLowerCase());
    let manifest = document.getElementById("manifest");
    if (isIOS)
      manifest.href = 'manifest-ios.json'
</script>

Langkah 3: di manifes-ios.json atur tampilan ke browser

{
    "name": "APP",
    "short_name": "app",
    "theme_color": "#0F0",
    "display": "browser", // <---- use this instead of standard
    ...
}

Masalah lain muncul seperti membuka aplikasi beberapa kali di tab multple, terkadang.

Tapi semoga ini membantu kalian!