WebRTC屏幕录制中鼠标轨迹与视频帧同步的最佳实践

let recordingStartTime = 0; // 存储录制开始时间

// ... 在您的 getUserDisplay 或 getDisplayMedia 成功获取流之后
// ... 当您准备好开始录制时

// 假设 stream 是通过 getUserDisplay/getDisplayMedia 获取的 MediaStream
const mediaRecorder = new MediaRecorder(stream, {
  mimeType: 'video/webm',
  videoBitsPerSecond: 3000000
});

mediaRecorder.onstart = () => {
  recordingStartTime = Date.now(); // 记录录制开始的精确时间
  startMouseTracking(); // 启动鼠标轨迹跟踪
  console.log('录制开始，时间戳:', recordingStartTime);
};

// ... 其他 mediaRecorder 事件处理，如 ondataavailable, onstop 等

mediaRecorder.start(); // 启动录制

let lastKnownMousePosition = {
  mouseX: 0,
  mouseY: 0,
  mouseButtons: 0,
};
const mousePositions = []; // 存储所有捕获的鼠标位置数据

window.addEventListener('mousemove', (event) => {
  lastKnownMousePosition = {
    mouseX: event.clientX,
    mouseY: event.clientY,
    mouseButtons: event.buttons,
  };
});

function startMouseTracking() {
  const frameHandler = () => {
    // 只有当 recordingStartTime 已经被设置时才记录鼠标位置
    if (recordingStartTime > 0) {
      const mousePosition = {
        timestamp: Date.now() - recordingStartTime, // 相对录制开始的时间戳
        ...lastKnownMousePosition,
      };
      mousePositions.push(mousePosition);
      // 可以在此处将 mousePosition 发送到服务器，或者累积到 mousePositions 数组中
      console.log('捕获鼠标位置:', mousePosition);
      requestAnimationFrame(frameHandler); // 继续调度下一次捕获
    }
  };
  requestAnimationFrame(frameHandler); // 启动第一次捕获
}

// 当录制停止时，您可以将 mousePositions 数组发送到后端
mediaRecorder.onstop = () => {
  console.log('录制停止。捕获的鼠标轨迹数据:', mousePositions);
  // 在这里将 mousePositions 数组和录制的视频文件一起发送到后端
};

// 假设后端接收到 videoFile 和 mousePositionsArray
function getMousePositionAtTime(currentTimeMs, mousePositionsArray) {
  // 查找时间戳小于或等于 currentTimeMs 的最后一个鼠标位置
  let foundPosition = null;
  for (let i = 0; i < mousePositionsArray.length; i++) {
    if (mousePositionsArray[i].timestamp <= currentTimeMs) {
      foundPosition = mousePositionsArray[i];
    } else {
      // 因为数组是按时间排序的，一旦找到一个大于当前时间的，就可以停止
      break;
    }
  }
  return foundPosition;
}

// 在视频处理循环中，例如每处理一帧时
// let videoCurrentTimeMs = ... // 获取当前视频帧的播放时间
// let currentMousePos = getMousePositionAtTime(videoCurrentTimeMs, mousePositionsArray);
// if (currentMousePos) {
//   // 在当前视频帧上绘制光标，位置为 currentMousePos.mouseX, currentMousePos.mouseY
// }