Electron采集桌面共享和系统音频(桌面捕获)实例

 更新时间:2023年10月18日 09:54:19   作者:Sean  
这篇文章主要为大家介绍了Electron采集桌面共享和系统音频(桌面捕获)实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

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

以上就是Electron采集桌面共享和系统音频(桌面捕获)实例的详细内容,更多关于Electron桌面捕获的资料请关注脚本之家其它相关文章!

相关文章

  • 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法

    如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法

    这篇文章主要介绍了如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Vue el使用el-checkbox-group复选框进行单选框方式

    Vue el使用el-checkbox-group复选框进行单选框方式

    这篇文章主要介绍了Vue el使用el-checkbox-group复选框进行单选框方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue.js+element 默认提示中英文操作

    vue.js+element 默认提示中英文操作

    这篇文章主要介绍了vue.js+element 默认提示中英文实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue的全局变量和全局拦截请求器的示例代码

    vue的全局变量和全局拦截请求器的示例代码

    这篇文章主要介绍了vue的全局变量和全局拦截请求器的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue实现数字翻页动画

    vue实现数字翻页动画

    这篇文章主要为大家详细介绍了vue实现数字翻页动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue3如何通过ref获取元素离顶部的距离

    vue3如何通过ref获取元素离顶部的距离

    这篇文章主要给大家介绍了关于vue3如何通过ref获取元素离顶部的距离,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • Element-ui table中过滤条件变更表格内容的方法

    Element-ui table中过滤条件变更表格内容的方法

    下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue配置marked链接添加target=

    Vue配置marked链接添加target="_blank"的方法

    这篇文章主要介绍了Vue配置marked链接添加target="_blank"的方法,文中给大家提到了vue实现类似target="_blank"打开新窗口的代码,感兴趣的朋友参考下吧
    2019-07-07
  • Intellij IDEA搭建vue-cli项目的方法步骤

    Intellij IDEA搭建vue-cli项目的方法步骤

    这篇文章主要介绍了Intellij IDEA搭建vue-cli项目的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 聊聊对Vue中的keep-alive的理解

    聊聊对Vue中的keep-alive的理解

    keepalive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染,也就是所谓的组件缓存,这篇文章主要介绍了说说你对Vue的keep-alive的理解,需要的朋友可以参考下
    2022-11-11

最新评论