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 e back without swiping out the app from open apps.

If press the home button and leave the app, and then e 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

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 e back without swiping out the app from open apps.

If press the home button and leave the app, and then e 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

• javascript
• html
• ios
• progressive-web-apps

• Same here : stackoverflow./questions/59254979/… – Graben Commented Dec 20, 2019 at 14:34
• 1 @Graben have you found a solution or an official reference to the bug? I'm the OP of the linked questions, we ended up having dynamic Manifest to use standalone mode on Android only, but this is very annoying from Apple. – elbuild Commented Jan 2, 2020 at 14:55
• @elbuild No solution yet on my side, We are just preventing IOS users on v13.2 and v13.3 from installing as PWA for now... they can use safari and it works properly. Have you reported that bug to apple ? – Graben Commented Jan 7, 2020 at 19:43
• If you find a solution pls provide an update. I'm facing a similar issue. – gvon79 Commented Mar 7, 2020 at 12:26

4 Answers 4

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

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!

Adding this meta tag to index.html, solved it for me!

Device: iPhone 7 and iPhone X, iOS 13.3.1

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

I had a similar issue. Check the application permission for access to camera at your phone's general settings.