electron+vue开发录屏小工具

环境：node
脚手架：vue-cli4 electron-builder
开发工具：vscode
结尾附demo地址
目录结构：

background.js

'use strict'

// import { app, protocol, BrowserWindow} from 'electron'
import {
    dialog, app, BrowserWindow, protocol, ipcMain, globalShortcut, Notification, shell, screen } from "electron";
import {
    createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import path from "path";
import window from "./window";
// electron-devtools-installer国内安装不了
// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
let mainWindow = null;
let recorderWindow = null;
let controlWindow = null;
let start = false;
let Path = "";
let arean = {
   
  x: 0,
  y: 0,
  width: 384,
  height: 216,
};
let winW = 0;
let winH = 0;
var ffmpegPath = null;
ffmpegPath = path.join(__dirname,'../videoResource/ffmpeg.exe')
if (isDevelopment && !process.env.IS_TEST) {
   
  // 生产环境
  ffmpegPath = path.resolve(__dirname,'../videoSource/ffmpeg.exe')
}
console.log(ffmpegPath);
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  {
    scheme: 'app', privileges: {
    secure: true, standard: true } }
])
async function createWindow() {
    
  // Create the browser window.
  mainWindow = new BrowserWindow({
   
    width: 800,
    height: 600,
    // width 和 height 使用web网页size, 这意味着实际窗口的size应该包括窗口框架的size，稍微会大一点，默认为 false
    useContentSize: true,
    // 窗口是否可以最小化
    minimizable:true,
    // 窗口是否可以最大化
    maximizable:true,
    icon: path.join(__dirname,'favicon.ico'),
    // 隐藏菜单栏，按alt键显示/隐藏
    autoHideMenuBar:true,
    webPreferences: {
   
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      // 开启使用remot，10.0以后想要使用必须配置，10.0之前可以不配置
      enableRemoteModule:true,
      // 获取node的支持 
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      webSecurity: false,
      allowRunningInsecureContent: true,
    }
  })
  // 主窗口加载完成
  mainWindow.webContents.on("did-finish-load", () => {
   
    // 发送根目录
    mainWindow.webContents.send("appPath", path.join(__dirname, "../.."));
  });
  // mainWindow.loadURL(winURL) 
  // console.log(123456);
  if (process.env.WEBPACK_DEV_SERVER_URL) {
   
    // Load the url of the dev server if in development mode
    await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) mainWindow.webContents.openDevTools()

  } else {
   
    createProtocol('app')
    // Load the index.html when not in development
    mainWindow.loadURL(`app://./index.html`)
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
   
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
   
    app.quit()
  }
})

app.on('activate', () => {
   
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', () => {
   
  winW = screen.getPrimaryDisplay().workAreaSize.width;
  winH = screen.getPrimaryDisplay().workAreaSize.height;
  arean.x = (winW - arean.width) / 2;
  arean.y = (winH - arean.height) / 2;
  // 注册停止快捷键
  globalShortcut.register("CommandOrControl+M", () => {
   
    if (start) {
   
      // 通知录制窗口 录制结束
      recorderWindow.webContents.send("stop::record", Path, ffmpegPath);
      controlWindow.webContents.send("video::creating");
      recorderWindow.hide();
      controlWindow.show();
    }
  });
  // if (isDevelopment && !process.env.IS_TEST) {
   
  //   // Install Vue Devtools
  //   try {
   
  //     await installExtension(VUEJS_DEVTOOLS)
  //   } catch (e) {
   
  //     console.error('Vue Devtools failed to install:', e.toString())
  //   }
  // }
  createWindow()
})
ipcMain.on("pick::path", async () => {
   
  const PATH = await dialog.showOpenDialog({
    properties: ["openDirectory"] });
  Path = PATH.filePaths[0];
  mainWindow.webContents.send("path::chosen", Path);
});

// 主窗口点击录制
ipcMain.on("start::record", (