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 结合