iOS11のホーム画面Webアプリでカメラにアクセスする方法

概要

詳細については、WebRTCまたはファイル入力のいずれかを使用して、iOS11（公開リリース）ホーム画面Webアプリからカメラにアクセスすることはできません。ユーザーがカメラに引き続きアクセスするにはどうすればよいですか？

https経由でWebアプリページを提供しています。

更新、4月

3月の更新

ここの人々が言っ​​たように、アップルのドキュメントはWebアプリのカメラ機能がサービスワーカーと一緒に11.3に戻ることを助言しています。これは良いことですが、11.3GMで完全にテストできるようになるまで、全員に再インストールしてほしいかどうかはまだわかりません。

ソリューション、11月

12月6日更新

iOS 11.2およびiOS 11.1.2は修正されません。

回避策、9月21日

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

• iOS11にアップグレードしない-幸運を祈る:)
• iOSカメラで写真を撮り、Webアプリでそれらを選択します
• 次の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メディアキャプチャを提供します。

ここにリンクされているサンプルコードに従ってnavigator.mediaDevices.getUserMediaを使用して、デスクトップとモバイルの通常のWebページでキャンバスにカメラ画像をキャプチャできます。

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」にして、ユーザーがSafariでそれを開くようにすることです。

更新：以前に公開された変更ログと投稿によって、のmanifest.json代わりにを使用するWebアプリapple-mobile-web-app-capableが最終的に適切なWebRTC実装にアクセスできると信じるようになりましたが、残念ながらこれは真実ではありません。悲しい顔。これによって引き起こされた不便をお詫びします。遠く離れた銀河での幸運な日が、Appleが（Safari以外の）WebKitを利用したビューでカメラにアクセスできるようになることを願っています...

はい、他の人が述べたように、getUserMediaはSafariでのみ直接利用できますが、UIWebViewでもWKWebViewでも利用できないため、残念ながら選択肢は次のとおりです。

• <meta name="apple-mobile-web-app-capable" content="yes">getuserMediaにアクセスできる通常のSafariタブで「アプリ」が実行されるように削除する
• Apache Cordovaのようなフレームワークを使用して、他の方法でデバイスのカメラへのアクセスを許可します。

AppleがこのWebRTCの制限を削除するのが遅くなることを望んでいます...

ソース：
アプリでWebKitを使用する開発者の場合、RTCPeerConnectionとRTCDataChannelはどのWebビューでも使用できますが、カメラとマイクへのアクセスは現在Safariに制限されています。

朗報！ついにカメラは、最初のiOS 11.3ベータ版のホームスクリーンWebアプリからアクセスできるようです。

私はそれが機能することを示すいくつかのファイルでリポジトリを作成しました：

https://github.com/joachimboggild/uploadtest

テストする手順：

1. 携帯電話からアクセスできるWebサイトからこれらのファイルを提供する
2. iOS Safariでindex.htmlを開きます
3. ホーム画面に追加します
4. ホーム画面からアプリを開きます。これで、WebページはナビゲーションUIなしでフルスクリーンで開きます。
5. ファイルボタンを押して、カメラから画像を選択します。

これでカメラは正常に動作し、黒い画面ではなくなります。これは、機能が再び機能することを示しています。

getUserMediaなどではなく、プレーンフィールドを使用することを追加する必要があります。それがうまくいくかどうかはわかりません。

どうやら "ios 13 beta 1"で解決されています：https ://twitter.com/ChromiumDev/status/1136541745158791168?s=09

2020年3月20日更新：https ://twitter.com/firt/status/1241163092207243273?s=19

これは、ファイル入力フィールドを使用している場合、iOS 11.4で再び機能するようです。

最近同じ問題に直面しましたが、私が思いついた唯一の解決策は、通常モードではなくブラウザーでアプリを開くことでした。しかし、iOSでのみ！

トリックは、異なる構成で2つのmanifest.jsonファイルを作成することでした。

Androidとすべての通常の1つは、Appleのmanifest-ios.jsonです。違いは、displayプロパティのみです。

手順1：マニフェストリンクタグにIDを追加します。

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

手順2：このスクリプトを本文の下部に追加しました：

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

ステップ3：でマニフェスト-ios.jsonブラウザに表示を設定します

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

複数のタブでアプリを複数回開くなど、別の問題が発生する場合があります。

しかし、それが皆さんのお役に立てば幸いです！