HTML5 中不存在 ElementCapture API；可选方案包括：①用 rrweb 录制交互事件并回放；②用 getDisplayMedia + Canvas 裁剪合成视频；③用 Loom/OBS 等工具手动框选录制。
HTML5 中并没有名为 ElementCapture 的标准 API 或内置功能。目前（截至 2024 年），Web 平台原生不支持直接录制某个 DOM 元素（如在线编辑器）的独立操作画面，更不存在叫 ElementCapture 的规范接口。
你可能混淆了以下几种技术概念：
-
MediaRecorderAPI：用于录制媒体流（如摄像头、麦克风或整个屏幕/标签页），但不能只录“某个 div”； -
Canvas.captureStream()：可将<canvas></canvas>内容转为视频流，再用MediaRecorder录制，但仅适用于 canvas 渲染内容； -
IntersectionObserver/MutationObserver：可用于监听元素变化，但不是录制； - 第三方库（如
rrweb、logrocket）：能录制用户交互行为（DOM 变化 + 鼠标轨迹 + 输入事件），生成可回放的“操作录像”，但不是视频文件； - 浏览器扩展或桌面录屏工具（如 OBS、Loom）：可手动框选区域录制，但不属于 HTML5 原生能力。
✅ 如果你想「录制并分享在线编辑器的操作过程」，推荐以下实用路径：
? 方案一：用 rrweb 录制可回放的交互录像（轻量、精准、纯前端）
rrweb 是目前最接近“录制特定元素操作”的方案——它不录视频，而是记录 DOM 变化、鼠标移动、键盘输入等事件，再精准重放。
适用场景：调试协作、用户行为分析、教学演示（无需视频编码/上传）。
立即学习“前端免费学习笔记（深入）”；
简单实现步骤：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在编辑器容器上加唯一 ID，例如：
<div id="editor-container" contenteditable="true"></div>
- 引入 rrweb：
<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0/dist/rrweb.min.js"></script>
- 开始录制（限定在目标容器内）：
const events = []; const stopFn = rrweb.record({ emit(event) { // 过滤：只保留与 #editor-container 相关的事件（需自行判断 target） if (event.type === 3 && event.data.node?.id === 'editor-container') { events.push(event); } else if (event.type === 1 || event.type === 2) { // mouse/keyboard const target = event.data?.target?.id || event.data?.target?.closest?.('#editor-container'); if (target) events.push(event); } }, recordCanvas: false, // 关闭 canvas 录制（除非编辑器基于 canvas） }); - 停止后导出 JSON，用
rrweb-player播放：<div id="replay"></div> <script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0/dist/rrweb.min.js"></script> <script> new rrweb.Replayer(events, { target: document.getElementById('replay') }); </script>
⚠️ 注意：rrweb 默认录制全页面；如需聚焦编辑器，需配合
ignoreClass、自定义maskTextFn或服务端过滤，或使用rrweb-snapshot提取子树快照。
? 方案二：用 getDisplayMedia() + 裁剪 + Canvas 合成（近似“局部录制”）
若必须输出 MP4 视频，可通过浏览器录屏 + JS 实时裁剪目标区域（需同源且用户授权）：
- 调用
navigator.mediaDevices.getDisplayMedia({video: true})获取整个标签页流； - 创建
<canvas></canvas>，每帧绘制流中编辑器区域（用ctx.drawImage(video, x, y, w, h, 0, 0, w, h)）； - 将 canvas 转为
canvas.captureStream()，再用MediaRecorder录制； - 导出 blob 并上传/分享。
缺点：性能开销大、非精确像素级同步、无法分离音频、需用户手动选择“当前窗口”。
? 方案三：借助浏览器扩展或桌面工具（最简单可靠）
- 使用 Loom、OBS Studio 或 Chrome 扩展如 Nimbus Screenshot & Screen Video Recorder；
- 手动框选编辑器所在区域 → 录制 → 一键生成分享链接。
适合非开发人员或临时演示，无需写代码。
❌ 不要尝试的方向
- 搜索 “ElementCapture API” —— 不存在；
- 试图用
document.elementFromPoint()或getBoundingClientRect()直接截视频帧 —— 无法持续合成视频流； - 依赖已被废弃的
webkitGetUserMedia({video: {mediaElement: el}})—— 从未存在过。
如果你有具体编辑器类型（如 CodeMirror、Monaco、Quill、Draft.js），可以进一步提供，我能给出对应的最佳录制集成方式（比如监听其事件 + 快照 + rrweb 补充）。
