IOS相机离开pwa后返回黑屏

Question

我正在使用 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 下载到我的主屏幕后，相机可以完美运行，直到我离开应用程序并在没有从打开的应用程序中刷出应用程序的情况下返回。

如果按下主页按钮并离开应用程序，然后再回来，我会看到黑屏而不是像这样的相机镜头：

之后我必须离开应用程序并从打开的应用程序中刷出我的 pwa 并再次打开应用程序以使相机再次正常工作。

相机在我的 pwa 的 android 版本上运行良好

Answer 1

将此元标记添加到index.html，为我解决了这个问题！

设备：iPhone 7 和 iPhone X，iOS 13.3.1

<meta name="apple-mobile-web-app-capable" content="yes">