electron+react 多个摄像头，选择其中一个为该应用默认摄像头；

Question

最近遇到一个新的问题，关于electron 怎么保存摄像头配置！
开发环境：electron+react

当设备存在多个摄像头，
切换其中一个（即A），之后的应用中，再次请求摄像头默认都会选择A，
切换摄像头（即B），同理，之后的应用中，再次请求摄像头默认都会选择B

问题：如何实现该功能，怎么保存和使用选中的摄像头？

找了好久，都没有找到相关知识，真的急死人了

求解答，谢谢！

Answer 1

weixin_51105867 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

要实现在electron+react应用中选择并保存默认摄像头的功能，你可以按照以下步骤来操作：

1. 在electron中，使用electron-detect-webcam这个npm包来获取设备上的摄像头列表。安装该包：npm install electron-detect-webcam

2. 在React组件中，使用navigator.mediaDevices.enumerateDevices()方法来获取设备上的摄像头列表。列出设备上的每个摄像头信息，包括它们的设备ID、摄像头名称等。

3. 根据第2步获取的列表，在React组件中展示可供选择的摄像头选项。可以使用<select>标签和一个状态值来实现这个功能。

4. 当用户选择一个摄像头时，将选中的摄像头的设备ID保存到localStorage中。可以使用window.localStorage.setItem('cameraId', selectedCameraId)进行保存。

5. 在应用重新加载时，从localStorage中读取之前保存的摄像头设备ID，并将其作为默认值进行展示。

总结起来，实现步骤如下：

1. 安装electron-detect-webcam包：npm install electron-detect-webcam

2. 在React组件中，使用navigator.mediaDevices.enumerateDevices()方法获取设备上的摄像头列表，并展示可供选择的摄像头选项。

3. 当用户选择一个摄像头时，使用localStorage保存该摄像头的设备ID。

4. 在应用重新加载时，从localStorage中获取之前保存的摄像头设备ID，并将其作为默认值进行展示。

注意事项：

• 在electron中，使用BrowserWindow的webPreferences配置中添加nodeIntegration: true，以使得electron可以访问全局的navigator对象。

• 在electron主进程中，使用app.on('ready')监听ready事件，并在其中使用win.webContents.executeJavaScript方法注入一段javascript代码，用于将navigator.mediaDevices.enumerateDevices()的结果返回给主进程。

以下是React组件的示例代码，用于获取并展示摄像头选项：

import React, { useState, useEffect } from 'react';

const CameraSelection = () => {
  const [cameraList, setCameraList] = useState([]);
  const [selectedCamera, setSelectedCamera] = useState('');

  useEffect(() => {
    const getCameraList = async () => {
      const mediaDevices = navigator.mediaDevices || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia;
      if (mediaDevices) {
        try {
          const devices = await mediaDevices.enumerateDevices();
          const cameraList = devices.filter(device => device.kind === 'videoinput');
          setCameraList(cameraList);
        } catch (error) {
          console.error('Error enumerating devices:', error);
        }
      }
    };

    getCameraList();
  }, []);

  const handleCameraChange = (event) => {
    setSelectedCamera(event.target.value);
    localStorage.setItem('cameraId', event.target.value);
  };

  const savedCameraId = localStorage.getItem('cameraId');

  return (
    <div>
      <select value={selectedCamera || savedCameraId} onChange={handleCameraChange}>
        <option value="">Select a camera</option>
        {cameraList.map(camera => (
          <option key={camera.deviceId} value={camera.deviceId}>{camera.label}</option>
        ))}
      </select>
    </div>
  );
};

export default CameraSelection;

希望这些信息能对你有所帮助！如果还有其他问题，请随时提问。