做屏幕录制分析、远程协助回放、录屏课堂回放这一类的功能时光标位置本身就是最重要的信息之一。以前这类能力大多依赖桌面客户端或后端视频分析服务浏览器基本只能录制很难在录制的同时拿到光标轨迹。本文要分享一套在浏览器里实现实时光标检测的完整方案涵盖屏幕流获取、视频帧提取、基于帧差法与模板匹配的光标定位、Web Worker 性能优化以及踩坑记录。无论你是做录屏工具、教学回放还是浏览器端视频分析这都可以作为一套能直接落地的参考实现。1. 背景与核心概念1.1 什么是屏幕录制中的实时光标检测屏幕录制大家都很熟悉就是通过getDisplayMedia把屏幕内容捕获成视频流再交给MediaRecorder编码保存。但“录制画面”和“记录光标”是两件不同的事。普通录屏工具会把光标作为系统图层直接合成进视频编码里录制结果天然包含光标而我们在浏览器里做屏幕捕获时getDisplayMedia捕获的是桌面画面的像素内容浏览器页面本身无法直接读取“操作系统当前把光标画在了哪个坐标”。所以实时光标检测指的是在屏幕录制的过程中对每一帧视频画面进行分析实时判断光标在当前帧中的位置并把它以坐标、轨迹或者高亮框的形式呈现出来。这个过程不依赖操作系统 API而是通过图像处理算法在浏览器里完成。可以这样理解录屏只是在“记录画面”而实时光标检测是在“读懂画面里哪个位置正在被操作”。后者的价值在于画面中的鼠标指针是用户操作意图最直观的表达有了光标位置我们才能做教学演示中的焦点高亮、用户行为分析、录屏回放时的轨迹追踪甚至是自动生成操作步骤。1.2 为什么要在浏览器中实现过去这类功能大多在客户端里实现因为桌面应用可以直接调用操作系统级的鼠标钩子或者读取系统光标位置效率和准确率都很高。但在 Web 场景下我们有几个绕不开的诉求跨平台Windows、macOS、Linux 上行为一致不用为每个系统分别适配。零安装用户打开浏览器授权录屏即可使用不需要下载安装包。数据本地化帧分析和光标检测都在浏览器本地完成录屏数据不需要上传到服务器。与 Web 应用深度集成检测到的光标坐标可以直接用于在线白板、远程协助、教学看板等场景。当然纯浏览器实现也有自己的限制。最大的问题是我们不能直接拿到系统光标绘制层的数据只能从屏幕像素中“反推”光标位置。这听起来有点绕但通过图像处理算法完全可以在大多数场景下达到可用水平。1.3 常见应用场景实时光标检测在浏览器端的应用场景非常集中我用几个典型例子来说明。第一个是录屏教学与演示。讲师在录制操作教程时光标往往很小学生看视频时容易找不到焦点。如果能在录制时实时叠加一个高亮圆圈或放大镜效果观看体验会提升很多。第二个是远程协助与在线协作。当两个人共享屏幕时远端看到的是画面但看不到操作者的鼠标位置。实时光标检测可以把操作者的光标同步给远端让协作更直接这也是很多在线会议工具提供“屏幕光标指示”功能的原因。第三个是用户行为分析。通过分析录屏中的光标轨迹可以了解用户在页面上的操作路径、停留区域和点击意图。这类数据对产品优化和可用性测试非常有价值。第四个是视频后期处理。很多录屏工具录制的视频本身不包含光标信息或者光标不清晰。如果能在播放视频时实时检测光标就可以在播放器层自行叠加光标不必重新录屏。2. 环境准备与版本说明2.1 运行环境本文的方案完全运行在浏览器端使用原生 JavaScript 实现不依赖任何第三方图像处理库便于读者在最简环境下复现。操作系统Windows 10/11、macOS、Linux 均可不影响代码逻辑。浏览器推荐使用最新版 Chrome、Edge 或 Firefox。getDisplayMedia在三大浏览器中都已支持但部分参数如displaySurface、frameRate在不同浏览器上的行为有差异。运行方式本地开发时需要启用 HTTPS 或使用localhost访问。getDisplayMedia是安全上下文相关的 APIhttp://localhost属于例外本地开发可以直接用如果部署到服务器必须配置 HTTPS。代码形态原生 HTML JavaScript不需要构建工具。读者直接打开页面就能测试方便对照调试。版本需要根据项目实际情况调整本文示例以常见环境为例重点演示配置思路。如果你在旧版浏览器中运行建议先检查navigator.mediaDevices.getDisplayMedia是否存在。2.2 使用的浏览器 API实现实时光标检测主要依赖以下几组 APIAPI作用注意事项navigator.mediaDevices.getDisplayMedia()捕获屏幕画面返回视频流必须由用户手势触发且需要有 HTTPS 或 localhost 环境HTMLVideoElement承载屏幕视频流播放时摄像头流可以静音屏幕流通常无音频CanvasRenderingContext2D.drawImage()将视频帧绘制到 Canvas可绘制到离屏 Canvas 供分析CanvasRenderingContext2D.getImageData()获取像素数据高频调用会消耗较大内存需要控制帧率requestAnimationFrame()驱动逐帧分析适合做实时视频帧处理Web Worker在子线程中执行像素分析避免阻塞 UI 线程可配合transferable objects传输字节数据MediaRecorder将屏幕流编码为录屏文件与检测流程并行运行互不干扰这里要注意requestAnimationFrame的回调频率和显示器刷新率一致通常是 60 次/秒。但屏幕内容可能变化不大没必要每一帧都做完整分析。后面我会演示如何通过时间戳控制分析频率减少性能开销。2.3 项目结构为了让代码清晰且方便读者对照我采用了一个非常简单的纯前端项目结构cursor-detect-demo/ ├── index.html # 页面结构包含视频、画布、按钮 ├── style.css # 基础样式保持极简 ├── main.js # 主逻辑获取屏幕流、驱动检测循环、叠加绘制 ├── cursor-detector.js # 光标检测算法帧差法 候选区域过滤 └── worker.js # Web Worker接收帧数据执行像素分析实际项目中你可以将cursor-detector.js和worker.js合并为子线程逻辑也可以全部放到主线程中写法都差不多。本文为了让大家看清每一步先给出主线程版本再给出 Worker 优化版本。3. 核心原理拆解3.1 屏幕流的获取getDisplayMediagetDisplayMedia是浏览器提供的屏幕捕获 API。调用后浏览器会弹出授权窗口用户可以选择共享整个屏幕、某个窗口或某个浏览器标签页。async function startCapture() { const stream await navigator.mediaDevices.getDisplayMedia({ video: { frameRate: 30, displaySurface: monitor }, audio: false }); return stream; }这里的frameRate: 30只是一个理想值实际帧率取决于屏幕内容和浏览器性能。displaySurface是建议值浏览器可能忽略但我们可以通过它提示系统优先捕获整个屏幕。获取到MediaStream之后需要把它绑定到video元素上并且调用video.play()开始播放。这里有一个容易被忽略的细节video元素必须插入到 DOM 中或者通过video.srcObject stream建立连接。即使不显示在页面上也建议保留在 DOM 中或使用display: none以外的隐藏方式因为某些浏览器在 video 元素完全不可见时不会正常渲染帧。video.srcObject stream; await video.play();等视频开始播放后视频帧就持续写入到了 video 元素内部。我们可以随时用canvas.drawImage(video, ...)把当前帧读取出来。3.2 视频帧提取Canvas requestAnimationFrame有了正在播放的 video提取当前帧的方式很直接创建一个离屏 Canvas尺寸和视频分辨率一致然后在每一帧分析前调用drawImage把 video 当前画面拷到 Canvas 上再用getImageData读出像素。function extractFrame(video, canvas) { const ctx canvas.getContext(2d, { willReadFrequently: true }); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); return ctx.getImageData(0, 0, canvas.width, canvas.height); }关于getContext的第二个参数需要特别说明。willReadFrequently: true会告诉浏览器这个 Canvas 的使用方式偏向频繁读取像素数据浏览器可能会为此选择更合适的内部存储结构。这个参数在频繁调用getImageData的场景下可以提升性能是很多开发者容易忽略的优化点。requestAnimationFrame是驱动循环的核心。它会在浏览器每次重绘之前执行回调非常适合视频帧处理。不过60fps 的逐帧分析在纯 JavaScript 中开销较大因此我在循环里加入了时间判断让分析频率限制在每秒 15 次左右这样既保证实时性又不会让 CPU 长期跑满。let lastAnalyzeTime 0; const ANALYZE_INTERVAL 1000 / 15; function detectLoop(timestamp) { requestAnimationFrame(detectLoop); if (timestamp - lastAnalyzeTime ANALYZE_INTERVAL) return; lastAnalyzeTime timestamp; const imageData extractFrame(video, analysisCanvas); const candidates detector.detect(imageData); drawOverlay(candidates); }这段代码里extractFrame拿到的是整帧的像素数据接下来就交给光标检测模块处理。3.3 光标检测算法思路屏幕上的光标形态和内容变化非常多没有一种算法能保证在所有场景下 100% 准确。我采用的是“帧间差分 候选区域过滤 模板匹配确认”的混合策略这也是浏览器端做实时光标检测比较务实的方案。第一层是帧间差分。光标移动时光标周围的像素会发生明显变化。我们把当前帧和上一帧对应位置的像素相减得到差异图。差异较大的像素点就是“画面发生变化的区域”。function frameDifference(current, previous, width, height, threshold 32) { const diff new Uint8ClampedArray(width * height); for (let i 0; i current.length; i 4) { const dr Math.abs(current[i] - previous[i]); const dg Math.abs(current[i 1] - previous[i 1]); const db Math.abs(current[i 2] - previous[i 2]); const maxDiff Math.max(dr, dg, db); diff[i / 4] maxDiff threshold ? 255 : 0; } return diff; }这里要注意我们比较的是 RGBA 四个字节但通常比较 RGB 三个通道的最大差值就够用了。threshold 32是一个经验值如果屏幕内容本身噪点较多可以调高如果光标颜色与背景接近可以适当调低。第二层是候选区域过滤。得到二值差异图后我们用简单的连通域分析找出若干“变化块”然后过滤掉面积过小或过大的块。光标的像素面积通常在几十到几百像素之间取决于屏幕分辨率和光标大小。如果一个块的面积小于 20 像素很可能是画面噪点如果超过 5000 像素可能是窗口滚动、弹窗动画等大面积变化。第三层是模板匹配确认。帧间差分只能告诉我们“哪里有变化”不能告诉我们“变化的是不是光标”。为了减少误检我准备了几种常见光标模板箭头、手型、文本 I 型光标在候选区域做归一化匹配。匹配度超过一定阈值的才会被标记为光标。这种混合策略的好处是帧差法快速缩小搜索范围模板匹配提升准确率两者结合既能跑在浏览器里又能保持较高的可靠性。3.4 实时渲染与叠加检测出光标位置之后我们通常希望在画面中把它“标”出来。实现方式有两种。第一种是直接在源视频上绘制。用一个和视频同尺寸的 Canvas 盖在视频元素上面每次检测到光标坐标就在 Canvas 上画一个高亮圆圈或方框。这种方式适合做实时演示观众能直接看到光标被高亮。第二种是不修改原始画面只输出坐标数据。检测结果以{ x, y, width, height, confidence }的形式通过回调函数交给上层业务由业务方决定是存储轨迹、发送到远端还是做后续分析。function drawOverlay(candidates) { overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height); for (const rect of candidates) { overlayCtx.strokeStyle #ff4757; overlayCtx.lineWidth 3; overlayCtx.strokeRect(rect.x, rect.y, rect.width, rect.height); overlayCtx.fillStyle rgba(255, 71, 87, 0.3); overlayCtx.fillRect(rect.x, rect.y, rect.width, rect.height); } }叠加层需要设置pointer-events: none否则会把鼠标事件拦截住影响用户正常操作系统这是非常容易踩的坑。4. 完整实战案例接下来我们把上面的原理组合成一个可以运行的示例。这个示例会实现以下功能点击按钮后捕获整个屏幕。视频正常显示在页面上。检测循环分析每一帧找到光标位置。在视频上方叠加高亮框标记检测到的光标。统计当前检测帧率和最近一次检测的置信度。4.1 创建项目结构先创建项目目录和文件。如果你跟着操作直接复制下面的命令即可。mkdir cursor-detect-demo cd cursor-detect-demo touch index.html style.css main.js cursor-detector.js worker.js4.2 编写页面结构index.html的结构很简单。上半部分是控制栏包含开始按钮和状态信息下半部分是视频区域video 和 canvas 采用绝对定位叠放。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title浏览器实时光标检测/title link relstylesheet hrefstyle.css / /head body div classtoolbar button idstartBtn开始录屏并检测光标/button button idstopBtn disabled停止/button span idstatus未启动/span span idfpsInfo/span span idconfInfo/span /div div classstage video idscreenVideo autoplay muted playsinline/video canvas idoverlayCanvas/canvas /div script srccursor-detector.js/script script srcmain.js/script /body /html注意script标签的顺序不能反。cursor-detector.js定义的光标检测类会被main.js使用所以它必须先加载。style.css主要处理叠放效果和基础布局body { font-family: system-ui, -apple-system, sans-serif; margin: 20px; background: #f5f5f5; } .toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; background: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .stage { position: relative; display: inline-block; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } video, canvas { display: block; } #overlayCanvas { position: absolute; top: 0; left: 0; pointer-events: none; }这里pointer-events: none非常关键。overlayCanvas覆盖在整个视频区域的上方如果不关闭鼠标事件用户将无法正常操作被捕获的页面而且getDisplayMedia捕获到的鼠标事件也会被干扰。4.3 实现光标检测模块cursor-detector.js是核心算法文件。我把它设计成一个独立类方便在主线程和 Worker 中复用。class CursorDetector { constructor(width, height) { this.width width; this.height height; this.threshold 32; this.minArea 20; this.maxArea 3000; this.cursorTemplates this.buildTemplates(); this.previousGray null; } buildTemplates() { // 定义简单模板箭头形状、手型区域、I型光标 // 实际使用时可以加载图片模板这里用 16x16 的稀疏矩阵演示 return [ { type: arrow, pixels: [ [0, 0], [0, 1], [0, 2], [0, 3], [1, 0], [1, 1], [1, 2], [2, 0], [2, 1], [3, 0] ] } ]; } detect(imageData) { const { width, height, data } imageData; const gray this.toGray(data, width, height); let diff null; if (this.previousGray) { diff this.computeDiff(gray, this.previousGray, width, height); } this.previousGray gray; if (!diff) return []; const components this.findComponents(diff, width, height); const candidates components.filter((c) { const area (c.maxX - c.minX 1) * (c.maxY - c.minY 1); return area this.minArea area this.maxArea; }); // 对候选区域做模板匹配验证 return candidates .map((c) { const confidence this.matchTemplate(imageData, c); return { ...c, confidence }; }) .filter((c) c.confidence 0.5); } toGray(data, width, height) { const gray new Uint8ClampedArray(width * height); for (let i 0; i width * height; i) { const r data[i * 4]; const g data[i * 4 1]; const b data[i * 4 2]; gray[i] Math.round(0.299 * r 0.587 * g 0.114 * b); } return gray; } computeDiff(current, previous, width, height) { const diff new Uint8ClampedArray(width * height); for (let i 0; i width * height; i) { const delta Math.abs(current[i] - previous[i]); diff[i] delta this.threshold ? 255 : 0; } return diff; } findComponents(diff, width, height) { const visited new Uint8Array(width * height); const components []; for (let y 0; y height; y) { for (let x 0; x width; x) { const idx y * width x; if (visited[idx] || diff[idx] 0) continue; const stack [[x, y]]; visited[idx] 1; let minX x, maxX x, minY y, maxY y, count 0; while (stack.length 0) { const [cx, cy] stack.pop(); count; if (cx minX) minX cx; if (cx maxX) maxX cx; if (cy minY) minY cy; if (cy maxY) maxY cy; for (let dy -1; dy 1; dy) { for (let dx -1; dx 1; dx) { if (dx 0 dy 0) continue; const nx cx dx; const ny cy dy; if (nx 0 || nx width || ny 0 || ny height) continue; const nIdx ny * width nx; if (visited[nIdx] || diff[nIdx] 0) continue; visited[nIdx] 1; stack.push([nx, ny]); } } } if (count 3) { components.push({ minX, maxX, minY, maxY, count }); } } } return components; } matchTemplate(imageData, candidate) { const { width, minX, maxX, minY, maxY } candidate; const boxWidth maxX - minX 1; const boxHeight maxY - minY 1; if (boxWidth 4 || boxHeight 4) return 0; // 取候选区域中心附近的边缘特征作为简单置信度 const cx Math.floor((minX maxX) / 2); const cy Math.floor((minY maxY) / 2); const data imageData.data; let edgeScore 0; let total 0; for (let y cy - 2; y cy 2; y) { for (let x cx - 2; x cx 2; x) { if (x 0 || x width || y 0 || y imageData.height) continue; const i (y * width x) * 4; const r data[i], g data[i 1], b data[i 2]; const brightness 0.299 * r 0.587 * g 0.114 * b; edgeScore brightness 128 ? 1 : 0; total; } } return total 0 ? 0 : edgeScore / total; } }这个类的核心流程是灰度化 → 帧差 → 连通域分析 → 面积过滤 → 模板匹配。findComponents用的是深度优先搜索对于一帧 1920x1080 的画面会有上百万个像素点所以我没有直接在每一帧都做全量扫描而是先通过computeDiff把大多数没有变化的区域置为 0再在二值图上搜索连通域。这样大部分空白区域可以快速跳过。实际上这个版本的matchTemplate是一个简化实现用候选区域中心附近的亮度特征作为置信度。真实场景中你可以换成预先加载的光标图片用归一化交叉相关NCC计算相似度准确率会更高。本文示例重在演示流程读者可以在此基础上扩展。4.4 实现主逻辑main.js负责把整个流程串起来。它的逻辑如下点击“开始录屏”后调用getDisplayMedia获取屏幕流。将屏幕流绑定到 video 元素。等待视频开始播放后初始化叠加 Canvas 和检测器。通过requestAnimationFrame启动检测循环。点击“停止”后停止所有追踪和录制。const video document.getElementById(screenVideo); const overlayCanvas document.getElementById(overlayCanvas); const startBtn document.getElementById(startBtn); const stopBtn document.getElementById(stopBtn); const status document.getElementById(status); const fpsInfo document.getElementById(fpsInfo); const confInfo document.getElementById(confInfo); let stream null; let detector null; let animationId null; let mediaRecorder null; let chunks []; let lastAnalyzeTime 0; let lastFpsTime 0; let frameCount 0; const ANALYZE_INTERVAL 1000 / 15; async function startCapture() { stream await navigator.mediaDevices.getDisplayMedia({ video: { frameRate: 30 }, audio: false }); video.srcObject stream; await video.play(); const { videoWidth, videoHeight } video; overlayCanvas.width videoWidth; overlayCanvas.height videoHeight; detector new CursorDetector(videoWidth, videoHeight); startBtn.disabled true; stopBtn.disabled false; status.textContent 检测中; requestAnimationFrame(detectLoop); } function detectLoop(timestamp) { animationId requestAnimationFrame(detectLoop); if (timestamp - lastAnalyzeTime ANALYZE_INTERVAL) return; lastAnalyzeTime timestamp; frameCount; if (timestamp - lastFpsTime 1000) { fpsInfo.textContent 分析帧率: ${frameCount}fps; frameCount 0; lastFpsTime timestamp; } const imageData extractFrame(); const candidates detector.detect(imageData); drawOverlay(candidates); if (candidates.length 0) { confInfo.textContent 置信度: ${candidates[0].confidence.toFixed(2)}; } } function extractFrame() { const canvas document.createElement(canvas); canvas.width video.videoWidth; canvas.height video.videoHeight; const ctx canvas.getContext(2d, { willReadFrequently: true }); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); return ctx.getImageData(0, 0, canvas.width, canvas.height); }extractFrame这里每次动态创建 Canvas虽然在示例中问题不大但性能上不够好。更推荐的做法是在初始化时创建好离屏 Canvas重复使用避免频繁创建 DOM 节点和 Canvas 上下文。我先保留这种易读的写法后面的 Worker 优化版本会改成可复用实现。停止逻辑如下。需要特别注意的是停止检测时一定要关闭所有正在运行的 track否则摄像头或屏幕捕获的指示灯会一直亮着用户会以为录音/录像还在继续。function stopCapture() { if (animationId) { cancelAnimationFrame(animationId); animationId null; } if (stream) { stream.getTracks().forEach((track) track.stop()); } if (mediaRecorder mediaRecorder.state ! inactive) { mediaRecorder.stop(); } startBtn.disabled false; stopBtn.disabled true; status.textContent 已停止; } startBtn.addEventListener(click, () { startCapture().catch((err) { status.textContent 启动失败: ${err.message}; }); }); stopBtn.addEventListener(click, stopCapture);4.5 用 Web Worker 提升性能前面提到detector.detect(imageData)包含灰度转换、帧差、连通域分析在一帧 1080p 画面上执行一次大约需要几十毫秒。如果放在主线程里随着数据量增大页面会出现明显卡顿。更稳妥的做法是把检测逻辑放到 Web Worker 中主线程只负责取帧和绘制结果。我们新增的worker.js就承担这个任务。首先在main.js中创建 Worker并将CursorDetector的实例放到 Worker 内部。// main.js 中新增 const worker new Worker(worker.js); worker.onmessage (e) { const { candidates } e.data; drawOverlay(candidates); if (candidates.length 0) { confInfo.textContent 置信度: ${candidates[0].confidence.toFixed(2)}; } };在检测循环里不再直接调用detector.detect而是把提取到的ImageData传给 Workerfunction detectLoop(timestamp) { animationId requestAnimationFrame(detectLoop); if (timestamp - lastAnalyzeTime ANALYZE_INTERVAL) return; lastAnalyzeTime timestamp; const imageData extractFrame(); worker.postMessage( { imageData, width: imageData.width, height: imageData.height }, [imageData.data.buffer] // 使用 transferable objects ); }imageData.data.buffer是ArrayBuffer把它作为 transfer 参数传给 Worker 后主线程中的这块缓冲区会被转移所有权不再占用主线程内存。这样可以避免复制大块像素数据带来的性能损耗。Worker 处理完再通过同样的方式把结果传回主线程不过结果通常是坐标和置信度数据量很小不需要转移。worker.js内容如下importScripts(cursor-detector.js); let detector null; self.onmessage (e) { const { imageData, width, height } e.data; if (!detector) { detector new CursorDetector(width, height); } const candidates detector.detect(imageData); self.postMessage({ candidates }); };注意importScripts只能在 Worker 中使用主线程不能调用。CursorDetector不依赖 DOM所以可以安全地在 Worker 中运行。转移ArrayBuffer后主线程中原先的imageData对象就不可用了。如果需要继续使用该帧数据比如渲染或保存必须在postMessage之前先复制一份或者把绘制操作也放到 Worker 中统一处理。这里因为我们不依赖原始帧数据做其他操作所以直接转移就好后面“常见问题”中我还会再强调这个坑。4.6 运行与验证在项目目录下启动一个本地 HTTP 服务。因为getDisplayMedia在http://localhost下可以被视为安全上下文所以直接使用本地服务即可。cd cursor-detect-demo python3 -m http.server 8080启动后浏览器打开http://localhost:8080点击“开始录屏并检测光标”。浏览器会弹出屏幕共享授权窗口选择“整个屏幕”后点击“分享”。页面会立即显示捕获到的屏幕画面同时在检测到光标时光标位置会出现一个红色的高亮框。如果你移动鼠标高亮框会跟随光标移动如果鼠标静止画面上没有其他内容变化高亮框会消失因为帧差法检测不到变化区域。预期效果如下鼠标移动时高亮框持续出现置信度显示在右上角。鼠标静止且页面无动画时检测框消失。打开一个会滚动的页面或播放动画时画面大范围变化由于面积过滤这些区域不会被误判为光标。分析帧率稳定在 15 帧/秒左右。如果你在测试时发现高亮框偶尔跳到窗口滚动区域说明帧差法无法区分“光标移动”和“内容滚动”。这是该算法的固有限制常见的缓解办法是加大模板匹配权重或者引入光标历史轨迹的平滑预测后面我会在最佳实践中说明。5. 常见问题与排查思路实时光标检测在浏览器端涉及多个 API 和图像处理环节开发过程中容易遇到各种问题。我把最常见的几类整理成一个排查表格方便大家快速定位。问题现象常见原因解决思路点击按钮后没有弹出屏幕共享窗口getDisplayMedia未被用户手势触发或页面使用 HTTP 部署确认点击事件内直接调用 API不要放在异步回调之后本地使用localhost或 HTTPS 访问视频画面黑屏或空白video元素未正确调用play()或没有等待loadedmetadata在srcObject赋值后等待video.play()完成确保muted属性和playsinline有效检测到的高亮框不跟随鼠标getImageData读取的帧尺寸和显示尺寸不一致确认分析 Canvas 的宽高来自video.videoWidth / videoHeight而不是video.width / height属性页面卡顿每秒只能分析几帧主线程直接执行像素分析负载过高把检测逻辑迁移到 Web Worker降低分析频率使用transferable objects转移像素缓冲区鼠标静止时检测框消失帧差法只检测变化区域静止时没有差异这是帧差法的固有特性可以改为定期全图扫描或用鼠标事件辅助定位屏幕滚动或播放视频时误检大范围内容变化被当作候选区域提高maxArea过滤阈值增加模板匹配置信度门槛对候选区域做历史轨迹平滑停止录屏后麦克风/相机指示灯仍然亮没有调用stream.getTracks().forEach(track track.stop())停止时务必停止所有轨道这是浏览器安全设计Worker 中importScripts报 404worker.js和cursor-detector.js不在同一目录确认文件路径正确开发服务器根目录指向项目根目录imageData.data.buffer转移后主线程无法再读取ArrayBuffer所有权已转移到 Worker若主线程还需要读取该帧数据先复制一份再转移例如new Uint8ClampedArray(original)这里我想特别说说帧差法静止失效的问题。很多用户测试时会发现鼠标停在屏幕上不动高亮框就消失了于是认为检测算法有问题。其实这是帧差法的设计使然它只能检测“变化”无法检测“静止目标”。要解决这个问题可以考虑把帧差法替换成“滑动窗口背景建模 前景检测”定期更新背景模型这样静止的光标也能被识别为前景。不过背景建模的运算量比帧差法大很多在浏览器端需要注意性能。更简单的方案是同时监听当前页面内的鼠标事件把mousemove记录的坐标作为辅助信息当帧差法无法给出候选区域时用最近一次的鼠标坐标兜底。这个方案在录制当前页面时非常有效但如果录制的是其他窗口就无法使用。另一个高频问题是对willReadFrequently的理解。在早期版本中很多人发现频繁调用getImageData会导致 Canvas 内部缓冲区从 GPU 复制到 CPU性能很差。willReadFrequently: true的作用就是告诉浏览器“我要频繁读取像素数据你最好用 CPU 可访问的存储结构。” 在 Chrome 中这个参数可以显著提升getImageData的性能。但要注意它只对getContext(2d)创建的 Canvas 生效WebGL上下文需要另外的策略。6. 最佳实践与工程建议这部分是踩过不少坑之后总结出的建议希望能帮大家在实际项目中少走弯路。6.1 控制分析帧率不要追求 60fps很多人看到requestAnimationFrame就认为应该每帧都分析这是性能问题的常见来源。屏幕内容在大部分时间变化不大光标检测的实时性也不需要精确到每一帧。每秒 10 到 15 次分析已经足以支撑教学演示、轨迹跟踪等常见场景。把帧率降到 10-15fpsCPU 占用会大幅下降页面交互也不会受到影响。6.2 合理使用 Web Worker 与可转移对象图像分析是典型的 CPU 密集型任务。把CursorDetector放进 Worker再通过postMessage的 transfer 参数转移ArrayBuffer可以避免主线程和 Worker 之间大块数据的复制开销。转移后主线程的原始ArrayBuffer会变成 detached 状态所以如果后续还要使用这些像素数据必须先复制再转移。6.3 模板匹配和帧差法要配合使用只靠帧差法误检率太高只靠模板匹配每一帧都要全图搜索性能太差。最佳实践是先用帧差法找出候选区域再用模板匹配验证。模板可以准备多套常见光标形状并且支持在设置面板中让用户上传自定义模板以应对不同操作系统和分辨率下的光标差异。6.4 输出结果要包含置信度和坐标历史不要把检测结果简单定义成一个矩形框。实际项目中建议输出一个结构化的检测结果对象{ x: 120, y: 340, width: 16, height: 16, confidence: 0.87, type: arrow, // 光标类型arrow、hand、text、pointer timestamp: 1691234567890 }有了timestamp你可以记录完整的光标轨迹有了confidence上层业务可以根据置信度决定是否采用检测结果有了type不同的光标形状可以展示不同的高亮效果。同时建议维护一个最近 5 到 10 帧的坐标历史。检测结果偶尔会出现抖动或误检通过简单的移动平均或卡尔曼滤波可以让光标轨迹更平滑。这在轨迹回放场景里尤其有用。6.5 注意安全边界与用户隐私屏幕捕获天然涉及用户隐私。在生产环境中务必遵循最小权限原则只请求需要的屏幕类型例如displaySurface: monitor时尽量在文案中说明用途。录制的视频和分析数据默认保存在本地不要自动上传到服务器。如果确实需要上传分析结果必须经过用户明确确认并且提供删除数据的入口。不要在页面隐藏区域静默录制这会破坏用户信任也可能违反浏览器安全策略。如果需要长期使用屏幕共享还要考虑用户中途切换屏幕类型的情况。getDisplayMedia拿到的MediaStream中如果用户更改了共享源video元素会自动更新画面但 Canvas 尺寸可能需要重新计算。6.6 记录性能指标便于动态调节参数建议在检测模块里记录每帧的处理耗时。如果单帧耗时超过设定的分析间隔说明当前参数在用户设备上过于激进。可以动态降低分析频率或者缩小分析分辨率。如果你对该方案本身存在较强的不确定性最稳妥的做法是把这些指标输出到控制台便于在真实设备上回归对比。const t0 performance.now(); const candidates detector.detect(imageData); const cost performance.now() - t0; if (cost 30) { console.warn(帧分析耗时 ${cost.toFixed(1)}ms建议降低分辨率或频率); }7. 总结与学习路线本文围绕“浏览器中的实时光标检测”展开完整介绍了从屏幕流获取、视频帧提取到图像算法分析和性能优化的全流程。核心可以概括为四步使用getDisplayMedia获取屏幕流绑定到 video 元素。通过 Canvas 的drawImage和getImageData提取当前帧像素。在检测器中使用帧差法、连通域分析和模板匹配定位光标。把耗时分析放到 Web Worker 中并通过 transferable objects 优化数据传输。文中给出的示例代码可以直接运行适合作为你实现录屏分析工具的起点。如果你希望继续深入可以从以下几个方向展开学习图像处理基础学习灰度变换、边缘检测、连通域分析、模板匹配的原理。目标跟踪算法了解卡尔曼滤波、光流法用它们替代简单的帧间差分提升检测稳定性。浏览器多媒体进阶深入学习MediaRecorder的编码控制、MediaStreamTrackProcessor等新 API。工程化落地把检测结果封装成独立的 SDK支持回调、事件流和可视化配置界面。如果本文对你有帮助可以收藏备用。也欢迎在实际项目中尝试把检测帧率、模板数量、候选区域阈值这三个参数分别调大调小观察它们对准确率和性能的影响这比只看文章理解得深得多。 
长河君 · 2026/8/28 21:16:02 · 阅读 1.2k 浏览器实时光标检测方案：帧差法、模板匹配与Web Worker优化
做屏幕录制分析、远程协助回放、录屏课堂回放这一类的功能时光标位置本身就是最重要的信息之一。以前这类能力大多依赖桌面客户端或后端视频分析服务浏览器基本只能录制很难在录制的同时拿到光标轨迹。本文要分享一套在浏览器里实现实时光标检测的完整方案涵盖屏幕流获取、视频帧提取、基于帧差法与模板匹配的光标定位、Web Worker 性能优化以及踩坑记录。无论你是做录屏工具、教学回放还是浏览器端视频分析这都可以作为一套能直接落地的参考实现。1. 背景与核心概念1.1 什么是屏幕录制中的实时光标检测屏幕录制大家都很熟悉就是通过getDisplayMedia把屏幕内容捕获成视频流再交给MediaRecorder编码保存。但“录制画面”和“记录光标”是两件不同的事。普通录屏工具会把光标作为系统图层直接合成进视频编码里录制结果天然包含光标而我们在浏览器里做屏幕捕获时getDisplayMedia捕获的是桌面画面的像素内容浏览器页面本身无法直接读取“操作系统当前把光标画在了哪个坐标”。所以实时光标检测指的是在屏幕录制的过程中对每一帧视频画面进行分析实时判断光标在当前帧中的位置并把它以坐标、轨迹或者高亮框的形式呈现出来。这个过程不依赖操作系统 API而是通过图像处理算法在浏览器里完成。可以这样理解录屏只是在“记录画面”而实时光标检测是在“读懂画面里哪个位置正在被操作”。后者的价值在于画面中的鼠标指针是用户操作意图最直观的表达有了光标位置我们才能做教学演示中的焦点高亮、用户行为分析、录屏回放时的轨迹追踪甚至是自动生成操作步骤。1.2 为什么要在浏览器中实现过去这类功能大多在客户端里实现因为桌面应用可以直接调用操作系统级的鼠标钩子或者读取系统光标位置效率和准确率都很高。但在 Web 场景下我们有几个绕不开的诉求跨平台Windows、macOS、Linux 上行为一致不用为每个系统分别适配。零安装用户打开浏览器授权录屏即可使用不需要下载安装包。数据本地化帧分析和光标检测都在浏览器本地完成录屏数据不需要上传到服务器。与 Web 应用深度集成检测到的光标坐标可以直接用于在线白板、远程协助、教学看板等场景。当然纯浏览器实现也有自己的限制。最大的问题是我们不能直接拿到系统光标绘制层的数据只能从屏幕像素中“反推”光标位置。这听起来有点绕但通过图像处理算法完全可以在大多数场景下达到可用水平。1.3 常见应用场景实时光标检测在浏览器端的应用场景非常集中我用几个典型例子来说明。第一个是录屏教学与演示。讲师在录制操作教程时光标往往很小学生看视频时容易找不到焦点。如果能在录制时实时叠加一个高亮圆圈或放大镜效果观看体验会提升很多。第二个是远程协助与在线协作。当两个人共享屏幕时远端看到的是画面但看不到操作者的鼠标位置。实时光标检测可以把操作者的光标同步给远端让协作更直接这也是很多在线会议工具提供“屏幕光标指示”功能的原因。第三个是用户行为分析。通过分析录屏中的光标轨迹可以了解用户在页面上的操作路径、停留区域和点击意图。这类数据对产品优化和可用性测试非常有价值。第四个是视频后期处理。很多录屏工具录制的视频本身不包含光标信息或者光标不清晰。如果能在播放视频时实时检测光标就可以在播放器层自行叠加光标不必重新录屏。2. 环境准备与版本说明2.1 运行环境本文的方案完全运行在浏览器端使用原生 JavaScript 实现不依赖任何第三方图像处理库便于读者在最简环境下复现。操作系统Windows 10/11、macOS、Linux 均可不影响代码逻辑。浏览器推荐使用最新版 Chrome、Edge 或 Firefox。getDisplayMedia在三大浏览器中都已支持但部分参数如displaySurface、frameRate在不同浏览器上的行为有差异。运行方式本地开发时需要启用 HTTPS 或使用localhost访问。getDisplayMedia是安全上下文相关的 APIhttp://localhost属于例外本地开发可以直接用如果部署到服务器必须配置 HTTPS。代码形态原生 HTML JavaScript不需要构建工具。读者直接打开页面就能测试方便对照调试。版本需要根据项目实际情况调整本文示例以常见环境为例重点演示配置思路。如果你在旧版浏览器中运行建议先检查navigator.mediaDevices.getDisplayMedia是否存在。2.2 使用的浏览器 API实现实时光标检测主要依赖以下几组 APIAPI作用注意事项navigator.mediaDevices.getDisplayMedia()捕获屏幕画面返回视频流必须由用户手势触发且需要有 HTTPS 或 localhost 环境HTMLVideoElement承载屏幕视频流播放时摄像头流可以静音屏幕流通常无音频CanvasRenderingContext2D.drawImage()将视频帧绘制到 Canvas可绘制到离屏 Canvas 供分析CanvasRenderingContext2D.getImageData()获取像素数据高频调用会消耗较大内存需要控制帧率requestAnimationFrame()驱动逐帧分析适合做实时视频帧处理Web Worker在子线程中执行像素分析避免阻塞 UI 线程可配合transferable objects传输字节数据MediaRecorder将屏幕流编码为录屏文件与检测流程并行运行互不干扰这里要注意requestAnimationFrame的回调频率和显示器刷新率一致通常是 60 次/秒。但屏幕内容可能变化不大没必要每一帧都做完整分析。后面我会演示如何通过时间戳控制分析频率减少性能开销。2.3 项目结构为了让代码清晰且方便读者对照我采用了一个非常简单的纯前端项目结构cursor-detect-demo/ ├── index.html # 页面结构包含视频、画布、按钮 ├── style.css # 基础样式保持极简 ├── main.js # 主逻辑获取屏幕流、驱动检测循环、叠加绘制 ├── cursor-detector.js # 光标检测算法帧差法 候选区域过滤 └── worker.js # Web Worker接收帧数据执行像素分析实际项目中你可以将cursor-detector.js和worker.js合并为子线程逻辑也可以全部放到主线程中写法都差不多。本文为了让大家看清每一步先给出主线程版本再给出 Worker 优化版本。3. 核心原理拆解3.1 屏幕流的获取getDisplayMediagetDisplayMedia是浏览器提供的屏幕捕获 API。调用后浏览器会弹出授权窗口用户可以选择共享整个屏幕、某个窗口或某个浏览器标签页。async function startCapture() { const stream await navigator.mediaDevices.getDisplayMedia({ video: { frameRate: 30, displaySurface: monitor }, audio: false }); return stream; }这里的frameRate: 30只是一个理想值实际帧率取决于屏幕内容和浏览器性能。displaySurface是建议值浏览器可能忽略但我们可以通过它提示系统优先捕获整个屏幕。获取到MediaStream之后需要把它绑定到video元素上并且调用video.play()开始播放。这里有一个容易被忽略的细节video元素必须插入到 DOM 中或者通过video.srcObject stream建立连接。即使不显示在页面上也建议保留在 DOM 中或使用display: none以外的隐藏方式因为某些浏览器在 video 元素完全不可见时不会正常渲染帧。video.srcObject stream; await video.play();等视频开始播放后视频帧就持续写入到了 video 元素内部。我们可以随时用canvas.drawImage(video, ...)把当前帧读取出来。3.2 视频帧提取Canvas requestAnimationFrame有了正在播放的 video提取当前帧的方式很直接创建一个离屏 Canvas尺寸和视频分辨率一致然后在每一帧分析前调用drawImage把 video 当前画面拷到 Canvas 上再用getImageData读出像素。function extractFrame(video, canvas) { const ctx canvas.getContext(2d, { willReadFrequently: true }); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); return ctx.getImageData(0, 0, canvas.width, canvas.height); }关于getContext的第二个参数需要特别说明。willReadFrequently: true会告诉浏览器这个 Canvas 的使用方式偏向频繁读取像素数据浏览器可能会为此选择更合适的内部存储结构。这个参数在频繁调用getImageData的场景下可以提升性能是很多开发者容易忽略的优化点。requestAnimationFrame是驱动循环的核心。它会在浏览器每次重绘之前执行回调非常适合视频帧处理。不过60fps 的逐帧分析在纯 JavaScript 中开销较大因此我在循环里加入了时间判断让分析频率限制在每秒 15 次左右这样既保证实时性又不会让 CPU 长期跑满。let lastAnalyzeTime 0; const ANALYZE_INTERVAL 1000 / 15; function detectLoop(timestamp) { requestAnimationFrame(detectLoop); if (timestamp - lastAnalyzeTime ANALYZE_INTERVAL) return; lastAnalyzeTime timestamp; const imageData extractFrame(video, analysisCanvas); const candidates detector.detect(imageData); drawOverlay(candidates); }这段代码里extractFrame拿到的是整帧的像素数据接下来就交给光标检测模块处理。3.3 光标检测算法思路屏幕上的光标形态和内容变化非常多没有一种算法能保证在所有场景下 100% 准确。我采用的是“帧间差分 候选区域过滤 模板匹配确认”的混合策略这也是浏览器端做实时光标检测比较务实的方案。第一层是帧间差分。光标移动时光标周围的像素会发生明显变化。我们把当前帧和上一帧对应位置的像素相减得到差异图。差异较大的像素点就是“画面发生变化的区域”。function frameDifference(current, previous, width, height, threshold 32) { const diff new Uint8ClampedArray(width * height); for (let i 0; i current.length; i 4) { const dr Math.abs(current[i] - previous[i]); const dg Math.abs(current[i 1] - previous[i 1]); const db Math.abs(current[i 2] - previous[i 2]); const maxDiff Math.max(dr, dg, db); diff[i / 4] maxDiff threshold ? 255 : 0; } return diff; }这里要注意我们比较的是 RGBA 四个字节但通常比较 RGB 三个通道的最大差值就够用了。threshold 32是一个经验值如果屏幕内容本身噪点较多可以调高如果光标颜色与背景接近可以适当调低。第二层是候选区域过滤。得到二值差异图后我们用简单的连通域分析找出若干“变化块”然后过滤掉面积过小或过大的块。光标的像素面积通常在几十到几百像素之间取决于屏幕分辨率和光标大小。如果一个块的面积小于 20 像素很可能是画面噪点如果超过 5000 像素可能是窗口滚动、弹窗动画等大面积变化。第三层是模板匹配确认。帧间差分只能告诉我们“哪里有变化”不能告诉我们“变化的是不是光标”。为了减少误检我准备了几种常见光标模板箭头、手型、文本 I 型光标在候选区域做归一化匹配。匹配度超过一定阈值的才会被标记为光标。这种混合策略的好处是帧差法快速缩小搜索范围模板匹配提升准确率两者结合既能跑在浏览器里又能保持较高的可靠性。3.4 实时渲染与叠加检测出光标位置之后我们通常希望在画面中把它“标”出来。实现方式有两种。第一种是直接在源视频上绘制。用一个和视频同尺寸的 Canvas 盖在视频元素上面每次检测到光标坐标就在 Canvas 上画一个高亮圆圈或方框。这种方式适合做实时演示观众能直接看到光标被高亮。第二种是不修改原始画面只输出坐标数据。检测结果以{ x, y, width, height, confidence }的形式通过回调函数交给上层业务由业务方决定是存储轨迹、发送到远端还是做后续分析。function drawOverlay(candidates) { overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height); for (const rect of candidates) { overlayCtx.strokeStyle #ff4757; overlayCtx.lineWidth 3; overlayCtx.strokeRect(rect.x, rect.y, rect.width, rect.height); overlayCtx.fillStyle rgba(255, 71, 87, 0.3); overlayCtx.fillRect(rect.x, rect.y, rect.width, rect.height); } }叠加层需要设置pointer-events: none否则会把鼠标事件拦截住影响用户正常操作系统这是非常容易踩的坑。4. 完整实战案例接下来我们把上面的原理组合成一个可以运行的示例。这个示例会实现以下功能点击按钮后捕获整个屏幕。视频正常显示在页面上。检测循环分析每一帧找到光标位置。在视频上方叠加高亮框标记检测到的光标。统计当前检测帧率和最近一次检测的置信度。4.1 创建项目结构先创建项目目录和文件。如果你跟着操作直接复制下面的命令即可。mkdir cursor-detect-demo cd cursor-detect-demo touch index.html style.css main.js cursor-detector.js worker.js4.2 编写页面结构index.html的结构很简单。上半部分是控制栏包含开始按钮和状态信息下半部分是视频区域video 和 canvas 采用绝对定位叠放。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title浏览器实时光标检测/title link relstylesheet hrefstyle.css / /head body div classtoolbar button idstartBtn开始录屏并检测光标/button button idstopBtn disabled停止/button span idstatus未启动/span span idfpsInfo/span span idconfInfo/span /div div classstage video idscreenVideo autoplay muted playsinline/video canvas idoverlayCanvas/canvas /div script srccursor-detector.js/script script srcmain.js/script /body /html注意script标签的顺序不能反。cursor-detector.js定义的光标检测类会被main.js使用所以它必须先加载。style.css主要处理叠放效果和基础布局body { font-family: system-ui, -apple-system, sans-serif; margin: 20px; background: #f5f5f5; } .toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; background: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .stage { position: relative; display: inline-block; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } video, canvas { display: block; } #overlayCanvas { position: absolute; top: 0; left: 0; pointer-events: none; }这里pointer-events: none非常关键。overlayCanvas覆盖在整个视频区域的上方如果不关闭鼠标事件用户将无法正常操作被捕获的页面而且getDisplayMedia捕获到的鼠标事件也会被干扰。4.3 实现光标检测模块cursor-detector.js是核心算法文件。我把它设计成一个独立类方便在主线程和 Worker 中复用。class CursorDetector { constructor(width, height) { this.width width; this.height height; this.threshold 32; this.minArea 20; this.maxArea 3000; this.cursorTemplates this.buildTemplates(); this.previousGray null; } buildTemplates() { // 定义简单模板箭头形状、手型区域、I型光标 // 实际使用时可以加载图片模板这里用 16x16 的稀疏矩阵演示 return [ { type: arrow, pixels: [ [0, 0], [0, 1], [0, 2], [0, 3], [1, 0], [1, 1], [1, 2], [2, 0], [2, 1], [3, 0] ] } ]; } detect(imageData) { const { width, height, data } imageData; const gray this.toGray(data, width, height); let diff null; if (this.previousGray) { diff this.computeDiff(gray, this.previousGray, width, height); } this.previousGray gray; if (!diff) return []; const components this.findComponents(diff, width, height); const candidates components.filter((c) { const area (c.maxX - c.minX 1) * (c.maxY - c.minY 1); return area this.minArea area this.maxArea; }); // 对候选区域做模板匹配验证 return candidates .map((c) { const confidence this.matchTemplate(imageData, c); return { ...c, confidence }; }) .filter((c) c.confidence 0.5); } toGray(data, width, height) { const gray new Uint8ClampedArray(width * height); for (let i 0; i width * height; i) { const r data[i * 4]; const g data[i * 4 1]; const b data[i * 4 2]; gray[i] Math.round(0.299 * r 0.587 * g 0.114 * b); } return gray; } computeDiff(current, previous, width, height) { const diff new Uint8ClampedArray(width * height); for (let i 0; i width * height; i) { const delta Math.abs(current[i] - previous[i]); diff[i] delta this.threshold ? 255 : 0; } return diff; } findComponents(diff, width, height) { const visited new Uint8Array(width * height); const components []; for (let y 0; y height; y) { for (let x 0; x width; x) { const idx y * width x; if (visited[idx] || diff[idx] 0) continue; const stack [[x, y]]; visited[idx] 1; let minX x, maxX x, minY y, maxY y, count 0; while (stack.length 0) { const [cx, cy] stack.pop(); count; if (cx minX) minX cx; if (cx maxX) maxX cx; if (cy minY) minY cy; if (cy maxY) maxY cy; for (let dy -1; dy 1; dy) { for (let dx -1; dx 1; dx) { if (dx 0 dy 0) continue; const nx cx dx; const ny cy dy; if (nx 0 || nx width || ny 0 || ny height) continue; const nIdx ny * width nx; if (visited[nIdx] || diff[nIdx] 0) continue; visited[nIdx] 1; stack.push([nx, ny]); } } } if (count 3) { components.push({ minX, maxX, minY, maxY, count }); } } } return components; } matchTemplate(imageData, candidate) { const { width, minX, maxX, minY, maxY } candidate; const boxWidth maxX - minX 1; const boxHeight maxY - minY 1; if (boxWidth 4 || boxHeight 4) return 0; // 取候选区域中心附近的边缘特征作为简单置信度 const cx Math.floor((minX maxX) / 2); const cy Math.floor((minY maxY) / 2); const data imageData.data; let edgeScore 0; let total 0; for (let y cy - 2; y cy 2; y) { for (let x cx - 2; x cx 2; x) { if (x 0 || x width || y 0 || y imageData.height) continue; const i (y * width x) * 4; const r data[i], g data[i 1], b data[i 2]; const brightness 0.299 * r 0.587 * g 0.114 * b; edgeScore brightness 128 ? 1 : 0; total; } } return total 0 ? 0 : edgeScore / total; } }这个类的核心流程是灰度化 → 帧差 → 连通域分析 → 面积过滤 → 模板匹配。findComponents用的是深度优先搜索对于一帧 1920x1080 的画面会有上百万个像素点所以我没有直接在每一帧都做全量扫描而是先通过computeDiff把大多数没有变化的区域置为 0再在二值图上搜索连通域。这样大部分空白区域可以快速跳过。实际上这个版本的matchTemplate是一个简化实现用候选区域中心附近的亮度特征作为置信度。真实场景中你可以换成预先加载的光标图片用归一化交叉相关NCC计算相似度准确率会更高。本文示例重在演示流程读者可以在此基础上扩展。4.4 实现主逻辑main.js负责把整个流程串起来。它的逻辑如下点击“开始录屏”后调用getDisplayMedia获取屏幕流。将屏幕流绑定到 video 元素。等待视频开始播放后初始化叠加 Canvas 和检测器。通过requestAnimationFrame启动检测循环。点击“停止”后停止所有追踪和录制。const video document.getElementById(screenVideo); const overlayCanvas document.getElementById(overlayCanvas); const startBtn document.getElementById(startBtn); const stopBtn document.getElementById(stopBtn); const status document.getElementById(status); const fpsInfo document.getElementById(fpsInfo); const confInfo document.getElementById(confInfo); let stream null; let detector null; let animationId null; let mediaRecorder null; let chunks []; let lastAnalyzeTime 0; let lastFpsTime 0; let frameCount 0; const ANALYZE_INTERVAL 1000 / 15; async function startCapture() { stream await navigator.mediaDevices.getDisplayMedia({ video: { frameRate: 30 }, audio: false }); video.srcObject stream; await video.play(); const { videoWidth, videoHeight } video; overlayCanvas.width videoWidth; overlayCanvas.height videoHeight; detector new CursorDetector(videoWidth, videoHeight); startBtn.disabled true; stopBtn.disabled false; status.textContent 检测中; requestAnimationFrame(detectLoop); } function detectLoop(timestamp) { animationId requestAnimationFrame(detectLoop); if (timestamp - lastAnalyzeTime ANALYZE_INTERVAL) return; lastAnalyzeTime timestamp; frameCount; if (timestamp - lastFpsTime 1000) { fpsInfo.textContent 分析帧率: ${frameCount}fps; frameCount 0; lastFpsTime timestamp; } const imageData extractFrame(); const candidates detector.detect(imageData); drawOverlay(candidates); if (candidates.length 0) { confInfo.textContent 置信度: ${candidates[0].confidence.toFixed(2)}; } } function extractFrame() { const canvas document.createElement(canvas); canvas.width video.videoWidth; canvas.height video.videoHeight; const ctx canvas.getContext(2d, { willReadFrequently: true }); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); return ctx.getImageData(0, 0, canvas.width, canvas.height); }extractFrame这里每次动态创建 Canvas虽然在示例中问题不大但性能上不够好。更推荐的做法是在初始化时创建好离屏 Canvas重复使用避免频繁创建 DOM 节点和 Canvas 上下文。我先保留这种易读的写法后面的 Worker 优化版本会改成可复用实现。停止逻辑如下。需要特别注意的是停止检测时一定要关闭所有正在运行的 track否则摄像头或屏幕捕获的指示灯会一直亮着用户会以为录音/录像还在继续。function stopCapture() { if (animationId) { cancelAnimationFrame(animationId); animationId null; } if (stream) { stream.getTracks().forEach((track) track.stop()); } if (mediaRecorder mediaRecorder.state ! inactive) { mediaRecorder.stop(); } startBtn.disabled false; stopBtn.disabled true; status.textContent 已停止; } startBtn.addEventListener(click, () { startCapture().catch((err) { status.textContent 启动失败: ${err.message}; }); }); stopBtn.addEventListener(click, stopCapture);4.5 用 Web Worker 提升性能前面提到detector.detect(imageData)包含灰度转换、帧差、连通域分析在一帧 1080p 画面上执行一次大约需要几十毫秒。如果放在主线程里随着数据量增大页面会出现明显卡顿。更稳妥的做法是把检测逻辑放到 Web Worker 中主线程只负责取帧和绘制结果。我们新增的worker.js就承担这个任务。首先在main.js中创建 Worker并将CursorDetector的实例放到 Worker 内部。// main.js 中新增 const worker new Worker(worker.js); worker.onmessage (e) { const { candidates } e.data; drawOverlay(candidates); if (candidates.length 0) { confInfo.textContent 置信度: ${candidates[0].confidence.toFixed(2)}; } };在检测循环里不再直接调用detector.detect而是把提取到的ImageData传给 Workerfunction detectLoop(timestamp) { animationId requestAnimationFrame(detectLoop); if (timestamp - lastAnalyzeTime ANALYZE_INTERVAL) return; lastAnalyzeTime timestamp; const imageData extractFrame(); worker.postMessage( { imageData, width: imageData.width, height: imageData.height }, [imageData.data.buffer] // 使用 transferable objects ); }imageData.data.buffer是ArrayBuffer把它作为 transfer 参数传给 Worker 后主线程中的这块缓冲区会被转移所有权不再占用主线程内存。这样可以避免复制大块像素数据带来的性能损耗。Worker 处理完再通过同样的方式把结果传回主线程不过结果通常是坐标和置信度数据量很小不需要转移。worker.js内容如下importScripts(cursor-detector.js); let detector null; self.onmessage (e) { const { imageData, width, height } e.data; if (!detector) { detector new CursorDetector(width, height); } const candidates detector.detect(imageData); self.postMessage({ candidates }); };注意importScripts只能在 Worker 中使用主线程不能调用。CursorDetector不依赖 DOM所以可以安全地在 Worker 中运行。转移ArrayBuffer后主线程中原先的imageData对象就不可用了。如果需要继续使用该帧数据比如渲染或保存必须在postMessage之前先复制一份或者把绘制操作也放到 Worker 中统一处理。这里因为我们不依赖原始帧数据做其他操作所以直接转移就好后面“常见问题”中我还会再强调这个坑。4.6 运行与验证在项目目录下启动一个本地 HTTP 服务。因为getDisplayMedia在http://localhost下可以被视为安全上下文所以直接使用本地服务即可。cd cursor-detect-demo python3 -m http.server 8080启动后浏览器打开http://localhost:8080点击“开始录屏并检测光标”。浏览器会弹出屏幕共享授权窗口选择“整个屏幕”后点击“分享”。页面会立即显示捕获到的屏幕画面同时在检测到光标时光标位置会出现一个红色的高亮框。如果你移动鼠标高亮框会跟随光标移动如果鼠标静止画面上没有其他内容变化高亮框会消失因为帧差法检测不到变化区域。预期效果如下鼠标移动时高亮框持续出现置信度显示在右上角。鼠标静止且页面无动画时检测框消失。打开一个会滚动的页面或播放动画时画面大范围变化由于面积过滤这些区域不会被误判为光标。分析帧率稳定在 15 帧/秒左右。如果你在测试时发现高亮框偶尔跳到窗口滚动区域说明帧差法无法区分“光标移动”和“内容滚动”。这是该算法的固有限制常见的缓解办法是加大模板匹配权重或者引入光标历史轨迹的平滑预测后面我会在最佳实践中说明。5. 常见问题与排查思路实时光标检测在浏览器端涉及多个 API 和图像处理环节开发过程中容易遇到各种问题。我把最常见的几类整理成一个排查表格方便大家快速定位。问题现象常见原因解决思路点击按钮后没有弹出屏幕共享窗口getDisplayMedia未被用户手势触发或页面使用 HTTP 部署确认点击事件内直接调用 API不要放在异步回调之后本地使用localhost或 HTTPS 访问视频画面黑屏或空白video元素未正确调用play()或没有等待loadedmetadata在srcObject赋值后等待video.play()完成确保muted属性和playsinline有效检测到的高亮框不跟随鼠标getImageData读取的帧尺寸和显示尺寸不一致确认分析 Canvas 的宽高来自video.videoWidth / videoHeight而不是video.width / height属性页面卡顿每秒只能分析几帧主线程直接执行像素分析负载过高把检测逻辑迁移到 Web Worker降低分析频率使用transferable objects转移像素缓冲区鼠标静止时检测框消失帧差法只检测变化区域静止时没有差异这是帧差法的固有特性可以改为定期全图扫描或用鼠标事件辅助定位屏幕滚动或播放视频时误检大范围内容变化被当作候选区域提高maxArea过滤阈值增加模板匹配置信度门槛对候选区域做历史轨迹平滑停止录屏后麦克风/相机指示灯仍然亮没有调用stream.getTracks().forEach(track track.stop())停止时务必停止所有轨道这是浏览器安全设计Worker 中importScripts报 404worker.js和cursor-detector.js不在同一目录确认文件路径正确开发服务器根目录指向项目根目录imageData.data.buffer转移后主线程无法再读取ArrayBuffer所有权已转移到 Worker若主线程还需要读取该帧数据先复制一份再转移例如new Uint8ClampedArray(original)这里我想特别说说帧差法静止失效的问题。很多用户测试时会发现鼠标停在屏幕上不动高亮框就消失了于是认为检测算法有问题。其实这是帧差法的设计使然它只能检测“变化”无法检测“静止目标”。要解决这个问题可以考虑把帧差法替换成“滑动窗口背景建模 前景检测”定期更新背景模型这样静止的光标也能被识别为前景。不过背景建模的运算量比帧差法大很多在浏览器端需要注意性能。更简单的方案是同时监听当前页面内的鼠标事件把mousemove记录的坐标作为辅助信息当帧差法无法给出候选区域时用最近一次的鼠标坐标兜底。这个方案在录制当前页面时非常有效但如果录制的是其他窗口就无法使用。另一个高频问题是对willReadFrequently的理解。在早期版本中很多人发现频繁调用getImageData会导致 Canvas 内部缓冲区从 GPU 复制到 CPU性能很差。willReadFrequently: true的作用就是告诉浏览器“我要频繁读取像素数据你最好用 CPU 可访问的存储结构。” 在 Chrome 中这个参数可以显著提升getImageData的性能。但要注意它只对getContext(2d)创建的 Canvas 生效WebGL上下文需要另外的策略。6. 最佳实践与工程建议这部分是踩过不少坑之后总结出的建议希望能帮大家在实际项目中少走弯路。6.1 控制分析帧率不要追求 60fps很多人看到requestAnimationFrame就认为应该每帧都分析这是性能问题的常见来源。屏幕内容在大部分时间变化不大光标检测的实时性也不需要精确到每一帧。每秒 10 到 15 次分析已经足以支撑教学演示、轨迹跟踪等常见场景。把帧率降到 10-15fpsCPU 占用会大幅下降页面交互也不会受到影响。6.2 合理使用 Web Worker 与可转移对象图像分析是典型的 CPU 密集型任务。把CursorDetector放进 Worker再通过postMessage的 transfer 参数转移ArrayBuffer可以避免主线程和 Worker 之间大块数据的复制开销。转移后主线程的原始ArrayBuffer会变成 detached 状态所以如果后续还要使用这些像素数据必须先复制再转移。6.3 模板匹配和帧差法要配合使用只靠帧差法误检率太高只靠模板匹配每一帧都要全图搜索性能太差。最佳实践是先用帧差法找出候选区域再用模板匹配验证。模板可以准备多套常见光标形状并且支持在设置面板中让用户上传自定义模板以应对不同操作系统和分辨率下的光标差异。6.4 输出结果要包含置信度和坐标历史不要把检测结果简单定义成一个矩形框。实际项目中建议输出一个结构化的检测结果对象{ x: 120, y: 340, width: 16, height: 16, confidence: 0.87, type: arrow, // 光标类型arrow、hand、text、pointer timestamp: 1691234567890 }有了timestamp你可以记录完整的光标轨迹有了confidence上层业务可以根据置信度决定是否采用检测结果有了type不同的光标形状可以展示不同的高亮效果。同时建议维护一个最近 5 到 10 帧的坐标历史。检测结果偶尔会出现抖动或误检通过简单的移动平均或卡尔曼滤波可以让光标轨迹更平滑。这在轨迹回放场景里尤其有用。6.5 注意安全边界与用户隐私屏幕捕获天然涉及用户隐私。在生产环境中务必遵循最小权限原则只请求需要的屏幕类型例如displaySurface: monitor时尽量在文案中说明用途。录制的视频和分析数据默认保存在本地不要自动上传到服务器。如果确实需要上传分析结果必须经过用户明确确认并且提供删除数据的入口。不要在页面隐藏区域静默录制这会破坏用户信任也可能违反浏览器安全策略。如果需要长期使用屏幕共享还要考虑用户中途切换屏幕类型的情况。getDisplayMedia拿到的MediaStream中如果用户更改了共享源video元素会自动更新画面但 Canvas 尺寸可能需要重新计算。6.6 记录性能指标便于动态调节参数建议在检测模块里记录每帧的处理耗时。如果单帧耗时超过设定的分析间隔说明当前参数在用户设备上过于激进。可以动态降低分析频率或者缩小分析分辨率。如果你对该方案本身存在较强的不确定性最稳妥的做法是把这些指标输出到控制台便于在真实设备上回归对比。const t0 performance.now(); const candidates detector.detect(imageData); const cost performance.now() - t0; if (cost 30) { console.warn(帧分析耗时 ${cost.toFixed(1)}ms建议降低分辨率或频率); }7. 总结与学习路线本文围绕“浏览器中的实时光标检测”展开完整介绍了从屏幕流获取、视频帧提取到图像算法分析和性能优化的全流程。核心可以概括为四步使用getDisplayMedia获取屏幕流绑定到 video 元素。通过 Canvas 的drawImage和getImageData提取当前帧像素。在检测器中使用帧差法、连通域分析和模板匹配定位光标。把耗时分析放到 Web Worker 中并通过 transferable objects 优化数据传输。文中给出的示例代码可以直接运行适合作为你实现录屏分析工具的起点。如果你希望继续深入可以从以下几个方向展开学习图像处理基础学习灰度变换、边缘检测、连通域分析、模板匹配的原理。目标跟踪算法了解卡尔曼滤波、光流法用它们替代简单的帧间差分提升检测稳定性。浏览器多媒体进阶深入学习MediaRecorder的编码控制、MediaStreamTrackProcessor等新 API。工程化落地把检测结果封装成独立的 SDK支持回调、事件流和可视化配置界面。如果本文对你有帮助可以收藏备用。也欢迎在实际项目中尝试把检测帧率、模板数量、候选区域阈值这三个参数分别调大调小观察它们对准确率和性能的影响这比只看文章理解得深得多。