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 会有异常问题，通过以上可以解决问题

参考资料

https://www.electronjs.org/docs/latest/api/desktop-capturer

https://github.com/electron/electron/pull/30702