ZapAR camera not working on iframe iOS

Hello, I have a face detection application created with Zappar. I’m using it in an iframe inside a react project with NextJs.
The problem is that on iOS devices (iPhone and Mac) it does not allow me to access the camera and it stays bugged in the first image of this post. Android and Pc (windows) works perfect.
This is the example of my iframe

        width={width <= 768 ? "100%" : "50%"}
        allow="microphone *; camera *; midi *; encrypted-media *"
        style={{ margin: "1em" }}

Please, if anyone has any ideas on how to fix this, I’d really appreciate it.

My guess is that, for security reasons, iOS devices will not let you access the camera unless the user gives you consent. It’s something it also affects PCs and Androids, so not sure why you don’t have an issue there.

What we do is to first check if we have access to the camera (maybe the user already gave you permission before and you just needed to ask once). If not, pop up a permission request window. If yes, go with your normal flow.

1 Like

Since it’s an iframe, there’s probably some permissions thing where it can’t be requested from a child frame?

Zap AR team may have a better idea as they’ve probably come across this before but could be something like this: javascript - Cross domain iframe mic permissions changed in Safari 12.1? - Stack Overflow

1 Like

Thanks to both of you for your comments.
Perhaps it is something specific to the iframe and JS because it shows the permission request window, but it does not detect the permissions granted even when on an iphone I allow access to camera in safari chrome from system settings.

Thank you @yaustar, I will check what you posted, and finally, if it is still not solved, I will check with Zap AR support.

1 Like