iOS Requesting Camera Access after Already Granted

🧑‍💻 Technical Support
, ,
1

Hello, We noticed yesterday our app started showing a page saying:

“RELOAD THE PAGE AND ENABLE CAMERA ACCESS
Ensure camera access is allowed in Google Chrome app settings”

Even after giving camera permissions and verifying camera access is allowed in settings.

The error is inconsistent and pops up maybe 70% of the time and will not go away. Occasionally restarting the phone or going through the screen multiple times eventually it will work.

Only seen on iOS devices running iOS 17.5.1 (but tested on about 4 devices with the same results).

React
aframe:1.4.1
8thwall.xrextras
8thwall.landing-page
aframe-extras-7.2.0.min.js

Thanks,
Matt

1 Like
2

Would you mind sharing your code? Hard to say what it is from the video alone.

3

Hi George, Thanks for reaching out. We are consistently getting this Warning when this message pops up:
Screenshot 2024-07-23 161153

The repo is on 8th Wall and I’m more than happy to add you to it if you think you’d be able to take a look. We would really appreciate it as we’re trying to launch this week.

Matt

4

So is there any fix for this? I have this three.js image target application that works super fine on android, but all iOS devices are asking camera permission repeatedly and after finally showing the ar features it crashes the page.

<meta name="8thwall:renderer" content="threejs:123">

<meta name="8thwall:package" content="@8thwall.xrextras">

<meta name="8thwall:package" content="@8thwall.landing-page">

<!-- Other external scripts and meta tags can also be added. -->

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

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

<script src="//cdn.rawgit.com/mrdoob/three.js/r123/examples/js/loaders/GLTFLoader.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>

this is the head, and otherwise the application is pretty basic from the three.js flyer project with just some custom html and javascript logic.

5

Alright, I’m going to reply myself as I found a solution. I want to provide here if someone else finds their way here from iOS problems with three.js and 8thwall. So adding this in app.js solved the camera permission issue and crashing:

// Check if running on iOS and apply fixes if needed
const IS_IOS = /^(iPad|iPhone|iPod)/.test(window.navigator.platform) ||
               (/^Mac/.test(window.navigator.platform) && window.navigator.maxTouchPoints > 1)
if (IS_IOS) {
  window.createImageBitmap = undefined  // Disable createImageBitmap on iOS to avoid crashes
}