如何利用浏览器API实现屏幕捕获与录制功能？-js教程-PHP中文网

如何利用浏览器API实现屏幕捕获与录制功能？

betcha

发布： 2025-09-26 14:20:01

原创

577人浏览过

通过调用getDisplayMedia()获取屏幕流并使用MediaRecorder录制，可实现浏览器端屏幕捕获与本地保存，需注意HTTPS环境、用户主动触发及浏览器兼容性限制。

如何利用浏览器api实现屏幕捕获与录制功能？

实现屏幕捕获与录制功能主要依赖浏览器提供的 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 将其录制为视频文件。

快转字幕

新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。

357

查看详情

示例代码：

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());
  }
};

登录后复制