前端网页录屏是怎么实现的

前端网页录屏主要通过浏览器提供的原生API实现，核心方案是利用 ‌WebRTC‌ 获取屏幕流，再通过 ‌MediaRecorder API‌ 将流录制为视频文件。此外，还有一种"无感 "方案，通过记录DOM变化来回放用户操作，而非直接录制视频。

以下是两种主流实现方式的详细说明：

1. 有感录屏：录制屏幕视频流（最常用）

这是目前最主流、兼容性最好的方案，用户能明确感知并授权录屏过程。它分为三个核心步骤：

**‌获取屏幕流‌：使用 navigator.mediaDevices.getDisplayMedia() 方法，向用户请求权限，以捕获整个屏幕、特定窗口或浏览器标签页的视频流（可选包含系统音频）。
‌ 录制媒体流‌：**使用 MediaRecorder 对象，将获取到的视频流（MediaStream）录制为二进制数据块（Chunks）。
‌生成并下载视频‌ ：录制结束后，将所有数据块合并成一个 Blob 对象，生成一个临时URL，并创建一个下载链接供用户保存为视频文件（通常为WebM格式）。

‌核心代码示例：

javascript 复制代码

// 开始录制
async function startRecording() {
  try {
    // 1. 请求屏幕流
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { cursor: "always" }, // 显示鼠标指针
      audio: true // 录制系统声音
    });

    // 2. 初始化MediaRecorder
    const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9') ? 'video/webm;codecs=vp9' : 'video/webm';
    const mediaRecorder = new MediaRecorder(stream, { mimeType });
    const chunks = [];

    // 3. 收集录制数据
    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) chunks.push(event.data);
    };

    // 4. 停止录制并生成文件
    mediaRecorder.onstop = () => {
      const blob = new Blob(chunks, { type: mimeType });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `recording-${Date.now()}.webm`;
      a.click();
      URL.revokeObjectURL(url); // 释放内存
    };

    mediaRecorder.start();
    return { stream, mediaRecorder }; // 保留引用以便停止
  } catch (err) {
    console.error('录屏失败:', err);
  }
}

// 停止录制
function stopRecording(mediaRecorder) {
  mediaRecorder.stop();
}

关键注意事项：‌

‌用户授权‌ ：getDisplayMedia() 必须由用户的主动操作 （如点击按钮）触发，浏览器才会弹出授权窗口。
‌安全环境‌ ：该API仅在 HTTPS 或 localhost 环境下可用。

‌浏览器兼容性‌ ：Chrome、Firefox、Edge 等现代浏览器均支持，但 Safari 对部分编码格式（如VP9）支持有限，需提供降级方案（如回退到 video/webm）。
‌资源释放‌ ：录制结束后，务必调用 stream.getTracks().forEach(track => track.stop()) 关闭媒体流，防止内存泄漏。

2. 无感录屏：记录DOM操作（用于行为分析）

这种方案不直接录制视频，而是通过监听和记录页面DOM结构的变化（如元素增删、属性修改、鼠标移动、输入等），将这些操作序列化为JSON数据。回放时，再将这些JSON数据重新构建出用户操作的完整过程。

‌核心优势：‌

‌轻量化‌ ：JSON数据量远小于视频文件，网络传输和存储成本极低。
‌无感知‌ ：用户完全不会察觉到被录制，适用于用户行为分析、线上Bug复现等场景。
‌主流工具 ：rrweb‌

rrweb 是一个开源的、功能强大的库，专门为此类需求设计。它由三部分组成：

‌rrweb-snapshot‌：将页面DOM快照序列化为JSON。

‌rrweb‌：记录DOM的增量变化事件。

‌rrweb-player‌：用于回放录制的事件流。

‌核心代码示例：

javascript 复制代码

import { record } from 'rrweb';

// 录制
const events = [];
const stopRecording = record({
  emit(event) {
    events.push(event); // 将每个操作事件存入数组
  },
  recordCanvas: true, // 记录canvas内容
  collectFonts: true // 收集字体
});

// 回放
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

new rrwebPlayer({
  target: document.getElementById('player'), // 回放容器
  props: {
    events: events // 传入录制的事件数组
  }
});

‌适用场景：‌

监控用户在网站上的操作路径，用于产品优化。

在线上应用出现Bug时，录制用户操作流程，帮助开发者精准复现问题。

在线考试监考（记录用户行为而非屏幕画面）。
‌总结：‌

如果你需要‌录制视频文件‌用于分享、存档，应选择 ‌MediaRecorder + getDisplayMedia‌ 方案。

如果你需要‌分析用户行为‌、‌复现线上Bug‌，且希望‌轻量、无感知‌，则应选择 ‌rrweb‌ 等DOM录制方案