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

最近我遇到了同样的问题，我想到的唯一解决方案是在浏览器中的应用程序中打开而不是标准模式。但仅在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", // <----
    ...
}

希望对您有帮助！

Answer 2

这是由iOS 13.2和13.3中的错误引起的。

You can find the bug report here

它已在iOS 13.4和更高版本中解决。我可以亲自确认是否可以在13.3中重现此问题，但在更新至13.5.1之后不能。

Answer 3

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

设备： iPhone 7和iPhone X， iOS 13.3.1

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

Answer 4

我遇到了类似的问题。在手机的常规设置中检查应用程序权限以访问相机。