Electron支持WebRTC 屏幕分享的关键

Electron 可以很方便的创建一个窗口，然后加载指定的网页来呈现。但如果网页中包含了WebRTC 屏幕分享相关的逻辑，则会发现Electron会和Chrome浏览器表现不同。

问题在于Electron未能实现Chrome所支持的Web RTC的getDisplayMedia接口，导致本应该跳出视频流选择的界面未能显示出来。

解决方法：

Electron提供了desktopCapturer.getSources用来实现类似getDisplayMedia的功能，因为我们可以在BrowserWindow的preload中重写navigator.mediaDevices.getDisplayMedia方法

类似于：

window.navigator.mediaDevices.getDisplayMedia = () => {  
    return new Promise(async (resolve, reject) => {
      try {
        const sources = await desktopCapturer.getSources({ types: ['screen'] })
        const stream = await window.navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
              mandatory: {
                chromeMediaSource: 'desktop',
                chromeMediaSourceId: sources[0].id
              }
            }
          })
          resolve(stream)
        }catch(err){
            reject(err)
        }       
    })
  }

　　我这里只默认获取了第一个source，也就是主屏幕。

 关键的地方：

Electron新版本，默认在preload中的js和网页中的js是隔离的，也就是contextisolation的设置为true，这会导致，在preload中设置的上述方法在网页中不起作用，因此需要将contextisolation设置为false

带来的额外的问题就是contextBridge就没法使用了，后者通过contextBridge.exposeInMainWorld()的方式，可以向网页注入属性或者方法

我自己的设置（测试可行）：

    mainwindow = new BrowserWindow({
        show: false,
        title: appName,
        icon: 'app/assets/examclient_128.ico',
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: false,
            devTools: true,
            webSecurity:false,
            experimentalFeatures:true,
            contextIsolation:false
        }
    });