WebRTC屏幕录制中鼠标轨迹的精确同步方法

挑战：屏幕录制与鼠标轨迹同步

在使用webrtc的navigator.mediadevices.getdisplaymedia（或旧版getuserdisplay）api进行屏幕录制时，一个常见的需求是同步捕获用户的鼠标移动轨迹。例如，为了在后端对录制视频进行编辑或叠加鼠标光标，需要将鼠标的x、y坐标与视频的每一帧精确对应。然而，webrtc api本身并未提供直接的onframe事件或类似机制，使得开发者无法在每一视频帧生成时同步获取鼠标位置。

初次尝试可能会想到使用window.requestAnimationFrame来捕获鼠标位置，因为它能与浏览器渲染周期同步。但实践证明，requestAnimationFrame的回调频率与实际录制视频的帧率并不总是完全一致。例如，一个视频可能录制了570帧，而requestAnimationFrame的回调可能只产生了194个鼠标位置记录，这导致了数据量上的严重不匹配，无法实现帧级别的精确同步。

解决方案：基于时间戳的鼠标轨迹同步

由于技术上无法直接在每一录制帧上触发事件来捕获鼠标位置，并且不同设备的帧率可能存在差异，因此，将鼠标位置与视频帧严格按数量匹配并非最佳策略。更可靠的方法是基于时间同步。核心思想是：记录鼠标在某个特定时间点的位置，并确保这个时间点与视频录制的时间线保持一致。

这种方法的核心在于：

1. 启动计时器： 在视频录制开始的瞬间，启动一个计时器。
2. 定期捕获鼠标状态： 使用requestAnimationFrame()调度一个函数，该函数将定期记录鼠标的当前状态，包括：
   • timestamp_msec：自视频录制开始以来的毫秒数。
   • mouseX：鼠标的X坐标。
   • mouseY：鼠标的Y坐标。
   • mouseButtons：鼠标按键的状态。
3. 数据传输与后端处理： 将录制的视频流和包含上述对象的鼠标轨迹数组分别发送到后端。在后端，当视频播放到某个时间点（例如T毫秒）时，可以通过查找鼠标轨迹数组中时间戳小于或等于T的最近一个鼠标位置对象，从而实现鼠标位置与视频画面的同步。

为什么选择requestAnimationFrame结合时间戳？

尽管requestAnimationFrame的回调频率不一定与视频帧率完全匹配，但它提供了一个关键优势：它与浏览器的屏幕更新周期高度同步。这意味着当requestAnimationFrame回调触发时，浏览器正在准备绘制下一帧。此时捕获的鼠标位置，能够最准确地反映用户在当前屏幕更新时的鼠标状态。即使视频录制帧率高于requestAnimationFrame的频率，后端也可以通过时间戳找到最接近的鼠标位置，从而在视觉上达到平滑的同步效果。对于重复的视频帧（即连续几帧画面相同），匹配到同一个鼠标位置数据也是合理的。

快转字幕

新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。

357

查看详情

示例代码：前端实现鼠标轨迹捕获

以下是一个使用JavaScript实现鼠标轨迹捕获的示例代码：

let recordingStart = 0; // 记录视频录制开始的时间戳
let lastKnownMousePosition = {}; // 存储鼠标的最新位置和按键状态
const mousePositions = []; // 存储所有捕获到的鼠标位置数据

/**
 * 初始化鼠标事件监听，实时更新鼠标最新位置。
 */
window.addEventListener('mousemove', (event) => {
  lastKnownMousePosition = {
    mouseX: event.clientX,
    mouseY: event.clientY,
    mouseButtons: event.buttons,
  };
});

/**
 * 初始化鼠标按键事件监听，确保在鼠标静止时也能捕获按键状态变化。
 */
window.addEventListener('mousedown', (event) => {
  lastKnownMousePosition = {
    ...lastKnownMousePosition, // 保留现有位置
    mouseX: event.clientX, // 更新为按键时的精确位置
    mouseY: event.clientY,
    mouseButtons: event.buttons,
  };
});

window.addEventListener('mouseup', (event) => {
  lastKnownMousePosition = {
    ...lastKnownMousePosition, // 保留现有位置
    mouseX: event.clientX, // 更新为按键时的精确位置
    mouseY: event.clientY,
    mouseButtons: event.buttons,
  };
});


/**
 * requestAnimationFrame 回调函数，用于定期捕获鼠标位置和时间戳。
 */
