// 安装electron和vue3依赖
npm install electron vue@next electron-builder --save-dev
// 在src/main/index.js中配置electron主进程
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
},
});
win.loadFile('dist/index.html');
}
app.whenReady().then(createWindow);
// 在src/main/preload.js中配置electron的预加载脚本
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
send: (channel, args) => ipcRenderer.send(channel, args),
receive: (channel, func) => ipcRenderer.on(channel, func),
});
// 在Vue组件中使用electron和ffmpeg
<template>
<div>
<button @click="startConversion">转换视频</button>
</div>
</template>
<script>
export default {
methods: {
startConversion() {
this.electron.send('convert-video', 'video-input.mp4');
}
},
mounted() {
this.electron.receive('video-converted', (event, args) => {
console.log('视频转换完成', args);
});
}
};
</script>
// 在src/main/index.js中处理ffmpeg转码逻辑
const { app, ipcMain } = require('electron');
const ffmpeg = require('ffmpeg-static');
const { exec } = require('child_process');
ipcMain.on('convert-video', (event, videoPath) => {
const outputPath = 'output-video.mp4';
exec(`${ffmpeg.path} -i ${videoPath} ${outputPath}`, (error, stdout, stderr) => {
if (error) {
console.error(`执行出错: ${error}`);
return;
}
event.reply('video-converted', outputPath);
});
});
// 注意：以上代码仅为示例，实际使用时需要处理错误和异常，确保安全性。
这个示例展示了如何在一个使用Vue 3和Electron的项目中集成ffmpeg。它包括了主进程和渲染进程的基本配置，并演示了如何在渲染进程中触发视频转码，以及在主进程中处理转码逻辑。这个示例提供了一个简单的开始，对于想要了解如何在Electron应用中使用ffmpeg的开发者来说，是一个很好的起点。