electron录制工具-视频保存、编辑页面
效果如下
electron录屏-保存录制视频
资源
导出视频使用了 mp4-wasm，基本使用，可参考 此文
想法
1、点击按钮导出，弹出选择保存文件夹
2、保存成功后，自动打开保存后文件夹窗口并关闭窗口
实现
获取保存文件夹路径，并利用 mp4-wasm 转换视频；
// renderconst floder = await window.electron.ipcRenderer.invoke('select-folder-render')// 利用 mp4-wasm 转换视频const MP4 = await loadMP4Module();const encoder = MP4.createWebCodecsEncoder({width: exportCanvasRef.current?.width,height: exportCanvasRef.current?.height,fps: 60})....
当视频转换完成之后，把mp4wasm转换后的数据发送到main进程，进行保存处理
// render await window.electron.ipcRenderer.invoke('exprot-blob-render', { arrayBuffer: buf, folder: savaFolder });
main进程监听两个事件，一个是选择保存路径，一个是保存视频处理
ipcMain.handle('select-folder-render', async () => {const options: OpenDialogOptions = {properties: ['openDirectory'],};const results = await dialog.showOpenDialog(options)if (!results.canceled) {return results.filePaths[0]}return ''})
ipcMain.handle('exprot-blob-render', async (_, {arrayBuffer, folder} ) => {const buffer = Buffer.from(arrayBuffer); const filePath = `${folder}/av-craft-${timestamp2Time(new Date().getTime())}.mp4`fs.writeFileSync(filePath, buffer);// 导出成功后，2s之后退出应用setTimeout(() => {openFolderInExplorer(folder)app.quit()}, 1 * 1000)return filePath})
代码
注：代码中播放视频是video 与 canvas 结合