挑战：屏幕录制与鼠标轨迹同步
在使用webrtc的navigator.mediadevices.getdisplaymedia（或旧版getuserdisplay）api进行屏幕录制时，一个常见的需求是同步捕获用户的鼠标移动轨迹。例如，为了在后端对录制视频进行编辑或叠加鼠标光标，需要将鼠标的x、y坐标与视频的每一帧精确对应。然而，webrtc api本身并未提供直接的onframe事件或类似机制，使得开发者无法在每一视频帧生成时同步获取鼠标位置。
初次尝试可能会想到使用window.requestAnimationFrame来捕获鼠标位置，因为它能与浏览器渲染周期同步。但实践证明，requestAnimationFrame的回调频率与实际录制视频的帧率并不总是完全一致。例如，一个视频可能录制了570帧，而requestAnimationFrame的回调可能只产生了194个鼠标位置记录，这导致了数据量上的严重不匹配，无法实现帧级别的精确同步。
解决方案：基于时间戳的鼠标轨迹同步
由于技术上无法直接在每一录制帧上触发事件来捕获鼠标位置，并且不同设备的帧率可能存在差异，因此，将鼠标位置与视频帧严格按数量匹配并非最佳策略。更可靠的方法是基于时间同步。核心思想是：记录鼠标在某个特定时间点的位置，并确保这个时间点与视频录制的时间线保持一致。
这种方法的核心在于：
- 启动计时器： 在视频录制开始的瞬间，启动一个计时器。
-
定期捕获鼠标状态： 使用requestAnimationFrame()调度一个函数，该函数将定期记录鼠标的当前状态，包括：
- timestamp_msec：自视频录制开始以来的毫秒数。
- mouseX：鼠标的X坐标。
- mouseY：鼠标的Y坐标。
- mouseButtons：鼠标按键的状态。
- 数据传输与后端处理： 将录制的视频流和包含上述对象的鼠标轨迹数组分别发送到后端。在后端，当视频播放到某个时间点（例如T毫秒）时，可以通过查找鼠标轨迹数组中时间戳小于或等于T的最近一个鼠标位置对象，从而实现鼠标位置与视频画面的同步。
为什么选择requestAnimationFrame结合时间戳？
尽管requestAnimationFrame的回调频率不一定与视频帧率完全匹配，但它提供了一个关键优势：它与浏览器的屏幕更新周期高度同步。这意味着当requestAnimationFrame回调触发时，浏览器正在准备绘制下一帧。此时捕获的鼠标位置，能够最准确地反映用户在当前屏幕更新时的鼠标状态。即使视频录制帧率高于requestAnimationFrame的频率，后端也可以通过时间戳找到最接近的鼠标位置，从而在视觉上达到平滑的同步效果。对于重复的视频帧（即连续几帧画面相同），匹配到同一个鼠标位置数据也是合理的。
示例代码：前端实现鼠标轨迹捕获
以下是一个使用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秒代码说明：
- recordingStart: 这是一个关键变量，用于存储视频录制开始时的精确时间戳（通常在MediaRecorder.start()调用后立即设置）。所有鼠标位置的时间戳都将以此为基准计算相对时间。
- lastKnownMousePosition: 通过监听mousemove、mousedown和mouseup事件，我们能实时获取并更新鼠标的最新位置和按键状态。这种方式确保了即使鼠标静止，其最新的按键状态也能被捕获。
-
frameHandler: 这是requestAnimationFrame的回调函数。
- 它在每次浏览器渲染前被调用。
- 在回调中，我们计算当前时间与recordingStart的差值，得到一个相对时间戳。
- 将这个时间戳与lastKnownMousePosition合并，形成一个完整的鼠标事件对象。
- 这个对象可以被推入一个数组（如mousePositions），或直接通过WebSocket等方式发送到后端。
- 最后，它会递归调用requestAnimationFrame(frameHandler)，以持续捕获鼠标轨迹。
- startRecordingAndMouseTracking(): 在实际应用中，当您开始屏幕录制（例如调用mediaRecorder.start()）时，应同时调用此函数来初始化recordingStart并启动鼠标轨迹捕获循环。
- stopRecordingAndMouseTracking(): 停止录制时调用，可以停止MediaRecorder并处理收集到的mousePositions数据，例如将其发送到后端。
注意事项与最佳实践
- 数据量： requestAnimationFrame通常以显示器的刷新率（例如60Hz）触发，这意味着每秒会产生大量鼠标数据。对于长时间录制，需要考虑数据传输和存储的效率。可以考虑对数据进行压缩或采样。
- 后端同步逻辑： 在后端，当需要将鼠标轨迹叠加到视频上时，需要根据视频的当前播放时间（T）在mousePositions数组中查找最近的（时间戳小于等于T）鼠标位置。通常可以使用二分查找等高效算法来优化查找过程。
- 鼠标按键状态： event.buttons属性是一个位掩码，可以表示多个按键同时按下的状态。在后端解析时需要注意这一点。
- 网络传输： 收集到的mousePositions数组最终需要发送到后端。对于实时应用，可以通过WebSocket边录制边发送；对于非实时应用，可以在录制结束后一次性发送。
- 用户体验： 确保mousemove事件处理函数足够轻量，避免阻塞主线程，影响录制性能或用户体验。
总结
通过采用基于时间戳的同步策略，结合requestAnimationFrame来捕获鼠标状态，我们能够有效解决WebRTC屏幕录制中鼠标轨迹与视频帧同步的难题。这种方法不依赖于难以获得的onFrame事件，而是利用了时间作为统一的基准，确保了鼠标活动与屏幕更新的高度同步性。在远程桌面、教学录屏等需要精确重现用户交互的场景中，这种方法被证明是行之有效且鲁棒的解决方案。
