环境: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", () =>