如何在 Electron 中采集桌面共享和系统音频

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

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

设置主进程信息

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

代码如下:

jsx 复制代码
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

jsx 复制代码
// .... other code

  


ipcMain.handle('getSources', async () => {

  return await desktopCapturer.getSources({ types: ['window', 'screen'] })

})

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

jsx 复制代码
// .... other codes

  


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

  


// ... other codes

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

示例代码:

jsx 复制代码
// ...

// 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 代码: github.com/shitouzxy/E...

相关推荐
haaaaaaarry17 分钟前
Element Plus常见基础组件(二)
开发语言·前端·javascript
xyphf_和派孔明41 分钟前
关于echarts的性能优化考虑
前端·性能优化·echarts
PyHaVolask1 小时前
HTML 表单进阶:用户体验优化与实战应用
前端·javascript·html·用户体验
A了LONE1 小时前
cv弹窗,退款确认弹窗
java·服务器·前端
AntBlack2 小时前
闲谈 :AI 生成视频哪家强 ,掘友们有没有推荐的工具?
前端·后端·aigc
花菜会噎住2 小时前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js
花菜会噎住3 小时前
Vue3核心语法基础
前端·javascript·vue.js·前端框架
全宝3 小时前
echarts5实现地图过渡动画
前端·javascript·echarts
vjmap3 小时前
MCP协议:CAD地图应用的AI智能化解决方案(唯杰地图MCP)
前端·人工智能·gis
simple_lau3 小时前
鸿蒙设备如何与低功耗蓝牙设备通讯
前端