const frameHandler = () => {
  // 仅当录制开始后才记录数据
  if (recordingStart === 0) {
    requestAnimationFrame(frameHandler);
    return;
  }

  const mousePosition = {
    // 计算相对于录制开始时间的相对时间戳（毫秒）
    timestamp: Date.now() - recordingStart,
    ...lastKnownMousePosition, // 包含最新的鼠标位置和按键状态
  };

  // 将捕获到的鼠标位置数据添加到数组中
  mousePositions.push(mousePosition);
  // console.log(mousePosition); // 可以在此处将数据发送到服务器

  // 继续调度下一次 requestAnimationFrame
  requestAnimationFrame(frameHandler);
};

/**
 * 启动录制时调用此函数。
 * 假设 mediaRecorder.start() 之后立即调用。
 */
function startRecordingAndMouseTracking() {
  recordingStart = Date.now(); // 设置录制开始时间
  // 启动 MediaRecorder...
  // mediaRecorder.start();

  // 启动鼠标轨迹捕获
  requestAnimationFrame(frameHandler);
  console.log("屏幕录制和鼠标轨迹捕获已启动！");
}

/**
 * 停止录制时调用此函数。
 */
function stopRecordingAndMouseTracking() {
  // 停止 MediaRecorder...
  // mediaRecorder.stop();

  // 重置状态
  recordingStart = 0;
  // 此时 mousePositions 数组包含了所有捕获到的鼠标轨迹数据，可以将其发送到后端
  console.log("鼠标轨迹数据:", mousePositions);
  // 清空数组以便下次录制
  mousePositions.length = 0;
}

// 示例：模拟启动和停止
// setTimeout(startRecordingAndMouseTracking, 1000);
// setTimeout(stopRecordingAndMouseTracking, 10000); // 模拟录制10秒

代码说明：

1. recordingStart: 这是一个关键变量，用于存储视频录制开始时的精确时间戳（通常在MediaRecorder.start()调用后立即设置）。所有鼠标位置的时间戳都将以此为基准计算相对时间。
2. lastKnownMousePosition: 通过监听mousemove、mousedown和mouseup事件，我们能实时获取并更新鼠标的最新位置和按键状态。这种方式确保了即使鼠标静止，其最新的按键状态也能被捕获。
3. frameHandler: 这是requestAnimationFrame的回调函数。
   • 它在每次浏览器渲染前被调用。
   • 在回调中，我们计算当前时间与recordingStart的差值，得到一个相对时间戳。
   • 将这个时间戳与lastKnownMousePosition合并，形成一个完整的鼠标事件对象。
   • 这个对象可以被推入一个数组（如mousePositions），或直接通过WebSocket等方式发送到后端。
   • 最后，它会递归调用requestAnimationFrame(frameHandler)，以持续捕获鼠标轨迹。
4. startRecordingAndMouseTracking(): 在实际应用中，当您开始屏幕录制（例如调用mediaRecorder.start()）时，应同时调用此函数来初始化recordingStart并启动鼠标轨迹捕获循环。
5. stopRecordingAndMouseTracking(): 停止录制时调用，可以停止MediaRecorder并处理收集到的mousePositions数据，例如将其发送到后端。

注意事项与最佳实践

• 数据量： requestAnimationFrame通常以显示器的刷新率（例如60Hz）触发，这意味着每秒会产生大量鼠标数据。对于长时间录制，需要考虑数据传输和存储的效率。可以考虑对数据进行压缩或采样。
• 后端同步逻辑： 在后端，当需要将鼠标轨迹叠加到视频上时，需要根据视频的当前播放时间（T）在mousePositions数组中查找最近的（时间戳小于等于T）鼠标位置。通常可以使用二分查找等高效算法来优化查找过程。
• 鼠标按键状态： event.buttons属性是一个位掩码，可以表示多个按键同时按下的状态。在后端解析时需要注意这一点。
• 网络传输： 收集到的mousePositions数组最终需要发送到后端。对于实时应用，可以通过WebSocket边录制边发送；对于非实时应用，可以在录制结束后一次性发送。
• 用户体验： 确保mousemove事件处理函数足够轻量，避免阻塞主线程，影响录制性能或用户体验。

总结

通过采用基于时间戳的同步策略，结合requestAnimationFrame来捕获鼠标状态，我们能够有效解决WebRTC屏幕录制中鼠标轨迹与视频帧同步的难题。这种方法不依赖于难以获得的onFrame事件，而是利用了时间作为统一的基准，确保了鼠标活动与屏幕更新的高度同步性。在远程桌面、教学录屏等需要精确重现用户交互的场景中，这种方法被证明是行之有效且鲁棒的解决方案。

以上就是WebRTC屏幕录制中鼠标轨迹的精确同步方法的详细内容，更多请关注php中文网其它相关文章！