Electron 采集桌面共享和系统音频

在使用 Electron 开发音视频项目的时候，我们不可避免会 遇到桌面共享这种场景。

webRTC 提供了， getUserMedia 方法用于采集 用户媒体数据。比如摄像头，麦克风。

设置主进程信息

我们需要先在Electron 中，先创建窗体并载入入口 index 文件。

代码如下：

const { app, BrowserWindow, desktopCapturer, ipcMain } = require('electron')
const path = require('path')
let win = null;
function createWindow () {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

使用 desktopCapturer 模块

desktopCapturer 模块是Electron 提供的官方模块用于捕获系统桌面。 desktopCapture 支持捕获，应用窗口 和 桌面两种媒体源。

但是，此模块有使用限制，需要在主进程进行调用。 所以我们需要用到 Electron 中进行间通信的方式。

所以我们需要通过， IPC 通讯的形式，让我们，在渲染进程中进行调用。

首先，我们在 main.js 中，通过 ipcMain 注册一个方法，getSources

// .... other code 

ipcMain.handle('getSources', async () => {
  return await desktopCapturer.getSources({ types: ['window', 'screen'] })
})

接着，我们在渲染进程中，通过 ipcRenderer 去invoke 调用此方法便实现了，这个调用过程。

// .... other codes

const inputSources = await ipcRenderer.invoke('getSources')

// ... other codes

获得source 列表后， 我们在渲染进程中，通过 HTML5 的 getUserMedia 进行捕获具体窗口或者桌面。

示例代码：

// ...
// other Code 

 let constraints = {
      audio: {
        mandatory: {
          chromeMediaSource: 'desktop'
        }
      },
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          chromeMediaSourceId: sourceId
        }
      }
    }

    const stream = await navigator.mediaDevices
      .getUserMedia(constraints);

      handleStream(stream);

function handleStream (stream) {
    const video = document.querySelector('video')
    video.srcObject = stream
    video.onloadedmetadata = (e) => video.play()
  }

// ...
// other code 

至此我们就完成了， 桌面视频数据采集了。

后续我们，可以对采集到的数据进行 ，本地录制或者 通过webrtc 推到远端等一系列操作。

总结

在electron 中实现桌面共享 和 chrome web 中差异还是蛮大的， 在chrome 中我们只需要调用 getDisplayMedia 方法就能唤起桌面选择和画面采集。

但在electron 中，我们需要使用到， 进程间通信模块 ipc 、 桌面采集模块 desktopCapturer 、以及HTML5 的getUserMedia 方法才能完成整个桌面采集的过程。

关于完整代码，我上传到了github。

DEMO 代码： https://github.com/shitouzxy/Electron-screenCapturerer-demo