iOS15下IONIC5应用getUserMedia失效，无法创建com.apple.tccd沙箱扩展

根本原因 #

日志中出现的Could not create a 'com.apple.tccd' sandbox extension是iOS15 WebKit的已知兼容性问题，当页面运行在capacitor://这类自定义URL scheme下时，即使授予了媒体权限，WebView也无法正常获取系统媒体服务的沙箱访问权限，导致视频流无法渲染，不需要修改基础URL即可修复。

解决方案 #

1. 调整Capacitor全局配置 #

修改项目根目录下的capacitor.config.ts配置文件，添加iOS WebView媒体播放相关配置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '你的应用包名',
  appName: '你的应用名称',
  webDir: 'www',
  server: {
    iosScheme: "capacitor"
  },
  ios: {
    // 允许媒体在内嵌WebView中播放，不强制跳转到系统播放器
    allowsInlineMediaPlayback: true,
    // 取消媒体播放需要用户手势触发的限制
    mediaPlaybackRequiresUserAction: false
  }
};

export default config;

修改完成后执行npx cap sync ios同步配置到原生项目。

2. 修正Video标签属性 #

iOS15对video标签属性要求严格，必须包含以下属性才能正常渲染媒体流：

<video 
  id="local-video"
  playsinline
  webkit-playsinline
  autoplay
  muted
  style="width: 100%; height: auto;"
></video>

注意：playsinline和webkit-playsinline必须同时配置，即使不需要音频输出也必须添加muted属性，否则视频流会被系统拦截无法渲染

3. 调整getUserMedia调用逻辑 #

iOS15禁止非用户交互场景下调用媒体权限，必须在点击、触摸等用户事件回调中触发摄像头初始化，同时显式调用play方法：

// 示例：绑定按钮点击事件触发摄像头启动
document.getElementById('start-camera-btn').addEventListener('click', async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        facingMode: 'user',
        width: { ideal: 1280 },
        height: { ideal: 720 }
      },
      audio: true
    });
    const videoEl = document.getElementById('local-video');
    videoEl.srcObject = stream;
    // 显式调用play方法，不依赖autoplay属性
    await videoEl.play();
  } catch (e) {
    console.error('摄像头启动失败', e);
  }
});

4. 检查iOS原生项目配置 #

打开Xcode中的iOS原生项目，确认以下配置正确：

• 进入Signing & Capabilities标签页，确认已添加Camera和Microphone两个权限项
• 进入Info标签页，确认NSCameraUsageDescription和NSMicrophoneUsageDescription两个权限描述字段已配置，且描述内容非空

5. 版本适配修复 #

如果当前使用的Capacitor版本低于3.4.0，直接升级到3.x最新稳定版，该版本已修复自定义scheme下WebRTC媒体权限的沙箱适配问题。

内容的提问来源于stack exchange，提问作者Balázs Kis