web-dev-qa-db-ja.com

IOSカメラはpwaを終了した後に黒い画面を返します

Htmlファイル入力を使用してカメラを開き、PWAの写真を撮っています。

<input type="file" accept="image/*" capture="camera" name="photo" id="photo-input-js" data-project-id="<?php echo $projectId ?>">

// this element triggers the input 
<li class="menu-item <?php echo $current_page == 'camera' ? 'is-active' : '' ?>" id="camera-tab">
   <a href="<?php echo site_url("photos/openCamera/". $projectId) ?>" id="open-camera-js">
            <div class="icon icon-camera"></div>
    <span class="d-none d-md-block ">Camera</span>
   </a>
</li>

JavaScript：

// open camera
$(document).on('click', '#open-camera-js', function(e) {
  e.preventDefault();

  $(".menu-item").removeClass('is-active');
  $("#camera-tab").addClass('is-active');

  // check support for geolocation/ask for permissions
  if (!navigator.geolocation) {
      throw new Error('Unsupproted device');
   }

  // open the file input
  $("#photo-input-js").click();
});

// save image
$(document).on('change', '#photo-input-js', function(e) {
     e.preventDefault();
     let photo = $(this).prop('files')[0] ? $(this).prop('files')[0] : false;
     if (photo) {
        // handle captured photo
     }

PWAをホーム画面にダウンロードした後、アプリを終了して、開いているアプリからアプリをスワイプしないで戻るまで、カメラは完全に機能します。

ホームボタンを押してアプリを終了してから戻ってくると、次のようなカメラ映像ではなく黒い画面が表示されます。

Error

その後、アプリを終了し、開いているアプリからPWAをスワイプして、もう一度アプリを開いて、カメラを正常に機能させる必要があります。

カメラはAndroid my pwaのバージョンで正常に動作します

javascripthtmliosprogressive-web-apps
6
failedCoder

これは、iOS 13.2および13.3のバグが原因でした。

ここにバグレポートがあります

IOS 13.4以降では解決されています。私は13.3でこの問題を再現できることを個人的に確認できますが、13.5.1に更新した後は確認できません

1
Timo

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

トリックは、異なる構成で2つのmanifest.jsonファイルを作成することでした。通常のものとすべてのものはApple manifest-ios.jsonです。

ステップ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：manifest-ios.jsonで表示をブラウザに設定

{
    "name": "APP",
    "short_name": "app",
    "theme_color": "#0F0",
    "display": "browser", // <----
    ...
}

皆さんのお役に立てば幸いです。

1
Domotor Zsolt

このメタタグをindex.htmlに追加して、解決しました！

デバイス：iPhone 7およびiPhone X、iOS 13.3.1

<meta name="Apple-mobile-web-app-capable" content="yes">
0
Ehsan Amiri