怎么使用HTML5中CapturedSurfaceControl在录屏时控制被录制页面的滚动-H5教程-PHP中文网

CapturedSurfaceControl 并非标准 Web API，不存在于任何浏览器规范中；录屏时控制滚动需在被录制页面内执行或通过 postMessage 跨页通信实现。

怎么使用html5中capturedsurfacecontrol在录屏时控制被录制页面的滚动

CapturedSurfaceControl 并不是 HTML5 标准的一部分，它并不存在于任何 W3C、WHATWG 或主流浏览器的规范中，目前（截至 2024 年）Chrome、Firefox、Safari 等浏览器均未实现名为 CapturedSurfaceControl 的 API。

你可能混淆了以下几种真实存在的概念：

✅ MediaStream 和 getDisplayMedia()：用于录屏（捕获屏幕、窗口或标签页）；
✅ ScrollToOptions / element.scrollIntoView() / window.scrollTo()：用于控制滚动；
❌ CapturedSurfaceControl：无此接口，不是 Web API，也不是 Chrome 实验性功能（查 Chromium 源码和 flags 均无记录）；
⚠️ 可能的误源：
- 将 Android 的 SurfaceControl（系统级图形 API）误认为 Web API；
- 将 WebRTC 中的 VideoTrack 或 CanvasCaptureMediaStreamTrack 控制逻辑张冠李戴；
- 或看到某篇过时/错误的技术博客、AI 生成内容中的虚构 API。

那么，录屏时如何“控制被录制页面的滚动”？

如果你的目标是：

在调用 navigator.mediaDevices.getDisplayMedia() 录制某个网页标签页时，同步滚动目标页面（比如自动翻页、定位到某区块），并让这些滚动动作被录下来，

这是完全可行的——但需在被录制的页面内主动执行滚动操作，而非通过录制端“遥控”它。因为 getDisplayMedia() 仅捕获画面和音频，不提供对源页面的控制权（出于安全隔离原则）。

✅ 正确做法：在被录制页面中自主滚动

1. 被录制页面需主动监听/触发滚动

例如，在你要录制的 HTML 页面中加入：

<script>
  // 自动滚动到指定元素（录制时可见）
  function scrollToSection(id) {
    const el = document.getElementById(id);
    if (el) {
      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }

  // 示例：3秒后滚动到 #chapter2
  setTimeout(() => scrollToSection('chapter2'), 3000);
</script>

? 录制端（如另一个标签页）无法直接调用这个函数——除非你通过 postMessage 等跨文档通信方式，且被录制页面显式监听并信任该消息源。

2. 安全前提：跨页面通信需双方配合

假设你有两个页面：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

recorder.html（发起录制）
target.html（被录制，含内容和滚动逻辑）

在 target.html 中添加：

<script>
  window.addEventListener('message', (e) => {
    // 仅接受可信来源（如 localhost:8080）
    if (e.origin !== 'http://localhost:8080') return;

    if (e.data.type === 'scrollTo' && e.data.selector) {
      const el = document.querySelector(e.data.selector);
      el?.scrollIntoView({ behavior: 'smooth' });
    }
  });
</script>

在 recorder.html 中（录制前）发送指令：

const targetWin = window.open('target.html', '_blank');
setTimeout(() => {
  targetWin.postMessage(
    { type: 'scrollTo', selector: '#step3' },
    'http://localhost:8080' // 匹配 target.html 的 origin
  );
}, 2000);

⚠️ 注意：window.open + postMessage 仅在同源或明确配置 CORS/allowed origins 下可靠工作；弹窗还可能被浏览器拦截。

3. 替代方案：用 `iframe` 内嵌并通信（更可控）

若 target.html 可嵌入 iframe：

<!-- recorder.html -->
<iframe id="demo-frame" src="target.html"></iframe>

<script>
  const frame = document.getElementById('demo-frame');
  frame.onload = () => {
    frame.contentWindow.postMessage(
      { type: 'scrollTo', selector: '.highlight' },
      '*'
    );
  };
</script>

对应 target.html 保持相同 postMessage 监听逻辑即可。