electron实现屏幕录制

_陌子曦

已于 2022-06-30 15:35:19 修改

阅读量2.6k

点赞数 1

分类专栏： electron 文章标签： electron 前端 javascript

于 2022-06-21 17:41:20 首次发布

本文链接：https://blog.csdn.net/QCIWYY/article/details/125395450

版权

本文介绍了如何利用Electron框架实现屏幕录制功能。通过主进程和渲染进程的交互，结合`desktopCapturer`API获取屏幕ID，参考相关文章和示例，可以实现在 Electron 16.0.5 中结合Vue进行电脑屏幕选择区域的视频录制。

摘要由CSDN通过智能技术生成

官网地址：desktopCapturer | Electron

1.新建主进程文件

import {desktopCapturer, BrowserWindow, screen} from 'electron';

const getSize = () => {
    const { size, scaleFactor } = screen.getPrimaryDisplay();
    return {
        width: size.width * scaleFactor,
        height: size.height * scaleFactor
    }
}
const screencap = () => {
    const sizeInfo = getSize();
    desktopCapturer.getSources({
        types: ['window', 'screen'], // 设定需要捕获的是"屏幕"，还是"窗口"
        fetchWindowIcons: true, // 如果视频源是窗口且有图标，则设置该值可以捕获到的窗口图标
        thumbnailSize: sizeInfo
    }).then(async sources => {
        console.log("sources"+JSON.stringify(sources))
        //获取第一个屏幕
        BrowserWindow.getFocusedWindow().webContents.send(&