本文介绍如何精准录制网页中某个特定 div 元素的视觉内容（而非全屏），通过 canvas 截图 + capturestream() 创建媒体流，再结合 recordrtc 实现无侵入式局部视频录制。
本文介绍如何精准录制网页中某个特定 div 元素的视觉内容（而非全屏），通过 canvas 截图 + capturestream() 创建媒体流，再结合 recordrtc 实现无侵入式局部视频录制。
在 Web 开发中，常需录制页面中某一块动态区域（例如一个数据看板、动画容器或交互式图表），而非整个屏幕。但直接调用 navigator.mediaDevices.getDisplayMedia() 会触发系统级屏幕选择弹窗，且只能捕获窗口/标签页级画面，无法限定到单个 DOM 元素——这正是原问题中遇到的核心限制。
解决方案的关键在于绕过屏幕捕获 API，转而利用 Canvas 的渲染能力对目标元素进行快照，并将其转化为实时媒体流。具体流程如下：
- 获取目标 元素（需确保其可渲染，即非 display: none 或 visibility: hidden）；
- 创建等尺寸
- 调用 canvas.captureStream(fps) 生成 MediaStream（支持帧率控制，默认 30fps）；
- 将该流传入 RecordRTC 进行编码与录制。
以下是完整、可运行的示例代码（已优化健壮性）：
async function startRecording() { const recorderBtn = document.getElementById('recorder'); // 假设按钮 ID 为 recorder const targetDiv = document.getElementById('divToRecord'); // 替换为你的 div ID if (!targetDiv) { console.error('目标 div 未找到，请检查 ID 是否正确'); return; } recorderBtn.textContent = '停止录制'; // 创建 canvas 并绘制 div 内容（注意：仅支持同源、可视、非 SVG 直接渲染） const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = targetDiv.clientWidth; canvas.height = targetDiv.clientHeight; // 使用 drawImage 捕获 div 快照（需 div 内容为 canvas 友好元素，如 img、video、其他 canvas） // ⚠️ 注意：普通 HTML 元素（如 div、p）无法直接 drawImage，需改用 html2canvas 等方案（见下文说明） try { ctx.drawImage(targetDiv, 0, 0, canvas.width, canvas.height); } catch (e) { console.warn('原生 drawImage 不支持 HTML 元素渲染，建议使用 html2canvas', e); return; } // 将 canvas 转为媒体流（关键步骤） const stream = canvas.captureStream(30); // 30fps 流 const recorder = new RecordRTCPromisesHandler(stream, { type: 'video' }); await recorder.startRecording(); // 示例：3 秒后自动停止（实际项目中应由用户点击控制） setTimeout(async () => { await recorder.stopRecording(); const blob = await recorder.getBlob(); // 下载录制结果 const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'recorded-div.mp4'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); recorderBtn.textContent = '开始录制'; }, 3000); }? 重要注意事项：
立即学习“Java免费学习笔记（深入）”；
✅ 原生 drawImage() 的限制：ctx.drawImage(element, ...) 仅支持
、
