代做网站微信号,静态网站模板,广州最专业的网站建设,前端培训机构出来的好找工作吗效果如下 electron录屏-保存录制视频 资源
导出视频使用了 mp4-wasm#xff0c;基本使用#xff0c;可参考 此文
想法
1、点击按钮导出#xff0c;弹出选择保存文件夹 2、保存成功后#xff0c;自动打开保存后文件夹窗口并关闭窗口
实现
获取保存文件夹路径#xff0…效果如下 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())}.mp4fs.writeFileSync(filePath, buffer);// 导出成功后2s之后退出应用setTimeout(() {openFolderInExplorer(folder)app.quit()}, 1 * 1000)return filePath})代码
注代码中播放视频是video 与 canvas 结合
