Electron应用在树莓派3B+上运行时无法识别摄像头问题求助

以下是针对Electron应用在树莓派3B+上无法识别摄像头的可落地修复方案：

• 首先补充Electron媒体访问权限配置，你当前的主进程没有处理摄像头权限请求逻辑，也没有开启对应权限开关，需要做三处修改：
  1. 应用就绪时添加Linux摄像头兼容开关
  2. 监听session的权限请求事件，自动授予媒体设备权限
  3. 给BrowserWindow补充正确的webPreferences配置

修改后的主进程核心代码如下：

'use strict';
const path = require('path');
const { app, BrowserWindow, Menu, globalShortcut, session } = require('electron');
const unhandled = require('electron-unhandled');
const debug = require('electron-debug');
const {is} = require('electron-util');

unhandled();
debug();
// 注意原代码漏了contextMenu的引入，不需要可以直接删除该行

// 新增：Linux摄像头兼容开关
app.commandLine.appendSwitch('enable-features', 'V4L2CameraStack');
app.commandLine.appendSwitch('use-fake-ui-for-media-stream');

// Note: Must match `build.appId` in package.json
app.setAppUserModelId('com.pixzeldigital.attrfidqrcode');

// 新增：全局处理媒体权限请求
app.whenReady().then(() => {
  session.defaultSession.setPermissionRequestHandler((webContents, permission, callback) => {
    // 授予摄像头、音频等媒体权限
    if (['media', 'videoCapture', 'audioCapture'].includes(permission)) {
      return callback(true);
    }
    callback(false);
  });
});

// Prevent window from being garbage collected
let mainWindow;

const createMainWindow = async () => {
    const win = new BrowserWindow({
        title: app.name,
        show: false,
        width: 1024,
        height: 768,
        frame: false,
        // 新增：webPreferences配置，允许媒体访问
        webPreferences: {
          nodeIntegration: true,
          contextIsolation: false,
          webSecurity: false
        }
    });

    win.on('ready-to-show', () => {
        win.maximize();
        win.show();
    });

    win.on('closed', () => {
        mainWindow = undefined;
    });

    await win.loadFile(path.join(__dirname, 'vue/dist/index.html'));
    return win;
};

// 其余原有代码保持不变即可

• 确认运行应用的用户拥有摄像头访问权限：执行命令sudo usermod -aG video $USER，执行后重启树莓派生效。
• 补充Instascan设备枚举逻辑：在前端Vue代码中主动枚举所有视频设备，手动指定deviceId初始化Instascan，避免默认匹配失败：

// 前端代码示例
navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    const videoDevices = devices.filter(d => d.kind === 'videoinput');
    if (videoDevices.length > 0) {
      // 主动指定第一个摄像头设备初始化
      const scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      Instascan.Camera.getCameras().then(cameras => {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        }
      });
    }
  });

• 如果上述方案仍无效，可替换已停止维护的Instascan为兼容性更好的jsQR库，直接通过getUserMedia获取视频流解析二维码，适配性更强。

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