İOS11 ana ekran web uygulamasında kameraya nasıl erişilir?

özet

Kameraya bir iOS11 (genel sürüm) ana ekran web uygulamasından WebRTC veya aşağıdaki dosya girişini kullanarak erişemiyoruz, ayrıntılar. Kullanıcılarımız kameraya erişmeye nasıl devam edebilir?

Web uygulama sayfasını https üzerinden sunuyoruz.

Güncelleme, Nisan

İOS 11.3'ün genel sürümü sorunu çözmüş gibi görünüyor ve dosya giriş kamera erişimi tekrar çalışıyor!

Güncelleme, Mart

Buradaki insanlar, Apple belgelerinin web uygulaması kamera işlevinin servis çalışanları ile birlikte 11.3'te geri döndüğünü tavsiye ettiğini söylediler. Bu iyi ama henüz 11.3GM'de kapsamlı bir test yapana kadar herkesin yeniden yüklemesini isteyip istemediğimizden emin değiliz.

Çözüm, Kasım

Apple'ın bunu düzeltmek istediğine dair umudumuzu yitirdik ve ilerledik. Web uygulamamızı iOS "Ana ekrana ekle" işlevini kaldıracak şekilde değiştirdik ve etkilenen kullanıcılardan önceki ana ekran simgelerini kaldırmalarını istedi.

Güncelleme, 6 Aralık

iOS 11.2 ve iOS 11.1.2 düzeltilmiyor.

Geçici Çözümler, 21 Eylül

Görünüşe göre web uygulamasının mevcut müşterilerine sorabiliriz

• iOS11'e yükseltme yapmayın - bunda iyi şanslar :)
• iOS kamerada fotoğraf çekin ve ardından bunları web uygulamasında tekrar seçin
• sonraki ios beta için bekle
• Safari tarayıcı içi sayfası olarak yeniden yükleyin (ATHS mantığını kaldırdıktan sonra)
• Android'e geç

Dosya Girişi

Mevcut üretim kodumuz, iOS 10 ve daha eski sürümlerle yıllarca iyi çalışan bir dosya girişi kullanıyor. İOS11'de bir Safari sekmesi olarak çalışır ancak ana ekran uygulamasından değil. İkinci durumda, kamera açılır ve yalnızca siyah bir ekran gösterilir, bu nedenle kullanılamaz.

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

WebRTC

İOS11'deki Safari 11 , harika olan WebRTC ortam yakalama özelliği sunar .

Buraya bağlanan örnek koda göre navigator.mediaDevices.getUserMedia kullanarak masaüstünde ve mobil cihazda normal bir web sayfasında bir kamera görüntüsünü tuvale yakalayabiliriz .

Biz iPad veya iPhone ana ekranına sayfasını eklerken, navigator.mediaDevicesolur undefinedve kullanışsız.

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

Oldukça benzer bir sorunumuz var. Şimdiye kadar yapabildiğimiz tek çözüm, "apple-mobile-web-app-uyumlu" olması için meta etiketini kaldırmak ve kullanıcıların onu her şeyin normal çalıştığı Safari'de açmasına izin vermekti.

Güncelleme : Daha önce yayınlanan bazı değişiklik günlükleri ve gönderiler, a manifest.jsonyerine kullanan Web Uygulamalarının apple-mobile-web-app-capablenihayetinde uygun bir WebRTC uygulamasına erişebileceğine inanmamı sağlasa da, burada diğerlerinin de belirttiği ve testlerin onayladığı gibi maalesef bu doğru değil. Üzgün ​​surat. Bunun neden olduğu rahatsızlıklar için özür dileriz ve umarız çok uzaktaki bir galakside şanslı bir gün Apple nihayet (Safari olmayan) WebKit tarafından desteklenen görünümlerde bize kamera erişimi sağlar ...

Evet, diğerlerinin de belirttiği gibi, getUserMedia yalnızca doğrudan Safari'de mevcuttur, ancak ne UIWebView'da ne de WKWebView'da kullanılabilir, bu nedenle maalesef tek seçeneğiniz

• kaldırarak <meta name="apple-mobile-web-app-capable" content="yes">'uygulamanızın' getuserMedia'ya erişilebilen normal bir Safari sekmesinde çalışması
• Apache Cordova gibi bir cihazın kamerasına başka şekillerde erişmenizi sağlayan bir çerçeve kullanmak.

İşte Apple'ın bu WebRTC kısıtlamasını bir an önce kaldırmasını umuyoruz ...

Kaynak:
Uygulamalarında WebKit kullanan geliştiriciler için RTCPeerConnection ve RTCDataChannel herhangi bir web görünümünde mevcuttur, ancak kamera ve mikrofona erişim şu anda Safari ile sınırlıdır.

İyi haberler! Kameraya nihayet ilk iOS 11.3 beta sürümünde bir ana ekran web uygulamasından erişilebilir görünüyor.

Çalıştığını gösteren birkaç dosyayla bir depo yaptım:

https://github.com/joachimboggild/uploadtest

Test edilecek adımlar:

1. Bu dosyaları telefonunuzdan erişilebilen bir web sitesinden sunun
2. İndex.html dosyasını iOS Safari'de açın
3. Ana ekrana ekle
4. Ana ekrandan uygulamayı açın. Artık web sayfası, gezinme kullanıcı arabirimi olmadan tam ekran olarak açıldı.
5. Kameradan bir görüntü seçmek için dosya düğmesine basın.

Artık kamera normal çalışmalı ve siyah ekran olmamalıdır. Bu, işlevselliğin tekrar çalıştığını gösterir.

GetUserMedia veya başka bir şey değil düz bir alan kullandığımı eklemeliyim. Bunun işe yarayıp yaramadığını bilmiyorum.

Görünüşe göre "ios 13 beta 1" de çözüldü: https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Güncelleme 20/03/2020: https://twitter.com/firt/status/1241163092207243273?

Bir dosya giriş alanı kullanıyorsanız, bu iOS 11.4'te tekrar çalışıyor gibi görünüyor.

Son zamanlarda aynı sorunla karşılaştım, bulduğum tek çözüm, uygulamayı normal mod yerine tarayıcıda açmaktı. Ancak yalnızca iOS'ta!

İşin püf noktası, farklı konfigürasyonlara sahip 2 manifest.json dosyası oluşturmaktı.

Android için normal olanı ve her şey için olanı Apple, manifest-ios.json'dur, tek fark display özelliğinde olacaktır.

1. Adım: Manifest bağlantı etiketine kimlik ekleyin:

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

Adım 2: Bu komut dosyasını gövdenin altına ekledik:

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

Adım 3: in tezahür-ios.json tarayıcıya ekran ayarlamak

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

Bazen uygulamanın birden çok sekmede birden çok kez açılması gibi başka bir sorun ortaya çıkar.

Ama umarım size yardımcı olur!