6

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

failedCoder
  • 1,346
  • 1
  • 14
  • 38
  • Same here : https://stackoverflow.com/questions/59254979/ios-standalone-pwa-input-capture – Graben Dec 20 '19 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 Jan 02 '20 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 Jan 07 '20 at 19:43
  • If you find a solution pls provide an update. I'm facing a similar issue. – gvon79 Mar 07 '20 at 12:26

4 Answers4

2

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

Timo
  • 233
  • 1
  • 11
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!

Domotor Zsolt
  • 586
  • 5
  • 10
0

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">
Ehsan Amiri
  • 91
  • 2
  • 5
  • 1
    I already have this tag in my header file, unfortunately it's not working for me – failedCoder Mar 03 '20 at 13:02
  • I think that it works for you because you have an older iOS version, if you updated to the latest version, it would probably stop working for you as well – failedCoder Mar 03 '20 at 13:03
0

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

Deniz Yalçın
  • 3
  • 1