如何使用JavaScript/JQuery录制指定div元素内容？

当然可以实现指定div的录制，你之前用getDisplayMedia的方式是捕获整个屏幕/窗口，不符合需求的话，换用Canvas渲染+媒体流捕获的思路就行——把目标div的内容渲染到Canvas，再将Canvas转为MediaStream，最后用RecordRTC录制这个流。

核心实现方案 #

1. 简单内容录制（原生Canvas） #

如果你的div只有基础文本、图片，没有复杂CSS（比如阴影、圆角、渐变），可以直接用Canvas的drawImage方法渲染div：

async function startRecordingDiv() {
  // 替换成你的目标div ID
  const targetDiv = document.getElementById('target-div');
  const canvas = document.createElement('canvas');
  
  // 匹配div的宽高
  canvas.width = targetDiv.offsetWidth;
  canvas.height = targetDiv.offsetHeight;
  const ctx = canvas.getContext('2d');

  // 将div绘制到Canvas
  ctx.drawImage(targetDiv, 0, 0);

  // 捕获Canvas的媒体流（设置帧率为30）
  const canvasStream = canvas.captureStream(30);

  // 初始化RecordRTC录制这个流
  const recorder = new RecordRTCPromisesHandler(canvasStream, {
    type: 'video'
  });

  recorder.startRecording();
  console.log('开始录制指定div');

  // 模拟录制3秒后停止并下载
  setTimeout(async () => {
    await recorder.stopRecording();
    const blob = await recorder.getBlob();
    
    // 生成下载链接
    const url = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = 'div-recording.mp4';
    downloadLink.click();
    
    // 释放资源
    URL.revokeObjectURL(url);
  }, 3000);
}

2. 复杂内容录制（结合html2canvas） #

如果div包含复杂样式（比如圆角、阴影）、动态元素或iframe，原生Canvas的drawImage会失效，这时候用html2canvas库来渲染div更可靠：

// 先确保引入html2canvas库（可下载到本地使用）
async function startRecordingComplexDiv() {
  const targetDiv = document.getElementById('target-div');
  const canvas = document.createElement('canvas');
  
  // 用html2canvas将div渲染为Canvas元素
  const renderedCanvas = await html2canvas(targetDiv);
  
  // 同步Canvas尺寸
  canvas.width = renderedCanvas.width;
  canvas.height = renderedCanvas.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(renderedCanvas, 0, 0);

  // 捕获Canvas流并录制
  const canvasStream = canvas.captureStream(30);
  const recorder = new RecordRTCPromisesHandler(canvasStream, {
    type: 'video'
  });

  recorder.startRecording();
  console.log('开始录制复杂内容div');

  // 停止录制并下载
  setTimeout(async () => {
    await recorder.stopRecording();
    const blob = await recorder.getBlob();
    
    const url = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = 'complex-div-recording.mp4';
    downloadLink.click();
    
    URL.revokeObjectURL(url);
  }, 3000);
}

关键注意事项 #

• 动态内容更新：如果要录制div里的动画或用户交互，需要用requestAnimationFrame循环调用渲染逻辑，实时更新Canvas内容，比如：

  function updateCanvas() {
    ctx.drawImage(targetDiv, 0, 0);
    requestAnimationFrame(updateCanvas);
  }
  updateCanvas();
  

• 音频录制：如果需要同时捕获页面音频，可以结合navigator.mediaDevices.getUserMedia获取音频流，再把音频轨添加到Canvas流中：

  const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  audioStream.getTracks().forEach(track => canvasStream.addTrack(track));
  

• RecordRTC配置：可以根据需求调整录制参数，比如设置mimeType: 'video/webm'来生成WebM格式的视频，或者添加audio: true（如果已添加音频轨）。

内容的提问来源于stack exchange，提问作者cedrik