求助前端：如何将 Canvas 导出为 mp4 格式？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 415 天前的主题，其中的信息可能已经有所发展或是发生改变。

网上这个开源项目，是一个可视化的音乐播放器，可以根据音乐动态的创建可视化节奏。 https://github.com/leon-kfd/g-music-visualizer#run-the-project

它的这个可视化是用 ant-canvas 做的，请问大佬们，怎么将这个 canvas 导出成 mp4 格式的呢？

11 条回复 • 2023-10-07 18:33:14 +08:00

ChatGPTPRO

2023-10-07 14:50:28 +08:00

图片咋显示不了

iOCZ

2023-10-07 14:55:11 +08:00

canvas 肯定是每隔一段时间绘制一帧，那就是把很多帧合成视频

codehz

2023-10-07 14:59:31 +08:00

canvas 可以用 captureStream 生成流
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/captureStream
然后用 MediaRecorder
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
不过这个只能生成 webm ，可以考虑使用 ffmpeg wasm 来转换成所需的 mp4 格式
相关代码网上一大堆，这里就不列了

ChatGPTPRO

2023-10-07 15:11:48 +08:00

@codehz 我这个 canvas 用的是 ant-canvas 阿里的，不是原生的，这个 api 试过了，发现没有这个 api

网上搜了好久没解决，所有来这里问大佬哈哈

ChatGPTPRO

2023-10-07 15:13:25 +08:00

@iOCZ 思路是这个思路，但问题是做不到。哈哈哈

我这个 canvas 用的是 ant-canvas 阿里的，不是原生的。

codehz

2023-10-07 15:17:22 +08:00

@ChatGPTPRO 你可以从里面挖出原始 canvas 的啊，再不行直接 document.getElementsByTagName('canvas')

ChatGPTPRO

2023-10-07 15:19:52 +08:00

@codehz 哈哈哈我主后端，前端这些不是很熟。谢谢大佬我试一下

iOCZ

2023-10-07 15:46:41 +08:00

ChatGPTPRO

2023-10-07 15:55:51 +08:00

@iOCZ 大佬牛逼

jspatrick

2023-10-07 17:59:57 +08:00

@iOCZ #8 跟 #3 的方案是一样的，下载的时候改了后缀名，多半数据格式还是 webm 的

iOCZ

2023-10-07 18:33:14 +08:00