HTML5MediaRecorder屏幕录屏保存教程

想要轻松实现网页屏幕录制并保存？本文为您详细解读HTML5 MediaRecorder API的妙用！通过`navigator.mediaDevices.getDisplayMedia`获取屏幕流，再利用`MediaRecorder`实例捕获视频数据，最终将录制内容转化为可下载的Blob文件。文章将深入讲解如何启用屏幕捕获、处理录制数据、生成可用视频文件，以及如何通过模拟点击下载链接的方式保存至本地。此外，还提供了添加录制控制按钮、实时状态反馈，以及处理音频与多源捕获的实用技巧，助您轻松打造功能完善的屏幕录制功能。立即学习，让网页录屏变得简单高效！

答案：使用HTML5的MediaRecorder API结合getDisplayMedia实现屏幕录制。首先调用navigator.mediaDevices.getDisplayMedia({video: true})获取屏幕流，创建MediaRecorder实例并监听dataavailable事件收集数据片段；录制结束后将chunks合并为Blob视频文件，通过URL.createObjectURL生成临时链接，创建隐藏a标签设置download属性并触发点击实现视频下载；提供开始/停止按钮控制录制状态，更新界面提示并关闭媒体流轨道；如需音频可启用audio: true，注意浏览器对系统声音的限制。

如果您希望在网页中实现屏幕录制功能，并将录制的视频保存为文件，可以使用HTML5的MediaRecorder API结合浏览器的屏幕捕获能力。以下是实现该功能的具体方法：

一、启用屏幕捕获并开始录制

通过调用 navigator.mediaDevices.getDisplayMedia() 方法，可以请求用户授权共享屏幕内容。获取到媒体流后，使用 MediaRecorder 进行录制。

1、调用 navigator.mediaDevices.getDisplayMedia({ video: true, audio: false }) 获取屏幕视频流。

2、检查浏览器是否支持此方法，若不支持可尝试使用 getUserMedia 配合特定约束。

3、成功获得流后，创建 MediaRecorder 实例：const recorder = new MediaRecorder(stream)。

4、监听 dataavailable 事件以收集录制的数据片段。

二、处理录制数据并生成可用文件

MediaRecorder 在停止时会触发 dataavailable 事件，返回包含音视频数据的 Blob 对象，可用于后续播放或下载。

1、在 recorder.ondataavailable 回调中接收 Blob 数据：event.data。

2、将所有数据片段存储到数组中，例如：let chunks = [];，并在事件中执行 chunks.push(event.data);。

3、当录制结束时，将所有片段合并为一个完整的 Blob：const completeBlob = new Blob(chunks, { type: 'video/webm' })。

三、保存录制视频到本地设备

通过创建临时 URL 并触发模拟点击下载链接的方式，可将录制的视频保存至用户本地磁盘。

1、使用 URL.createObjectURL(completeBlob) 为 Blob 创建可访问的 URL。

2、创建一个隐藏的 元素，并设置其 href 属性为上述 URL。