CODEWITHSUNDEEP
javascriptioshtmlmobile-safariprogressive-web-apps
gaugau
gaugau

Reputation: 896

Why does upload image via camera work on mobile-safari but not as iOS PWA?

I have a webpage with PWA capabilities.

On iOS safari I do get the usual OS dialog asking me if I want to take a photo or upload a picture from the photo library:

enter image description here

After "installing" it as an PWA via the menu "Add to Homescreen" button and starting it via homescreen, I still get the same options, "choose from library" still works, but when choosing "take a photo", the iOS camera app opens, as expected, but stays completely black.

html:

<head>

  <meta charset="utf-8">
  <title>dingsda user interface 2</title>

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="manifest" href="manifest.json">

  (...)

  <label class="fileContainer ui-btn">
    <input type="file" accept="image/jpeg" id="photo_upload" multiple data-role="none"/>
   </label>

only javascript connected:

document.getElementById("photo_upload").addEventListener("change",
function(){
  console.log("got pic, will resize now:");
  resizeBase64image(document.getElementById("photo_upload"),
  function(base64img){
    console.log("resized pic. will add it to src");
    document.getElementById("addPhoto").src = base64img;
  });
});

I have no ideas, nor did I find any clues about limitations. Also: it seems like it should not prompt the dialog nor the photo app anyhow. I am happy for any suggestions. either to fix it with HTML file-input or (if possible) alternatives.

Upvotes: 5

Views: 10447

Answers (3)

brudek
brudek

Reputation: 181

Add capture (camera, camcorder or filesystem) to input file

<label class="fileContainer ui-btn"> <input type="file" accept="image/jpeg" id="photo_upload" multiple data- role="none" capture="camera"/> </label>

Upvotes: 0

Thx08
Thx08

Reputation: 1

Actually when i try to record video

enter image description here

Upvotes: 0

gaugau
gaugau

Reputation: 896

It did not work till iOS 11.3 but all Versions from 11.3 upwards might be okay:

More Details to that can be also found here: How to access camera on iOS11 home screen web app?

I could test with different devices with iOS Versions 11.4+ and confirm: works on those. Not tested with 12 and above though.

Upvotes: 1

Related Questions