HTML5 中不存在 ElementCaptureAPI；录制 DOM 元素需通过 canvas.captureStream() 获取 MediaStream 后用 MediaRecorder 录制，或对 video/audio 元素直接调用 captureStream()。
HTML5 中并没有名为 ElementCaptureAPI 的标准 API。目前（截至 2024 年），W3C 规范和主流浏览器（Chrome、Firefox、Safari、Edge）均未定义或实现叫 “ElementCaptureAPI” 的接口。
实际可用的替代方案：使用 MediaRecorder + canvas + Element.getBoundingClientRect()
要录制网页中某个 DOM 元素（如一个 div、canvas 或视频区域）的视觉内容，主流且可行的方法是：
-
将目标元素绘制到 <canvas> 上（通过
drawImage或captureStream()配合OffscreenCanvas） -
从 canvas 获取媒体流（MediaStream），例如调用
canvas.captureStream(fps) - 用 MediaRecorder 录制该流，生成 WebM 或 MP4（需后端转封装）视频文件
关键限制与注意事项
直接“只录某个 DOM 区域”在浏览器中无法原生实现，因为 MediaRecorder 只能录制 MediaStream（来自摄像头、麦克风或 canvas），不能直接录制任意 DOM 节点。因此必须借助 canvas 做视觉捕获：
- 仅支持 静态视觉内容：文本、图片、SVG、CSS 动画（若 canvas 能重绘）；但 iframe 内容、跨域 canvas、部分 WebGL/Canvas2D 加速渲染可能受限或被污染
- 滚动区域需手动处理：若目标元素可滚动，需监听 scroll 并重新计算偏移，或使用
element.scrollIntoView()+ 离屏渲染 - 性能敏感：高频重绘（如 60fps）+ canvas 绘制 + 编码可能造成 CPU 占用升高，建议控制帧率（如 24–30fps）
- Safari 支持较晚：
canvas.captureStream()在 Safari 16.4+ 才稳定支持；旧版需降级为定时截图 + 合成 GIF/WebM（不推荐）
简易实现步骤（以 div 为例）
假设你要录制 id="target" 的 div：
立即学习“前端免费学习笔记（深入）”；
- 创建一个与目标元素尺寸一致的
<canvas>（隐藏或 offscreen） - 用
getBoundingClientRect()获取目标位置，并用ctx.drawImage(element, x, y, width, height)绘制（注意：仅适用于同源、非 iframe 内容） - 调用
canvas.captureStream(30)获取流 - 初始化
new MediaRecorder(stream)，监听dataavailable事件收集 blob 分片 - 停止录制后合并 blob，生成可下载的视频文件
更健壮的现代方案：使用 HTMLMediaElement.captureStream()（适合 video/audio）
如果目标区域本身是一个 <video> 或 <audio> 元素，可直接调用：
const stream = videoEl.captureStream(); // Chrome/Edge/Firefox 支持，Safari 有限支持
然后传给 MediaRecorder —— 这是真正“录制特定媒体元素”的标准方式，无需 canvas 中转，延迟更低、质量更好。
