electron视频音频处理简单说明
属于一个总结，一般我们都是使用navigator.mediaDevices.getUserMedia+desktopCapturer 集成，但是getUserMedia 对于音频的捕捉是有一些问题的（audio 为true 会有bug）
基于session setDisplayMediaRequestHandler
推荐基于此方法，可以灵活的实现音视频的捕捉处理,
win.webContents.session.setDisplayMediaRequestHandler((stream, callback) => {
// 此处可以进行一些ui 选择，或者业务处理（与渲染进程的通信，可以包含ui信息，不同的source 支持的能力不太一样）
desktopCapturer.getSources({ types: ['screen'，'window'] }).then((sources) => {
// Grant access to the first screen found.
console.log("sources",sources);
callback({ video: sources[0], audio: 'loopback' })
})
}, { useSystemPicker: true })
基于自定义getDisplayMedia
window.navigator.mediaDevices.getDisplayMedia = () => {
return new Promise(async (resolve, reject) => {
try {
alert("navigator.mediaDevices.getDisplayMedia");
const sources = await ipcRenderer.invoke("get-sources");
console.log("sources", sources);
console.log("sources[0]", sources[0]);
// 注意此模式中audio当为chromeMediaSource 只能为false，否则会有异常问题，应该属于chrome 的bug
const stream = await window.navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: sources[0].id,
},
},
});
stream.getTracks().forEach(track => {
console.log("track",track);
});
resolve(stream);
} catch (err) {
reject(err);
}
});
};
说明
以上是一个简单说明，因为原生navigator.mediaDevices.getUserMedia audio 为true 会有异常问题，通过以上可以解决问题
