Bagaimana cara mengakses kamera di aplikasi web layar awal iOS11?

131

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;
ajayel
sumber
5
Saya berharap mereka akan memperbaikinya, tetapi ini bisa menjadi contoh Apple mendorong pengembang ke toko aplikasi mereka dengan menurunkan UX Safari.
perfect_element
3
Saya mencoba mempelajari pengembangan aplikasi web progresif dan saat menguji aplikasi di Android dan iOS saya juga mengalami masalah ini. Menjelajah aplikasi di browser berfungsi dengan baik, tetapi begitu saya "menyimpan ke layar awal" dari safari dan mencoba menggunakannya seperti aplikasi, saya mendapatkan layar hitam ketika mencoba mengakses kamera.
tutley
2
iOS: 11.2.1 - Masalahnya masih ada ...
aLiEnHeAd
2
iOS: 11.2.2 - Masalahnya masih ada ...
MrRobot
3
iOS 11.4.1 sepertinya tidak berhasil untuk saya, tidak ada yang beruntung?
Amah

Jawaban:

25

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.

Tomas Vitasek
sumber
24

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.

StateOfTheArtJonas
sumber
Pembaruan Anda tampaknya tidak benar. Di iOS 11.3 Beta getUserMediadan webkitGetUserMediakeduanya tidak ditentukan saat menggunakan<meta name="apple-mobile-web-app-capable" content="yes">
ro-savage
@ ro-savage rilis finalnya sekarang keluar, dan kami masih belum bisa
Owen
4
safari adalah yang baru yaitu, tolong apel, beri kami izin untuk mengakses data media pengguna
Pablo Cegarra
15

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.

Joachim Bøggild
sumber
Bagaimana Anda bisa menjalankannya dengan <meta name = "apple-mobile-web-app-able" content = "yes">?
Alexander
1
Saya menggunakan formulir normal dengan tag input, dan itu berhasil.
Joachim Bøggild
@ JoachimBøggild Apakah Anda yakin perangkat iOS 11.3+ dapat membuka kamera dari PWA ?? Terima kasih telah memberikan kabar baik.
jegadeesh
Ya cukup yakin. Saya menjalankannya di posmo.com. Saya tidak ingat pengaturannya. Mereka termasuk file manifes.
Joachim Bøggild
1
@ JoachimBøggild dapatkah Anda membagikan tag manifes / VIDEO untuk ini. Saya telah menguji kode saya, dan hanya berfungsi di safari. tidak di aplikasi layar utama.
Mei
1

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

aalcutt
sumber
1
saya punya ios 11.4 dan itu tidak akan berfungsi pada aplikasi layar awal. Apa yang kamu lakukan untuk membuatnya bekerja?
Aron
Saya tidak melakukan perubahan apa pun. Hanya memperbarui ke versi terbaru dan mulai berfungsi lagi.
aalcutt
1
diperiksa pada 11.4. karya di safari - tidak bekerja sebagai aplikasi home screen
Mei
Saya menggunakan iOS 11.4.1 di iPad dan berfungsi. Perangkat apa yang Anda gunakan?
aalcutt
1
Apa alasan Anda tidak dapat menggunakan input file? Itu bekerja lagi.
aalcutt
0

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!

Domotor Zsolt
sumber