如何在Cordova中实现Affectiva SDK及解决摄像头检测失败问题

我之前在类似的Cordova + jQuery Mobile项目中也遇到过这个问题，核心原因是Affectiva的CameraDetector基于WebRTC API工作，而Cordova的原生环境需要正确配置权限、等待设备就绪，并且处理好WebRTC与原生权限的兼容。以下是一步步的解决方案：

1. 确保正确配置摄像头权限 #

Affectiva访问摄像头依赖系统权限，必须在config.xml中明确声明：

Android 配置 #

在config.xml中添加以下权限和特性声明：

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />

iOS 配置 #

添加相机权限描述（iOS 10+强制要求）：

<platform name="ios">
  <config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
    <string>需要访问摄像头以进行情感识别</string>
  </config-file>
</platform>

2. 等待Cordova deviceready事件后再初始化Affectiva #

Cordova的所有API和设备权限都需要等待deviceready事件触发后才能正常工作，Affectiva的初始化必须放在这个事件回调内，否则会出现权限未就绪的问题。

3. 处理Android运行时权限（Android 6.0+） #

Android 6.0及以上版本需要在运行时请求摄像头权限，仅在config.xml中声明是不够的。我们可以使用cordova-plugin-android-permissions插件来处理：

首先安装插件：

cordova plugin add cordova-plugin-android-permissions

然后在代码中请求权限后再初始化Affectiva：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  const permissions = cordova.plugins.permissions;
  
  // 检查是否已有摄像头权限
  permissions.checkPermission(permissions.CAMERA, status => {
    if (!status.hasPermission) {
      // 请求权限
      permissions.requestPermission(permissions.CAMERA, () => {
        initAffectivaDetector();
      }, error => {
        console.error("摄像头权限被拒绝：", error);
        alert("无法访问摄像头，请在设置中开启权限");
      });
    } else {
      // 已有权限，直接初始化
      initAffectivaDetector();
    }
  }, error => {
    console.error("检查权限失败：", error);
  });
}

function initAffectivaDetector() {
  // 确保页面上有用于渲染摄像头画面的容器
  const cameraContainer = document.getElementById('camera-container');
  const detector = new affdex.CameraDetector(cameraContainer);
  
  // 设置回调监听
  detector.addEventListener("onInitializeSuccess", () => {
    console.log("Detector初始化成功");
    detector.start();
  });
  
  detector.addEventListener("onCameraDenied", () => {
    console.error("摄像头访问被拒绝");
    alert("摄像头访问被拒绝，请检查权限设置");
  });
  
  detector.addEventListener("onInitializeFailure", () => {
    console.error("Detector初始化失败");
  });
  
  // 配置需要检测的情感和表情
  detector.detectAllEmotions();
  detector.detectAllExpressions();
  
  // 初始化检测器
  detector.initialize();
}

4. 配置内容安全策略（CSP） #

在index.html的<head>中添加正确的CSP，允许WebRTC访问摄像头：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-eval'; media-src 'self' camera:;">

5. 避免与Cordova Camera插件冲突 #

如果你不需要Cordova原生Camera插件的功能，建议移除它——因为Affectiva的CameraDetector使用WebRTC直接获取摄像头流，原生Camera插件可能会干扰WebRTC的权限获取：

cordova plugin remove cordova-plugin-camera

额外提示 #

• 确保Affectiva的JS SDK已正确引入到你的项目中，路径无误。
• iOS平台可以在config.xml中添加以下偏好设置，优化WebRTC兼容性：

<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />

按照这些步骤配置后，Affectiva的CameraDetector应该就能正常识别并访问设备摄像头了。

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