Ionic4 Android/iOS端InAppBrowser启用WebRTC相机访问问题

我来帮你搞定这个困扰你的相机权限问题，这在Ionic v4结合InAppBrowser的场景里确实是个容易踩的配置坑，咱们一步步来调整：

核心问题分析 #

你已经给App本身申请了相机权限，但InAppBrowser加载的外部网页没法通过navigator.mediaDevices.getUserMedia调用相机——这是因为Cordova的WebView默认会限制这类跨域权限请求，而且Android和iOS各自有不同的权限管控逻辑，得分别针对性配置。

Android端具体调整步骤 #

1. 升级WebView插件版本 #

你当前用的cordova-plugin-ionic-webview@^3.0.0对现代媒体API的支持有限，建议升级到最新稳定版（比如5.x及以上）：

ionic cordova plugin rm cordova-plugin-ionic-webview
ionic cordova plugin add cordova-plugin-ionic-webview@latest

2. 修改config.xml的Android配置 #

在Android平台节点里补充WebView权限和域名白名单配置，同时修正之前的权限声明：

<platform name="android">
  <!-- 保留你现有图标、闪屏等配置，新增以下内容 -->
  <allow-navigation href="https://supermercadocomunal.com/*" />
  <preference name="AndroidInAppBrowserWebView" value="true" />
  <preference name="AllowInlineMediaPlayback" value="true" />
  <preference name="MediaPlaybackRequiresUserAction" value="false" />

  <!-- 替换你之前的custom-config-file内容 -->
  <custom-config-file parent="/manifest" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-feature android:name="android.hardware.camera" android:required="true" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
  </custom-config-file>
</platform>

3. 调整代码的权限请求时机 #

你现在的代码里，打开InAppBrowser的操作没有等权限请求完成就执行了，得把它放到权限获取成功的回调里：

// home.page.ts 构造函数调整
constructor(private platform: Platform, private androidPermissions: AndroidPermissions, private iab: InAppBrowser) {
  if (this.platform.is('cordova')) {
    this.platform.ready().then(async () => {
      // 先检查并请求相机权限
      const cameraPermStatus = await this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA);
      if (!cameraPermStatus.hasPermission) {
        const requestResult = await this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA);
        if (!requestResult.hasPermission) {
          console.log("用户拒绝了相机权限，无法使用扫码功能");
          return;
        }
      }
      // 权限确认后再打开网页
      this.iab.create('https://supermercadocomunal.com/tienda/', '_self', {
        location: 'no',
        clearcache: 'yes',
        zoom: 'no',
        mediaPlaybackRequiresUserAction: 'no'
      });
    });
  }
}

iOS端具体调整步骤 #

iOS的权限管控更严格，需要补充以下配置：

1. 添加权限提示文本到config.xml #

iOS强制要求所有隐私权限都要有明确的提示说明：

<platform name="ios">
  <allow-navigation href="https://supermercadocomunal.com/*" />
  <preference name="AllowInlineMediaPlayback" value="true" />
  <preference name="MediaPlaybackRequiresUserAction" value="false" />
  
  <!-- 添加相机和麦克风权限提示 -->
  <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
    <string>需要访问相机完成扫码操作</string>
  </config-file>
  <config-file parent="NSMicrophoneUsageDescription" platform="ios" target="*-Info.plist">
    <string>部分扫码场景需要访问麦克风</string>
  </config-file>
</platform>

2. 强制使用WKWebView #

确保InAppBrowser使用iOS的WKWebView（性能和API兼容性更好），在config.xml根节点添加：

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

额外注意事项 #

• 必须使用HTTPS：navigator.mediaDevices.getUserMedia只支持HTTPS环境，你的网站已经满足，这点没问题，但要确保SSL证书有效；
• QuaggaJS配置优化：建议调整QuaggaJS的初始化配置，让它自动适配设备相机：

// 你的网站中QuaggaJS初始化代码
Quagga.init({
  inputStream: {
    type: "LiveStream",
    constraints: {
      width: 640,
      height: 480,
      facingMode: "environment" // 优先使用后置摄像头
    }
  },
  decoder: {
    readers: ["ean_reader"] // 根据你的业务需求调整扫码类型
  }
}, function(err) {
  if (err) {
    console.error("QuaggaJS初始化失败:", err);
    return;
  }
  Quagga.start();
});

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