web-dev-qa-db-ja.com

iOS11ホーム画面のWebアプリでカメラにアクセスするにはどうすればいいですか？

概要

以下の詳細では、WebRTCまたはファイル入力を使用してiOS11（パブリックリリース）ホームスクリーンWebアプリからカメラにアクセスすることはできません。ユーザーはどうやってカメラにアクセスし続けることができますか？

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

更新、4月

更新、3月

ここの人々が言っ​​たようにAppleの文書はウェブアプリのカメラ機能がサービスワーカーと一緒に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以上で長年うまく機能してきたファイル入力を使用します。 iOS 11では、Safariタブとして機能しますが、ホームスクリーンアプリからは機能しません。後者の場合、カメラは開かれ、黒い画面しか表示されないので使用できません。

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

WebRTC

IOS11上のSafari 11は素晴らしい WebRTCメディアキャプチャ を提供します。

デスクトップとモバイルの通常の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;
javascripthtml5camerawebrtcios11
105
ajayel

私達は全く同じような問題を抱えています。これまでのところ、私たちができる唯一の回避策は、それが "Apple-mobile-web-app-enabled"になるようにメタタグを削除し、ユーザーがSafariで開くことができるようにすることです。

20
Tomas Vitasek

更新：以前に公開されたいくつかの変更履歴と投稿により、manifest.jsonの代わりにApple-mobile-web-app-capableを使用するWebアプリがついに適切なWebRTC実装にアクセスできるようになりました。他の人がここで指摘し、テストが確認したように。悲しい顔。これによって引き起こされた不便のためにすみません、そしてはるか遠く離れた銀河でのある幸運な日がついに私たちに（非Safariの）WebKitによって供給されるビューでカメラアクセスを与えることを願いましょう...

はい、他の人が言ったように、getUserMediaはSafariで直接利用できるだけでUIWebViewでもWKWebViewでも利用できないので、残念ながらあなたの唯一の選択肢は

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

AppleがこのWebRTC制限をやや早く解除することを願っています...

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

21
StateOfTheArtJonas

良い知らせです。カメラはようやく最初のiOS 11.3ベータ版のホームスクリーンウェブアプリからアクセス可能になるようだ。

いくつかのファイルでリポジトリを作成しました。

https://github.com/joachimboggild/uploadtest

テストする手順

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

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

私は、getUserMediaやsomesuchではなく、単純なフィールドを使用していることを付け加えなければなりません。それがうまくいくかどうか私は知りません。

14
Joachim Bøggild

どうやら "IOS 13 Beta 1"で解決されています。 https://Twitter.com/ChromiumDev/status/1136541745158791168?s=09

2
jvitor83

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

0
aalcutt