如何使用 JavaScript 录制指定 DOM 元素（如 div）的视频内容-html教程-PHP中文网

本文介绍如何精准录制网页中某个特定 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);
}

? 重要注意事项：

✅ 原生 drawImage() 的限制：ctx.drawImage(element, ...) 仅支持、
、
）。若目标区域含复杂 HTML，必须引入 html2canvas 预渲染：

const canvas = await html2canvas(targetDiv); const stream = canvas.captureStream(30);
✅ 样式与跨域：确保目标元素及其子资源（图片、字体）同源，否则 canvas 会因污染（tainted）而拒绝 captureStream() 调用。

✅ 性能提示：高频重绘（如动画 div）建议控制录制帧率（如 captureStream(15)），避免 CPU 过载；可配合 requestAnimationFrame 实现更平滑的流更新（进阶用法）。

✅ RecordRTC 兼容性：确保已正确引入 recordrtc（推荐 v5.6+），并处理 MediaRecorder 不可用时的降级逻辑。

总结而言，录制特定 DOM 元素的本质是「将不可录制的 HTML 视觉内容，转换为可流式传输的位图流」。Canvas 是桥梁，captureStream() 是关键接口，而 html2canvas 则是应对复杂 HTML 的必备补充工具。掌握这一组合方案，即可在无需后端介入的前提下，实现灵活、可控的前端局部视频录制。