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

18次阅读

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

实现屏幕捕获与录制功能主要依赖浏览器提供的 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());   } };