如何在 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...

相关推荐
Boilermaker199230 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子41 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构