electron +vue 通过navigator.mediaDevices.getDisplayMedia实现录屏报错解决

我的项目结构是electron项目跳转至vue2项目

vue项目也就是渲染进程中有这样一句navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })是为了实现录屏，在https中是没有问题的，而在客户端中出现了这样的报错

DOMException.NotSupported

查询之后发现需要在electron项目主进程main.js当中这样写

// main.js
const { app, BrowserWindow, desktopCapturer, session } = require('electron')

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow()

  session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
    desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {
      // Grant access to the first screen found.
      callback({ video: sources[0], audio: 'loopback' })
    })
  })

  mainWindow.loadFile('index.html')
})

vue项目代码无需改变