本文介绍一种不依赖屏幕共享 api 的纯前端方案：通过 canvas 截取目标 div 的视觉内容并转为媒体流，再结合 recordrtc 实现精准录制，避免全屏选择干扰，适用于仪表盘、动画区域、交互组件等局部录制场景。
本文介绍一种不依赖屏幕共享 api 的纯前端方案：通过 canvas 截取目标 div 的视觉内容并转为媒体流，再结合 recordrtc 实现精准录制，避免全屏选择干扰，适用于仪表盘、动画区域、交互组件等局部录制场景。
在 Web 应用中，常需录制页面中某个特定区域（如数据看板、Canvas 动画、SVG 图表或富文本编辑区），而非整个屏幕。但 navigator.mediaDevices.getDisplayMedia() 本质是系统级屏幕捕获 API，强制触发用户选择窗口/标签页，无法限定到 DOM 节点——这正是原代码中“录了整屏”的根本原因。
正确思路是：将目标 div 渲染到 。该方法无需用户授权屏幕共享，完全可控且静默执行。
✅ 正确实现步骤（含关键细节）
获取目标元素并创建匹配尺寸的 canvas
注意使用 clientWidth/clientHeight（含 padding，不含 border/scrollbar），确保渲染无裁剪；若 div 含 transform 或 scale，需额外处理（见下方注意事项）。绘制 DOM 内容到 canvas
⚠️ context.drawImage(div, ...) 原生不支持直接绘制 HTML 元素！上述答案代码存在兼容性风险。实际应使用 html2canvas 库进行高保真截图：
<!-- 引入 html2canvas --> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
async function startRecording() {
const recorderBtn = document.getElementById('recorder'); // 避免变量名冲突
const targetDiv = document.getElementById('divToRecord');
if (!targetDiv) throw new Error('Target div not found');
recorderBtn.innerHTML = 'Stop recording';
// 使用 html2canvas 截图（支持 CSS、SVG、跨域图片等）
const canvas = await html2canvas(targetDiv, {
useCORS: true, // 允许跨域资源
logging: false, // 关闭调试日志
scale: window.devicePixelRatio // 提升高清屏清晰度
});
// 将 canvas 转为 MediaStream（帧率默认 30fps）
const stream = canvas.captureStream(30);
// 初始化 RecordRTC（需提前引入 recordrtc.min.js）
const recorder = new RecordRTCPromisesHandler(stream, {
type: 'video',
mimeType: 'video/webm;codecs=vp9' // 推荐 VP9，兼容性好且体积小
});
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 = 'div-recording.webm';
a.click();
URL.revokeObjectURL(url);
recorderBtn.innerHTML = 'Start recording';
}, 3000);
}
⚠️ 重要注意事项
- 动态内容限制：html2canvas 是静态快照，无法录制 CSS 动画、Video 标签播放、Canvas 实时绘图等动态效果。如需录制动画，需改用 requestAnimationFrame 循环截图并合成视频（复杂度高，建议评估是否真需此场景）。
- 样式兼容性：html2canvas 对 filter、backdrop-filter、clip-path 等现代 CSS 支持有限，测试时务必覆盖目标浏览器。
- 性能优化：高频截图（如 30fps）可能造成主线程压力。对静态内容，可降低帧率（如 captureStream(15)）；对滚动区域，建议暂停滚动后再录制。
- RecordRTC 替代方案：若项目已使用 MediaRecorder API，可直接 new MediaRecorder(stream)，无需引入 RecordRTC。
✅ 总结
录制指定 div 的核心在于绕过系统级屏幕捕获，转向 DOM 快照流化。html2canvas + canvas.captureStream() 是目前最成熟、兼容性最佳的方案。它赋予开发者对录制范围、时机和样式的完全控制权，是构建专业级 Web 录制功能（如教学演示、Bug 复现、UI 自动化报告）的可靠基础。务必根据实际内容动态性选择合适的技术路径，并始终在目标设备上实测渲染效果与性能表现。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
