Electron应用getUserMedia权限异常与摄像头启动DOMException问题

针对你遇到的DOMException: Could not start video source错误，核心原因是打包后的Electron应用未正确配置摄像头权限声明，结合你的场景，以下是分步解决方法：

1. 配置macOS权限授权文件（Entitlements） #

当启用Hardened Runtime时，macOS要求应用明确声明访问隐私敏感数据的权限。你需要创建权限配置文件并在打包时指定：

步骤1：创建entitlements.plist文件 #

在项目根目录新建该文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <!-- 摄像头权限 -->
  <key>com.apple.security.device.camera</key>
  <true/>
  <!-- 若需麦克风权限可添加 -->
  <!-- <key>com.apple.security.device.microphone</key>
  <true/> -->
  <!-- Electron运行必需的Hardened Runtime权限 -->
  <key>com.apple.security.cs.allow-jit</key>
  <true/>
  <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
  <true/>
</dict>
</plist>

步骤2：在electron-builder配置中关联该文件 #

修改项目的package.json，在build字段中添加macOS相关配置：

"build": {
  "mac": {
    "hardenedRuntime": true,
    "entitlements": "entitlements.plist",
    "entitlementsInherit": "entitlements.plist",
    "arch": ["arm64", "x64"] // 同时支持Apple Silicon和x64架构
  }
}

2. 添加权限使用说明（Info.plist） #

macOS要求应用必须向用户说明权限用途，否则不会弹出权限请求窗口。在package.json的build.mac中补充：

"build": {
  "mac": {
    "infoPlist": {
      "NSCameraUsageDescription": "需要访问摄像头以获取实时视频流",
      "NSMicrophoneUsageDescription": "需要访问麦克风（可选）"
    }
  }
}

3. 修复代码中的权限逻辑问题 #

你的代码中权限查询和getUserMedia是并行执行的，可能导致权限状态误判。调整为等待权限查询结果后再初始化摄像头：

let enableCam = function () {
  navigator.permissions.query({name: 'camera'})
  .then((permissionObj) => {
    console.log(permissionObj.state);
    switch(permissionObj.state) {
      case 'granted':
        initCamera();
        break;
      case 'prompt':
        // 触发系统权限弹窗
        initCamera();
        break;
      case 'denied':
        alert("摄像头权限已被拒绝，请前往「系统设置>安全性与隐私>摄像头」开启权限");
        break;
    }
  });

  function initCamera() {
    if (!hasGetUserMedia()) {
      console.warn('getUserMedia() is not supported');
      enableCamButton.textContent = "Get User Media Not Supported";
      return;
    }

    if(videoPlaying) {
      disableCam();
      return;
    }

    const constraints = {
      video: { width: 224, height: 224 },
      audio: false // 若不需要麦克风则禁用
    };
    
    navigator.mediaDevices.getUserMedia(constraints).then(stream => {
      video.srcObject = stream;
      webCamStream = stream;
      console.log("found stream");
      video.addEventListener('loadeddata', function () {
        videoPlaying = true;
        enableCamButton.textContent = "Disable Webcam";
        captureImageButton.classList.remove("disabled");
      });
    }, err => {
      console.error(err);
      if (err.name === 'NotAllowedError') {
        alert("无法访问摄像头，请检查权限设置");
      }
    });
  }
}

4. 处理架构兼容性问题 #

你提到x64版本通过Rosetta运行异常，建议直接打包Universal版本（同时包含arm64和x64架构），这样M1 Mac会自动使用原生arm64架构运行，避免Rosetta的兼容性问题。配置见步骤2中的arch字段。

验证打包结果 #

打包完成后，右键应用→显示包内容→Contents→Info.plist，确认NSCameraUsageDescription和权限相关字段已正确写入；同时检查Contents/Resources下是否包含你的权限配置文件。

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