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:

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

来源：https://stackoverflow.com/questions/59422838/ios-camera-returns-black-screen-after-leaving-pwa