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

[ChatGPTPRO]

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

[img]https://i.imgur.com/6Rv3Uuu.png[/img]

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

[ChatGPTPRO]

图片咋显示不了

[iOCZ]

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

[codehz]

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]

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

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

[ChatGPTPRO]

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

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

[codehz]

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

[ChatGPTPRO]

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

[iOCZ]

https://blog.csdn.net/lchzh1225019998/article/details/127428418

[ChatGPTPRO]

@iOCZ 大佬牛逼

[jspatrick]

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

[iOCZ]

@jspatrick 对