浏览器Canvas动画导出MP4视频无需服务端教程
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
本文介绍如何纯前端将 html canvas 渲染的物理动画（如运动方块）录制为视频文件，无需后端服务器：先用 mediarecorder 实时捕获 canvas 流生成 webm，再通过 ffmpeg.wasm 转码为 mp4。全程运行于浏览器，支持离线使用。
想把浏览器里那个酷炫的 Canvas 物理动画，比如你刚实现的小球碰撞或者方块堆叠，直接保存成一个能在任何地方播放的 MP4 视频吗？而且，整个过程完全在浏览器里完成，不需要任何服务器参与。
听起来有点不可思议？其实，实现这个目标有个非常成熟的“两步走”策略：先录制，再转码。简单来说，就是利用浏览器原生的 MediaRecorder 高效捕捉 Canvas 画面流，生成 WebM 文件；然后，借助强大的 ffmpeg.wasm 在本地完成格式转换，最终输出兼容性极佳的 MP4 视频。这套组合拳，既保证了录制的实时性和低延迟，又解决了最终格式的通用性问题。
第一步：用 MediaRecorder 录制 Canvas 为 WebM
这是整个流程的基石。MediaRecorder API 可以直接接收 Canvas 通过 captureStream() 方法产生的媒体流，实现帧级别的同步录制。不过，有几个关键细节决定了录制的成败：
- Canvas 尺寸必须明确：务必通过 HTML 属性或 Ja vaScript 设置 Canvas 的
width和height，而不仅仅是 CSS 样式。否则，生成的流可能是空的。 - 锁定帧率：在调用
captureStream()时指定帧率（例如 30 FPS），并在MediaRecorder的配置中明确视频的frameRate。这能避免录制器自适应帧率导致的卡顿或跳帧。 - 数据收集与下载：录制过程中，数据会以“块”的形式通过事件回调出来。我们需要将它们收集起来，在录制结束时合并成一个 Blob 对象，并生成下载链接。
const canvas = document.getElementById('myCanvas');
const stream = canvas.captureStream(30); // 明确指定 30 FPS
const mediaRecorder = new MediaRecorder(stream, {
mimeType: 'video/webm;codecs=vp9'
});
const chunks = [];
mediaRecorder.ondataa vailable = e => chunks.push(e.data);
mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'animation.webm';
a.click();
};
// 开始录制（例如点击按钮触发）
function startRecording() {
chunks.length = 0;
mediaRecorder.start();
}
// 停止录制（例如动画结束时调用）
function stopRecording() {
mediaRecorder.stop();
}
⚠️ 注意：
captureStream()在 Safari 浏览器中的支持情况需要留意。虽然 Safari 16.4+ 版本已提供原生支持，但在更早的版本或某些特定环境下可能需要开启实验性功能。开发时务必在目标浏览器中进行充分测试。
第二步：用 ffmpeg.wasm 将 WebM 转码为 MP4
虽然 WebM 格式在浏览器内处理效率很高，但若想视频能在微信、iOS 系统相册等更广泛的环境下无缝播放，MP4（H.264 视频编码 + AAC 音频编码）无疑是更稳妥的选择。这时，ffmpeg.wasm 就派上用场了——它把著名的 FFmpeg 工具搬到了浏览器里。
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/ffmpeg-core.js',
log: true,
progress: ({ ratio }) => console.log(`转码进度: ${(ratio * 100).toFixed(0)}%`)
});
async function transcodeToMP4(webmBlob) {
// 首次使用需要加载 WASM 核心模块（体积约20MB，建议预加载）
await ffmpeg.load();
// 将 WebM 文件写入 ffmpeg.wasm 的虚拟文件系统
const arrayBuffer = await webmBlob.arrayBuffer();
ffmpeg.FS('writeFile', 'input.webm', new Uint8Array(arrayBuffer));
// 执行转码命令
await ffmpeg.run(
'-i', 'input.webm', // 输入文件
'-c:v', 'libx264', // 视频编码器使用 H.264
'-crf', '23', // 画质控制，23 是常用平衡值（值越小画质越好）
'-preset', 'fast', // 编码预设，平衡速度与压缩率
'-c:a', 'aac', // 音频编码器使用 AAC（即使无声轨也建议保留，确保容器规范）
'-y', 'output.mp4' // 输出文件名，-y 表示覆盖已存在文件
);
// 从虚拟文件系统读取生成的 MP4 文件并提供下载
const data = ffmpeg.FS('readFile', 'output.mp4');
const blob = new Blob([data.buffer], { type: 'video/mp4' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'animation.mp4';
a.click();
}
相关攻略
UC浏览器支持多种离线保存网页方式：可生成 mhtml文件、开启离线阅读自动缓存、提取阅读模式正文、下载完整HTML资源，或通过网页快照截取图片。以上方法均支持断网查看，满足不同离线需求。
火狐浏览器的画中画功能可将视频转为悬浮小窗。若功能未显示，可尝试以下方法：在浏览器设置中启用画中画控件；通过about:config修改高级配置强制启用；在支持网站的视频上右键直接调用；使用Ctrl+Shift+P快捷键快速激活；或为特定网站单独设置画中画权限。若均无效，可安装兼容性扩展作为备用方案。
Via浏览器卡顿通常由资源调度、渲染机制或后台任务引起。可通过五个步骤排查：关闭省流模式以提升渲染帧率；清除缓存与临时数据避免资源污染；调整硬件加速设置以适配设备性能；降低广告拦截强度并确保JavaScript启用，防止页面渲染中断；若问题依旧，可重置为出厂设置以排除配置冲突。
在使用UC浏览器访问外文网站时，如果页面没有自动翻译，通常是因为翻译功能未启用、入口未找到，或是相关服务条件未满足。别担心，下面为您梳理了多种行之有效的解决方案，总有一种能帮您快速实现网页翻译。 一、在设置中启用翻译总开关 这是最基础且关键的一步。正确开启并配置浏览器的翻译服务，能解决大部分翻译按钮
傲游浏览器侧边栏可通过多种方式启用。通过菜单栏“自定义界面”勾选显示，或使用快捷键Alt+F配合方向键操作。右键点击侧边栏空白处可快速切换显隐。高级功能支持将侧边栏固定为桌面悬浮窗。若界面设置失效，还可通过修改配置文件手动启用。
热门专题
热门推荐
在软件开发与调试过程中，NullPointerException（空指针异常）是开发者经常遇到的棘手问题。系统日志中简单的“对象为null”提示，往往无法揭示问题的真正根源：是用户未登录、前端参数缺失，还是下游服务返回了空数据？这种仅呈现技术现象而丢失业务背景的异常，就是典型的异常语义丢失——底层技
《雨霖铃》改编自同名小说，以《三侠五义》为蓝本，聚焦展昭的江湖成长。该剧不仅呈现武打场面，更深入人物内心，探讨情法冲突与侠义抉择。团队坚持“手搓武侠”的匠心，注重细节与真实动作戏，为经典题材注入新活力。
mysqlbinlog工具可将二进制日志解析为可读SQL，但不能直接恢复被删除的数据。恢复关键在于定位误删前的INSERT事件并手动将其转换为可执行的INSERT语句。操作时需确认日志为ROW格式，并注意处理GTID、会话变量等干扰信息。恢复后需检查时区、字符集及外键约束等潜在问题，确保数据准确。整个过程依赖人工判断与经验。
当币铵官网无法访问时，可尝试通过官方社交媒体验证正确网址，避免点击伪装成官网的搜索广告。检查浏览器是否拦截了页面跳转，并清除缓存或更换网络。最后，确认电脑系统时间是否准确，以及浏览器是否因安全证书问题阻止了访问。
Navicat16执行ALTERTABLE时出现锁等待超时，通常因其他事务长期持有写锁。可查询INNODB_TRX和INNODB_LOCK_WAITS系统表定位阻塞源。强制KILL事务前需确认业务影响，避免数据不一致。临时方案可调高当前会话的innodb_lock_wait_timeout参数。若修改字段涉及外键约束，需先删除约束再修改字段并重建外键。