HTML5中不存在ElementCapture API；可行方案是canvas.captureStream()结合MediaRecorder录制Canvas动画，而CSS/JS动画需用getDisplayMedia或服务端合成。
HTML5 中并没有名为 ElementCapture 的标准 API 或内置功能。目前（截至 2024 年），浏览器原生不支持直接通过 HTML5 API 录制网页中动态生成的动画片段并下载为视频文件，更不存在叫 ElementCapture 的规范接口。
你可能混淆了以下几种技术概念：
-
Element.capture()是旧版 IE 的非标准方法，早已废弃，与录制无关； -
document.elementFromPoint()或element.getBoundingClientRect()是用于定位元素，不是录制； -
Canvas.captureStream()+MediaRecorder可实现 Canvas 动画录制； -
html2canvas可截图，但无法录屏或捕获 CSS/JS 动画； -
getDisplayMedia()可录屏（整个窗口或标签页），但属于屏幕捕获，非“仅捕获某元素”。
✅ 正确可行的方案：用 canvas.captureStream() + MediaRecorder 录制 Canvas 动画
适用于：动画由 <canvas> 绘制（如使用 requestAnimationFrame、Three.js、PixiJS 等）。
步骤如下：
- 将动画渲染到
<canvas>元素上； - 调用
canvas.captureStream(fps)获取MediaStream； - 使用
MediaRecorder录制该流； - 停止后导出
Blob，生成下载链接。
<canvas id="myCanvas" width="640" height="480"></canvas>
<button id="startBtn">开始录制</button>
<button id="stopBtn">停止并下载</button>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let mediaRecorder;
let chunks = [];
// 示例动画：旋转矩形
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(Date.now() * 0.001);
ctx.fillStyle = '#4287f5';
ctx.fillRect(-30, -20, 60, 40);
ctx.restore();
}
// 启动录制
document.getElementById('startBtn').onclick = () => {
const stream = canvas.captureStream(30); // 30fps
mediaRecorder = new MediaRecorder(stream);
chunks = [];
mediaRecorder.ondataavailable = 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();
URL.revokeObjectURL(url);
};
mediaRecorder.start();
};
// 停止录制
document.getElementById('stopBtn').onclick = () => {
if (mediaRecorder && mediaRecorder.state === 'recording') {
mediaRecorder.stop();
}
};
// 持续动画
function loop() {
animate();
requestAnimationFrame(loop);
}
loop();
</script>⚠️ 注意：
captureStream()在 Safari 中需开启实验性功能（webkit前缀支持有限），Chrome / Edge 支持良好；Firefox 支持但对某些合成场景有兼容限制。立即学习“前端免费学习笔记（深入）”；
✅ 替代方案：录制 DOM 元素（含 CSS/JS 动画）
若动画是 CSS @keyframes、transform、opacity 或 Vue/React 动画，无法直接用 captureStream()（因非 Canvas），可考虑：
- 使用
getDisplayMedia()录制整个标签页或区域（需用户授权）； - 结合
IntersectionObserver+requestIdleCallback截图序列（帧率低，适合 GIF）； - 使用第三方库如 rrweb（侧重回放录制，非视频导出）；
- 后端渲染方案：用 Puppeteer + Chrome Headless 截图合成视频（服务端运行，非纯前端）。
❌ 不可行的误区提醒
-
<video>标签不能“录制”其他 DOM 元素 — 它只是播放器； -
Element.prototype.capture()不是标准方法，不要搜索这个； -
MutationObserver或ResizeObserver只监听变化，不产生媒体流； -
window.print()或toDataURL()只能导出单帧，不是视频。
不复杂但容易忽略：只有 Canvas 动画能真正实现“前端零依赖、实时流式录制”；其余 DOM 动画必须借助屏幕捕获或服务端合成。选择方案前，请先确认你的动画载体是 <canvas> 还是普通 HTML/CSS 元素。
