title: How to access camera on iOS11 home screen web app?
body: <h3>Summary</h3> 
  
  <p>We cannot access camera from an iOS11 (public release) home screen web app using either WebRTC or the file input, details below. How can our users continue to access the camera please?</p>
  
  <p>We are serving the web app page over https.</p>
  
  <p><em><h3>Update, April</h3></em>
  The public release of iOS 11.3 seems to have fixed the issue and file input camera access is working again!</p>
  
  <p><em><h3>Update, March</h3></em></p>
  
  <p>As people here have said the Apple docs advise web app camera function is returning in 11.3 along with service workers.  This is good but we are not sure yet if we want to everyone to to reinstall again until we can thoroughly test on 11.3GM.  </p>
  
  <p><em><h3>Solution, November</h3></em>
  We lost hope Apple want to fix this and moved forward.  Modified our web app to remove the iOS "Add to home screen" function and asked affected users to remove any previous home screen icon.</p>
  
  <p><em><h3>Update, 6 December</h3></em></p>
  
  <p>iOS 11.2 and iOS 11.1.2 don't fix. </p>
  
  <p><em><h3>Workarounds, 21 September</h3></em></p>
  
  <p>Seems we could ask existing customers of the web app </p>
  
  <ul>
  <li>not upgrade to iOS11 - good luck with that :) </li>
  <li>take photos in iOS camera and then select them back in the web app</li> 
  <li>wait for next ios beta</li> 
  <li>reinstall as a Safari in-browser page (after we remove ATHS logic) </li>
  <li>switch to Android</li> 
  </ul>
  
  <h3>File Input</h3>
  
  <p>Our current production code uses a file input which has worked fine for years with iOS 10 and older. On iOS11 it works as a Safari tab but not from the home screen app. In the latter case the camera is opened and only a black screen is shown, hence it is unusable.</p>
  
  <pre><code>   &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
     ...
     &lt;input type="file" accept="image/*"&gt;
  </code></pre>
  
  <h3>WebRTC</h3>
  
  <p>Safari 11 on iOS11 offers <a href="https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Safari_11_0/Safari_11_0.html" rel="noreferrer">WebRTC media capture</a> which is great.  </p>
  
  <p>We can capture a camera image to canvas on a normal web page on desktop and mobile using navigator.mediaDevices.getUserMedia per <a href="https://webrtc.github.io/samples/src/content/getusermedia/canvas/" rel="noreferrer">the sample code linked here</a>.  </p>
  
  <p>When we add the page to iPad or iPhone home screen, <code>navigator.mediaDevices</code> becomes <code>undefined</code> and unusable. </p>
  
  <pre><code>    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      ...
      // for some reason safari on mac can debug ios safari page but not ios home screen web apps 
      var d = 'typeof navigator : ' + typeof navigator; //object
      d += 'typeof navigator.mediaDevices : ' + typeof navigator.mediaDevices; // undefined
      // try alternates
      d += 'typeof navigator.getUserMedia  : ' + typeof navigator.getUserMedia; // undefined
      d += 'typeof navigator.webkitGetUserMedia  : ' + typeof navigator.webkitGetUserMedia; // undefined
      status1.innerHTML = d;
  </code></pre>