IOS camera returns black screen after leaving pwa


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:

Error

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


Answers:


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!