浏览器API实现屏幕录制方法解析

本文深入解析了如何利用浏览器原生API（getDisplayMedia和MediaRecorder）在前端实现轻量级屏幕录制功能，涵盖从请求用户授权、捕获屏幕流、实时录制到本地保存视频的完整流程，并强调了HTTPS环境、用户主动触发、跨浏览器兼容性（Chrome/Firefox支持良好，Safari及移动端受限）等关键实践要点，为开发录屏工具、在线教学或远程协作类应用提供了简洁可靠的技术方案。

实现屏幕捕获与录制功能主要依赖浏览器提供的 MediaDevices.getDisplayMedia() 和 MediaRecorder API。这两个API配合使用，可以捕获用户的屏幕内容并进行本地录制。

1. 请求屏幕捕获权限

通过 getDisplayMedia() 方法请求用户授权共享屏幕。与 getUserMedia() 不同，它专门用于捕获屏幕内容。

示例代码：

async function startCapture() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: false // 屏幕音频可能需要额外权限或系统支持
    });
    document.getElementById('video').srcObject = stream;
    return stream;
  } catch (err) {
    console.error("屏幕捕获失败:", err);
  }
}

2. 使用 MediaRecorder 录制视频流

获取到屏幕流后，使用 MediaRecorder 将其录制为视频文件。

示例代码：

let recorder;
let recordedChunks = [];

function startRecording(stream) {
  recordedChunks = [];
  recorder = new MediaRecorder(stream);

  recorder.ondataavailable = event => {
    if (event.data.size > 0) {
      recordedChunks.push(event.data);
    }
  };

  recorder.onstop = () => {
    const blob = new Blob(recordedChunks, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'screen-recording.webm';
    a.click();
  };

  recorder.start(100); // 每100ms生成一个数据块
}

3. 控制录制的开始与停止

绑定按钮事件来控制录制流程。

document.getElementById('startBtn').onclick = async () => {
  const stream = await startCapture();
  if (stream) startRecording(stream);
};

document.getElementById('stopBtn').onclick = () => {
  if (recorder && recorder.state !== 'inactive') {
    recorder.stop();
    // 停止所有轨道以释放资源
    const tracks = stream.getTracks();
    tracks.forEach(track => track.stop());
  }
};

4. 注意事项与兼容性

• 必须在 HTTPS 环境下运行，否则 API 无法使用
• 部分浏览器不支持捕获音频（如 Chrome 默认不录系统声音）
• 用户必须主动触发（如点击按钮）才能调用 getDisplayMedia()
• Firefox 和 Chrome 支持较好，Safari 部分支持
• 移动端支持有限，通常不可用

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《浏览器API实现屏幕录制方法解析》文章吧，也可关注golang学习网公众号了解相关技术文章。