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桌面捕获的资料请关注脚本之家其它相关文章！
相关文章
今天小编就为大家分享一篇解决$store.getters调用不执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vuex 单状态库与多模块状态库详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
现在,很多登陆表单都会使用密码加密,为登录安全,登录表单输入密码,会加密后传入后台,本文就来介绍一下Vue3实现密码加密登录的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
这篇文章主要介绍了Vue使用Swiper的案例详解，主要包括引入swiper,创建轮播图组件CarouselContainer.vue的详细代码，本文给大家介绍的非常详细，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了使用vue编写h5公众号跳转小程序,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
本文介绍了如何开发自定义全局公共组件的两种方法,第一种方法是通过在components文件夹中创建新的组件文件夹,例如Loading文件夹,并在其中创建index.js和index.vue文件,通过在vue的入口文件main.js中进行引入,可以实现组件的全局调用2024-10-10
小编使用的是webpack模板在vue-cli生成的工程中引入jquery的方法，首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install，具体内容详情大家参考下本文2018-01-01
在Vue3项目中,通常会有以下一些常见的目录和文件,下面这篇文章主要给大家介绍了关于vue3项目中各个文件的作用,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了Vue实现天气预报小应用，查询一些城市的天气情况，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了vue实现吸壁悬浮球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论