electron 获取摄像头

767 阅读1分钟

获取摄像头

const { app, BrowserWindow,desktopCapturer,ipcMain} = require('electron');
...
// 获取设备
ipcMain.handle("get-devices",async ()=>{
    try {
      const sources = await desktopCapturer.getSources({ types: ['window', 'screen'] })  
      return sources
    } catch (e) {
      return []
    }
  })
 ... 

在渲染进程输出一下

1684981707080.png

取整个屏幕

   ...
   <video id="camera" autoplay playsinline></video>
   ...
    <script>
      const camera = document.getElementById("camera");
      const { ipcRenderer } = require("electron");
      ipcRenderer.invoke("get-devices").then((sources) => {
        console.log(sources)
        for (const source of sources) {

          if (source.name.indexOf("整个屏幕")>=0) {
            navigator.mediaDevices
              .getUserMedia({
                audio: false,
                video: {
                  mandatory: {
                    chromeMediaSource: "desktop",
                    chromeMediaSourceId:source.id,
                    minWidth: 1280,
                    maxWidth: 1280,
                    minHeight: 720,
                    maxHeight: 720,
                  },
                },
              })
              .then((res) => {
                handleStream(res);
              })
              .catch((err) => {
                console.log(err);
              });
            break;
          }
        }
      });
      function handleStream(stream) {
        camera.srcObject = stream;
      }
    </script>

看看效果

image.png