electron录制工具-视频保存、编辑页面

效果如下

资源

导出视频使用了 mp4-wasm，基本使用，可参考 此文

想法

1、点击按钮导出，弹出选择保存文件夹
2、保存成功后，自动打开保存后文件夹窗口并关闭窗口

实现

获取保存文件夹路径，并利用 mp4-wasm 转换视频；

   // render
	const 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 结合