[解決済み] iOS11のホーム画面のWebアプリでカメラにアクセスするには？

12月6日更新

iOS 11.2 と iOS 11.1.2 では修正されません。

回避策、9 月 21 日

ウェブアプリの既存の顧客に尋ねることができるようです。

• iOS11 にアップグレードしないでください - 頑張ってください :)
• iOS のカメラで写真を撮って、ウェブアプリでそれを選択する。
• 次の ios ベータを待つ
• Safari のインブラウザ ページとして再インストールします (ATHS のロジックを削除した後)。
• Android に切り替える

ファイル入力

私たちの現在のプロダクション コードでは、iOS 10 およびそれ以前のバージョンで何年も問題なく動作していたファイル入力を使用しています。iOS11 では、Safari タブとして動作しますが、ホーム画面アプリからは動作しません。後者の場合、カメラが開かれ、黒い画面だけが表示され、それゆえ使用できません。

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

WebRTC

iOS11 の Safari 11 では WebRTC メディア キャプチャ というのがあって、これは素晴らしい。

デスクトップとモバイルの通常のWebページで、navigator.mediaDevices.getUserMediaあたりを使ってカメラ画像をcanvasにキャプチャーすることができるのです。 サンプルコードはこちら .

iPadやiPhoneのホーム画面にページを追加する場合。 navigator.mediaDevices は undefined になり、使えなくなります。

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

どのように解決するのですか？

私たちもよく似た問題を抱えています。今のところ、私たちができた唯一の回避策は、Apple-mobile-web-app-capable" であるための meta タグを削除して、ユーザーが Safari でそれを開けるようにすることです。