iPhone 15上MindAR.js+AR.js无标记WebAR项目摄像头异常求助

问题概述 #

在 iPhone 15 上开发基于 MindAR 和 A-Frame 的无标记图像追踪 WebAR 项目时，摄像头无法正常启动：

• 已完成摄像头、设备运动传感器、移动校准的权限授权
• 项目显示绿色运行图标，但始终停留在空白屏幕，无法切换到摄像头画面
  已开启 Safari 设置-高级-功能标志中 WebRTC、WebGL、WebGPU 等所有相关选项，需排查问题根源并解决。

代码片段 #

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR Objekterkennung</title>

    <!-- MindAR 库 -->
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.1/dist/mindar-image-aframe.prod.js"></script>
    
    <!-- A-Frame -->
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

    <style>
        body { margin: 0; overflow: hidden; }
        #startButton {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px 30px;
            font-size: 18px;
            background: #007bff; color: white;
            border: none; border-radius: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="startButton">Start AR</button>

    <a-scene mindar-image="imageTargetSrc: https://oldNovize.github.io/targets.mind; 
                           uiLoading: no; uiError: no; uiScanning: no;"
             embedded
             color-space="sRGB"
             vr-mode-ui="enabled: false"
             device-orientation-permission-ui="enabled: true">
        
        <!-- 识别目标后显示AR文本 -->
        <a-entity mindar-image-target="targetIndex: 0">
            <a-text value="Check it out!" color="red" align="center" width="2" position="0 0.3 0"></a-text>
        </a-entity>

        <a-camera position="0 0 0"></a-camera>
    </a-scene>

    <script>
        // 启动按钮逻辑
        document.getElementById("startButton").addEventListener("click", async () => {
            // 请求摄像头权限
            try {
                await navigator.mediaDevices.getUserMedia({ video: true });
                document.querySelector("a-scene").style.display = "block";
                document.getElementById("startButton").style.display = "none";
            } catch (err) {
                alert("Fehler: Kamera-Zugriff verweigert!");
            }
        });
    </script>
</body>
</html>

排查与解决步骤 #

1. 修复代码权限冲突问题 #

MindAR 内置了完整的权限请求和场景初始化流程，手动调用 navigator.mediaDevices.getUserMedia 会与 MindAR 的内部逻辑冲突，导致 iOS Safari 中摄像头资源被锁定。

修改方案：
移除手动权限请求，改用 MindAR 内置启动方法，同时默认隐藏场景：

<!-- 更新样式，默认隐藏场景 -->
<style>
    body { margin: 0; overflow: hidden; }
    #startButton {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        padding: 15px 30px;
        font-size: 18px;
        background: #007bff; color: white;
        border: none; border-radius: 10px;
        cursor: pointer;
    }
    a-scene { display: none; }
</style>

<!-- 更新启动脚本 -->
<script>
    document.getElementById("startButton").addEventListener("click", async () => {
        const scene = document.querySelector("a-scene");
        document.getElementById("startButton").style.display = "none";
        scene.style.display = "block";
        // 触发MindAR初始化流程
        await scene.components["mindar-image"].start();
    });
</script>

2. 检查 iOS Safari 环境限制 #

• HTTPS 强制要求：iOS Safari 仅允许 HTTPS 环境下使用 WebAR（localhost 开发环境除外），如果项目部署在 HTTP 服务器上，摄像头权限会被静默拒绝。
• 跨域资源问题：确认 targets.mind 文件所在服务器配置了 CORS 规则，允许你的项目域名访问该资源，否则 MindAR 无法加载目标文件，导致场景停滞。

3. 设备与浏览器设置优化 #

• 系统版本要求：MindAR 1.1.1 对 iOS 16+ 兼容性更好，若你的 iPhone 系统版本低于 iOS 16，建议升级系统。
• 重置 Safari 缓存：进入「设置 > Safari 浏览器 > 清除历史记录与网站数据」，清除缓存后重新测试，避免旧权限缓存干扰。
• 硬件检查：打开系统相机确认摄像头正常工作，排除硬件故障。

4. MindAR 配置与版本优化 #

• 启用内置 UI 提示：暂时将 mindar-image 属性中的 uiLoading: yes; uiError: yes; uiScanning: yes;，通过内置提示查看是否存在加载错误或扫描状态异常，快速定位问题。
• 升级 MindAR 版本：当前使用的 1.1.1 版本较旧，建议升级到最新稳定版（如 1.2.5），该版本修复了多个 iOS 平台的兼容性问题。

内容的提问来源于stack exchange，提问作者user29547247