IOS camera returns black screen after leaving pwa

Question

I'm using html file input to open camera and take photos for my 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
     }

After I download the pwa to my homescreen, camera works perfectly until I leave the app and come back without swiping out the app from open apps.

If press the home button and leave the app, and then come back, I get a black screen instead of camera footage like this:

After that I have to leave the app and swipe out my pwa from open apps and open the app again to make camera work again normally.

Camera works fine on android version of my pwa

Answer 1

This was caused by a bug in iOS 13.2 and 13.3.

You can find the bug report here

It has been resolved in iOS 13.4 and later. I can personally confirm I could reproduce this issue in 13.3, but not after updating to 13.5.1

Answer 2

Recently I faced the same problem, the only solution I came up with was to open in the app in browser instead of the standard mode. But only on iOS.

The trick was to create 2 manifest.json files with different configurations. The normal one and one for everything is Apple manifest-ios.json.

Step 1: Add id to the manifest link tag:

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

Step 2: Added this script to the bottom of the body:

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

Step 3: in the manifest-ios.json set the display to browser

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

Hope it helps you guys!