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
}
});
Electron支持WebRTC 屏幕分享的关键
[db:回答]