之前在做录屏分析相关的浏览器小工具时最头疼的不是画面处理而是“如何知道鼠标光标在哪个位置”。录制出的视频里确实有光标但浏览器不会直接给我们一个“光标坐标流”。如果单纯靠肉眼去看视频越长越崩溃如果要做自动化标注、操作回放或者用户行为分析更需要准确的实时光标位置。网上的资料大多只讲了getDisplayMedia如何录屏很少有人把“实时检测光标位置”这一层讲透。这篇文章围绕一个很实在的方向展开在浏览器中实现屏幕录制视频流的实时光标检测。我会先梳理原理和技术选型再带着你从零实现一个可运行的 Demo最后补充常见报错和工程化建议。无论你是做录屏工具、远程协助、在线教学还是想研究浏览器端图像分析都能从中找到可以落地的思路。需要先说明的是本文所有实现都在浏览器本地完成不需要后端服务也不需要把录屏内容上传到任何服务器。请在受控环境、且获取用户明确授权的前提下使用屏幕捕获能力。1. 背景与核心概念1.1 什么是屏幕录制中的实时光标检测通俗来说屏幕录制中的实时光标检测就是当浏览器通过getDisplayMedia拿到屏幕视频流后在每一帧画面里分析出鼠标光标的坐标并且实时地绘制出高亮框、坐标信息或者其他可视化标注。这个问题看起来简单真正做起来并不容易。因为桌面端的鼠标光标并不是独立的一路视频轨它被直接画进了屏幕流里面。换句话说我们在视频帧里看到的光标本质上是画面中的一组像素。计算机要判断“这组像素是不是光标”“光标中心在哪里”就需要图像处理或计算机视觉的能力。从专业角度看可以把光标检测抽象成一个“目标检测”问题在候选区域中寻找与“光标模板”最相似的局部图像块。光标的形态比较固定在 Windows 下通常是白色箭头在 macOS 下可能是黑色箭头所以模板匹配是一个成本较低、容易实现的思路。再进阶一点可以用训练好的对象检测模型来识别光标但模型体积、计算耗时和部署复杂度都会显著上升。1.2 两条完全不同的技术路线在做这个功能之前还需要先想清楚一个问题我们要检测的光标是来自“已经录好的视频文件”还是来自“当前正在录制的屏幕流”这两种场景对应的方案完全不同。第一种是录制时事件采集。如果录制行为本身就在当前浏览器页面中发生我们可以在录屏的同时监听mousemove、mousedown等鼠标事件直接拿到非常精确的坐标。因为浏览器 DOM 事件天然会告诉我们鼠标位置不需要任何视觉算法。但这种方式只适用于“用户正在跟当前页面交互”的场景如果你录制的是系统的其他窗口或者用户操作的是另一个应用当前页面就收不到鼠标移动事件。第二种是视频帧图像识别。这是真正意义上的“实时光标检测”它不依赖 DOM 事件而是直接分析屏幕视频流里的像素。这样就算光标出现在其他窗口、其他应用甚至系统桌面上也可以被检测出来。本文的重点就是第二种路线。我们会用 Canvas 读取视频帧把彩色画面灰度化再用模板匹配算法定位光标。1.3 典型应用场景这个能力能用在很多实际项目中我整理了几个最容易落地的方向录屏教程自动标注录制软件操作教程时自动在高亮光标位置添加文字说明或放大镜效果减少后期剪辑工作量。用户行为分析分析用户点击路径和鼠标轨迹时不再依赖埋点而是直接分析屏幕录制画面中的光标移动轨迹适合做无侵入式的行为采集。UI 自动化测试报告生成自动化脚本执行过程中自动录屏并同步标注光标位置让最终生成的测试报告更直观。在线教学与远程协助实时强调当前鼠标位置帮助观众快速跟上讲解节奏。直播辅助工具主播可以在直播画面上叠加光标注提升演示体验。2. 技术基线与整体架构2.1 浏览器原生提供了哪些能力要在浏览器中完成这件事不需要安装额外的桌面软件只依赖 Web 平台上的一组成熟 API 就够了。navigator.mediaDevices.getDisplayMedia()调起系统屏幕共享选择器返回屏幕视频流。HTMLVideoElement用于播放获取到的屏幕流是后面每一帧分析的“数据源”。Canvas 2D API把视频帧绘制到画布上并通过getImageData()拿到像素数据。requestAnimationFrame以浏览器帧率为节拍循环处理视频帧实现“实时”效果。MediaRecorder如果需要把带光标标注的画面录制成视频可以用canvas.captureStream()结合MediaRecorder来实现。需要注意的是getDisplayMedia必须在安全上下文中使用。localhost默认是安全的线上环境则需要 HTTPS 页面。如果部署到非 HTTPS 环境浏览器会阻止屏幕捕获。2.2 整体处理链路实时光标检测可以拆成下面几个步骤用户点击“开始捕获”浏览器弹出屏幕共享选择器。拿到MediaStream后绑定到video元素并播放。循环读取当前视频帧绘制到一个小尺寸的 Canvas 上。调用getImageData()获取像素数据并转换成灰度图。在灰度图上执行模板匹配找到与光标模板最接近的坐标。将检测结果映射回原始视频分辨率并在覆盖层画布上绘制高亮框。不断循环直到用户停止捕获。为了性能分析用的 Canvas 不会直接使用原始分辨率而是先降采样到一个较小的宽度例如 480px 或 320px。这样既能保留足够的光标形状特征又能减少像素数量让浏览器端的计算负担可控。2.3 为什么优先在浏览器端实现有些方案会考虑把视频帧上传到服务器用 OpenCV 或深度学习模型去检测光标。这种方式确实能获得更强的算法能力但同时也带来了实时性、带宽、隐私三个问题。浏览器端实现的最大优势是“数据不出本地”用户屏幕内容包含大量敏感信息如果在本地完成检测不需要把帧数据传到任何第三方服务器隐私安全边界清晰很多。另外本地处理没有网络延迟检测结果可以随视频帧同步刷新特别适合“实时叠加光标框”这种交互场景。加上现代浏览器对 WebAssembly 的支持越来越成熟OpenCV.js、ONNX Runtime Web 等方案也能在浏览器里跑出不错的速度。3. 环境准备与浏览器兼容说明3.1 浏览器和运行环境这个 Demo 的核心 API 是getDisplayMedia目前 Chrome、Edge、Firefox 都提供了支持。但部分非标准参数在各个浏览器之间表现不一致所以测试的时候我建议优先使用最新版 Chrome 或 Edge。页面必须运行在安全上下文中也就是https://协议或http://localhost。如果你只是本地验证可以直接用 VS Code 的 Live Server 插件打开index.html或者使用npx serve起一个本地静态服务。3.2 可选依赖说明整个 Demo 不依赖任何第三方库用原生 HTML/CSS/JavaScript 就能跑起来。后面如果要做更复杂的光标识别可以考虑引入 OpenCV.js用它的matchTemplate函数做模板匹配算法效率和稳定性都会比手写朴素匹配好很多。但 OpenCV.js 的体积很大加载方式和版本迭代也比较快所以我不建议在入门 Demo 里直接引入。先用手写模板匹配理解原理等真正要做生产系统时再评估是否需要引入 OpenCV.js 或 TensorFlow.js。3.3 项目结构为了降低复制成本我把代码放到一个单文件index.html中包含样式和脚本。如果你后续要工程化开发可以很方便地拆分成style.css、main.js等独立文件。demo/ └── index.html4. 核心实现细节4.1 页面结构与交互设计页面主要包含四个区域控制按钮、视频播放区、覆盖层画布、检测信息展示区。视频播放区使用video元素显示原始录屏画面覆盖层画布通过绝对定位覆盖在视频上方专门用来绘制光标高亮框。控制按钮包含“开始屏幕捕获”和“停止”。点击开始时会调用getDisplayMedia用户授权后进入检测循环点击停止时停止所有轨道并恢复初始状态。这里有一个设计细节overlay画布必须设置pointer-events: none否则它会拦截鼠标事件导致覆盖层下方无法点击。4.2 屏幕捕获与光标约束在调用getDisplayMedia时可以通过video约束参数请求包含光标。Chrome 和 Edge 支持cursor: always意思是录屏时始终把鼠标光标绘制到视频流里。const constraints { video: { cursor: always, frameRate: { ideal: 30, max: 60 } }, audio: false }; stream await navigator.mediaDevices.getDisplayMedia(constraints);需要说明的是cursor并不是所有浏览器都支持的标准约束。在不支持的浏览器中这个参数会被忽略用户看到的屏幕流可能不包含光标。此时就需要退回到“基于鼠标事件采集坐标”的方案或者使用后处理视频文件的方式。4.3 视频帧降采样与灰度化为了提升检测性能我们不能直接在原始 1920x1080 分辨率下做像素遍历。先把视频帧绘制到一个较小的分析画布上例如宽度设为 480px高度按原始比例缩放。probe.width PROBE_WIDTH; probe.height Math.round(video.videoHeight * PROBE_WIDTH / video.videoWidth); probeCtx.drawImage(video, 0, 0, probe.width, probe.height); const imageData probeCtx.getImageData(0, 0, probe.width, probe.height);getImageData()返回的是ImageData对象其中data是Uint8ClampedArray按 RGBA 顺序存储。彩色像素有三个通道直接比较颜色会受到背景影响而且计算量大。所以我们可以先把 RGBA 转成灰度值function toGray(imageData, width, height) { const data imageData.data; const gray new Float32Array(width * height); for (let i 0; i width * height; i) { const offset i * 4; const r data[offset]; const g data[offset 1]; const b data[offset 2]; gray[i] (0.299 * r 0.587 * g 0.114 * b) / 255; } return gray; }灰度化之后每个像素只需要一个 0 到 1 之间的数值匹配计算量会减少到原来的三分之一左右。4.4 光标模板匹配模板匹配的思路并不复杂提前准备一个“光标形状”的小图像作为模板然后在视频帧中从左到右、从上到下滑动模板每次计算模板和当前窗口的相似度相似度最高的位置就是光标候选位置。实际匹配时我使用的是灰度图上的均方误差 MSE。模板中透明区域的像素不参与计算只有有颜色的像素才参与差异累加。如果某个窗口的 MSE 小于设定的阈值就认为匹配成功。示例代码如下function detectCursor(gray, width, height, prevPos) { const { size, data: tpl } cursorTemplate; let x0, y0, x1, y1; if (prevPos failCount MAX_FAIL_BEFORE_FULL_SCAN) { x0 Math.max(0, prevPos.x - SEARCH_RADIUS); y0 Math.max(0, prevPos.y - SEARCH_RADIUS); x1 Math.min(width - size, prevPos.x SEARCH_RADIUS); y1 Math.min(height - size, prevPos.y SEARCH_RADIUS); } else { x0 0; y0 0; x1 width - size; y1 height - size; } if (x1 x0 || y1 y0) return null; let bestScore Infinity; let bestX -1; let bestY -1; for (let y y0; y y1; y MATCH_STEP) { for (let x x0; x x1; x MATCH_STEP) { let sum 0; let count 0; for (let ty 0; ty size; ty) { const srcOffset (y ty) * width x; const tplOffset ty * size; for (let tx 0; tx size; tx) { const t tpl[tplOffset tx]; if (t 0) continue; const v gray[srcOffset tx]; const diff v - t; sum diff * diff; count; } } if (count 0) continue; const mse sum / count; if (mse bestScore) { bestScore mse; bestX x; bestY y; } } } if (bestScore THRESHOLD bestX 0) { return { x: bestX, y: bestY, score: bestScore }; } return null; }这里有一个工程上的优化点如果上一帧检测到了光标那么这一帧的光标大概率不会离太远所以只需要在上一次坐标附近的搜索窗口内匹配而不必每次全图扫描。如果连续几帧都没有检测到再扩大搜索范围避免光标突然跳到离上次位置很远的地方。4.5 结果叠加与视觉反馈检测到光标坐标后需要把坐标从分析画布的坐标系映射回原始视频分辨率否则绘制的位置会偏移。const originalX Math.round(result.x * video.videoWidth / probe.width); const originalY Math.round(result.y * video.videoHeight / probe.height);然后我们在覆盖层画布上绘制一个绿色方框和坐标文本function drawOverlay() { overlayCtx.clearRect(0, 0, overlay.width, overlay.height); if (!lastCursor) return; const x Math.round(lastCursor.x * video.videoWidth / probe.width); const y Math.round(lastCursor.y * video.videoHeight / probe.height); const boxSize 48; overlayCtx.lineWidth 3; overlayCtx.strokeStyle #00ff88; overlayCtx.strokeRect(x, y, boxSize, boxSize); overlayCtx.fillStyle rgba(0, 255, 136, 0.9); overlayCtx.font bold 14px sans-serif; overlayCtx.fillText((${x}, ${y}), x boxSize 6, y 16); }绿色方框的作用是给观察者一个明确的视觉反馈验证检测逻辑是否正确。4.6 鼠标事件采集的补充方案如果录制范围就是当前页面或者允许用户在页面上操作那么用mousemove事件直接记录坐标会稳定得多let localCursor { x: -1, y: -1 }; window.addEventListener(mousemove, (e) { localCursor.x e.clientX; localCursor.y e.clientY; });这种方式适合做“本地页面录制”场景例如网页演示工具、在线编辑器录屏等。它不受画面颜色、背景复杂度的影响准确度远高于图像匹配。但缺点是一旦光标准确的坐标无法通过 DOM 事件获取例如录制另一个程序窗口就必须回到图像识别方案。4.7 与 MediaRecorder 结合的可选能力如果你想把“带光标高亮框的视频”直接保存下来可以创建一个合成画布把video的原始画面和 overlay 的画框效果通过drawImage绘制到合成画布上然后用canvas.captureStream()生成新的视频流交给MediaRecorder录制。const composeCanvas document.getElementById(compose); const composeCtx composeCanvas.getContext(2d); const composeStream composeCanvas.captureStream(30); composeCtx.drawImage(video, 0, 0, composeCanvas.width, composeCanvas.height); composeCtx.drawImage(overlay, 0, 0);这种方案适合生成最终的录屏文件。需要注意的是合成画布的帧率会受浏览器性能影响如果画面清晰度要求很高建议把分析画布与合成画布分开避免互相干扰。5. 完整 Demo 项目代码下面是完整的单文件index.html复制到一个 HTML 文件中用现代浏览器打开点击“开始屏幕捕获”就能体验实时光标检测效果。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title浏览器实时光标检测 Demo/title style * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Microsoft YaHei, sans-serif; background: #f5f7fa; color: #333; margin: 0; padding: 20px; } .container { max-width: 960px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } h1 { font-size: 24px; margin-top: 0; } .tip { color: #555; line-height: 1.6; } .toolbar { margin: 16px 0; } button { margin-right: 8px; padding: 8px 18px; border: none; border-radius: 6px; background: #2563eb; color: #fff; font-size: 14px; cursor: pointer; } button:disabled { background: #cbd5e1; cursor: not-allowed; } button.stop { background: #dc2626; } .status { margin-left: 8px; color: #555; } .player { position: relative; width: 100%; border-radius: 8px; overflow