Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實(shí)例

更新時(shí)間：2023年10月18日 09:54:19 作者：Sean

這篇文章主要為大家介紹了Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

Electron 開發(fā)音視頻

在使用 Electron 開發(fā)音視頻項(xiàng)目的時(shí)候，我們不可避免會(huì) 遇到桌面共享這種場(chǎng)景。

webRTC 提供了， getUserMedia 方法用于采集用戶媒體數(shù)據(jù)。比如攝像頭，麥克風(fēng)。

設(shè)置主進(jìn)程信息

我們需要先在Electron 中，先創(chuàng)建窗體并載入入口 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 提供的官方模塊用于捕獲系統(tǒng)桌面。 desktopCapture 支持捕獲，應(yīng)用窗口和桌面兩種媒體源。

但是，此模塊有使用限制，需要在主進(jìn)程進(jìn)行調(diào)用。所以我們需要用到 Electron 中進(jìn)行間通信的方式。

所以我們需要通過， IPC 通訊的形式，讓我們，在渲染進(jìn)程中進(jìn)行調(diào)用。

首先，我們?cè)?main.js 中，通過 ipcMain 注冊(cè)一個(gè)方法，getSources

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

接著，我們?cè)阡秩具M(jìn)程中，通過 ipcRenderer 去invoke 調(diào)用此方法便實(shí)現(xiàn)了，這個(gè)調(diào)用過程。

// .... other codes
const inputSources = await ipcRenderer.invoke('getSources')
// ... other codes

獲得source 列表后，我們?cè)阡秩具M(jìn)程中，通過 HTML5 的 getUserMedia 進(jìn)行捕獲具體窗口或者桌面。

示例代碼：

// ...
// 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

至此我們就完成了，桌面視頻數(shù)據(jù)采集了。

后續(xù)我們，可以對(duì)采集到的數(shù)據(jù)進(jìn)行，本地錄制或者通過webrtc 推到遠(yuǎn)端等一系列操作。