HTML5 中不存在 CapturedSurfaceControl API；实际可行方案是：用 getDisplayMedia + MediaRecorder 录屏，通过 WebSocket 实现手机遥控滚动，滚动操作直接作用于被录屏页面 DOM，确保画面同步。
HTML5 中 没有 CapturedSurfaceControl 这个 API，它不是标准 Web API，也不属于 HTML5、WebRTC 或任何主流浏览器规范（截至 2026 年 4 月）。该名称在 Chromium、Firefox、Safari 或 MDN 文档中均无定义，也未出现在 W3C、WHATWG 或 WebRTC 标准草案中。
因此，无法通过 CapturedSurfaceControl 在录屏时远程控制网页滚动——因为它根本不存在。
那实际可行的方案是什么？
如果你的目标是：
✅ 在屏幕录制过程中（例如用 getDisplayMedia 录屏）
✅ 同时让另一台设备（如手机）远程触发网页滚动（如“下一页”“回到顶部”）
✅ 实现录屏画面中滚动行为同步发生
那么应采用以下标准、稳定、跨浏览器支持的技术组合：
✅ 1. 录屏：用 getDisplayMedia + MediaRecorder
- 调用
navigator.mediaDevices.getDisplayMedia({video: true})获取屏幕流 - 用
MediaRecorder编码为webm/mp4（需 HTTPS 或 localhost） - ✅ 已广泛支持（Chrome、Edge、Firefox；Safari 有限，移动端基本不支持）
✅ 2. 远程滚动控制：用 WebSocket 实时通信
- 搭建轻量 WebSocket 服务（如 Node.js +
ws库） - 主演示页（被录屏页面）建立连接并监听指令：
const socket = new WebSocket('wss://your-server.com'); socket.onmessage = (e) => { const { action } = JSON.parse(e.data); if (action === 'scrollToTop') { document.documentElement.scrollIntoView({ behavior: 'smooth' }); } else if (action === 'scrollDown') { window.scrollBy({ top: window.innerHeight * 0.8, behavior: 'smooth' }); } }; - 遥控端（手机网页）点击按钮发送对应指令：
socket.send(JSON.stringify({ action: 'scrollToTop' }));
? 注意：滚动操作发生在被录屏的页面 DOM 上，所以录屏画面会自然包含滚动动画，无需额外注入或 hack。
立即学习“前端免费学习笔记（深入）”；
✅ 3. 补充优化（提升体验）
- 使用
scroll-behavior: smooth（CSS 全局启用）统一滚动动效 - 对遥控指令加防抖，避免快速连点触发多次滚动
- 在演示页添加视觉反馈（如淡入提示“已滚动至顶部”），让用户确认操作生效
❌ 常见误解澄清
| 说法 | 真实情况 |
|---|---|
| “CapturedSurfaceControl 是 Chrome 的录屏控制接口” | 错误。Chrome 内部有 CapturedSurface 相关类（用于 compositor 层），但完全不暴露给网页 JS，开发者不可访问 |
| “可以用它监听/注入滚动事件到录屏流” | 不可能。录屏流是只读媒体数据（视频帧+音频包），无法从中捕获或干预 DOM 行为 |
| “Android WebView 或 Capacitor 有这个 API” | 无官方文档或源码佐证；属混淆了原生 Android SurfaceControl（系统级）与 Web API |
不复杂但容易忽略：录屏和滚动控制是两个正交能力——一个负责采集画面，一个负责驱动 DOM。它们只需在同一个页面上协同工作，无需底层耦合。
