I am currently working on a Next.js app:
I have implemented the functionality for it to open WebXR on Android Chrome when clicking on the AR button located at the bottom left ("in AR betrachten"). However, instead of opening WebXR, it redirects to the Android Scene Viewer.
The source of the iframe is . Interestingly, when I directly visit in my browser, WebXR opens successfully.
https://i.stack.imgur.com/wiZjI.jpg
The setup involves a standard next.js app. The configuration in next.config.js is as follows:
module.exports = {
async headers() {
return [
{
source: "/",
headers: [
{
key: "Permissions-Policy",
value: "xr-spatial-tracking=()"
}
]
}
];
}
};
The code in index.tsx is as below:
import React from "react";
import { render } from "react-dom";
import "./style.css";
const App = () => (
<div>
<div id="ar-layout">
<iframe
src="https://polygoningenieur.dev"
id="ar-showcase"
title="AR-App Example"
width="800"
height="600"
allow="xr-spatial-tracking"
allowFullScreen
></iframe>
</div>
</div>
);
render(<App />, document.getElementById("root"));
Despite all configurations and settings, I am unable to get the WebXR to work as expected. The site hosting the AR app is secure with HTTPS, the iframe has been granted permission with allow="xr-spatial-tracking", and the permission policy header in next.config.js explicitly allows xr-spatial-tracking.
(Additional info: Using Chrome on an Android device, the AR-App is created using model viewer technology and consists of static HTML and JavaScript)
What could be causing this issue? Any insights would be greatly appreciated! :)