javaScript可通过MediaRecorder API配合getDisplayMedia()实现浏览器内屏幕录制,需用户授权且仅限https或localhost安全上下文,须在用户手势触发下调用,支持chrome、edge、firefox,safari暂不支持。

javascript 本身不能直接录制屏幕,但可以通过 MediaRecorder API 配合 getDisplayMedia() 获取屏幕流,实现浏览器内的屏幕录制。这个功能需要用户主动授权,且仅在安全上下文(https 或 localhost)中可用。
获取屏幕媒体流
调用 navigator.mediaDevices.getDisplayMedia() 请求用户选择要共享的屏幕、窗口或标签页。它返回一个 promise,成功后得到一个 Mediastream 对象:
- 必须在用户手势(如点击按钮)触发的回调中调用,否则会被浏览器阻止
- 可传入约束对象,例如
{ video: true, audio: false }(屏幕录制通常不捕获系统音频,Chrome 目前不支持系统音频捕获) - Firefox 支持捕获窗口音频(需显式设置
audio: true并选择带声音的源)
创建并启动 MediaRecorder
拿到 stream 后,用它初始化 MediaRecorder 实例:
const recorder = new MediaRecorder(stream);- 监听
dataavailable事件,该事件在每次生成录像片段(Blob)时触发 - 调用
recorder.start()开始录制;可传毫秒值指定分段时长(如recorder.start(1000)每秒触发一次dataavailable) - 录制中可通过
recorder.state查看当前状态("inactive"/"recording"/"paused")
处理录制数据与下载
在 dataavailable 事件中收集 Blob,并在停止后合并为完整视频文件:
立即学习“Java免费学习笔记(深入)”;
- 定义数组
let chunks = [];,在dataavailable中执行chunks.push(Event.data); - 监听
stop事件,用new Blob(chunks, { type: 'video/webm' })合并(注意 MIME 类型需与实际录制格式一致,常见为video/webm) - 创建 URL 并触发下载:
const url = URL.createObjectURL(blob);,再用<a href="%24%7Burl%7D" download="screen-recording.webm"></a>下载 - 记得调用
URL.revokeObjectURL(url)释放内存
注意事项与兼容性
实际使用中需关注以下几点:
- Chrome、Edge、Firefox 支持较好;Safari 尚未支持
getDisplayMedia - 录制期间若用户切换到其他标签页或最小化窗口,部分浏览器可能暂停视频轨道(音频不受影响)
- 无法录制受保护内容(如 DRM 视频、某些 iframe 内容)
- 停止录制前务必调用
recorder.stop()或stream.getTracks().foreach(t => t.stop())清理资源
基本上就这些。不复杂但容易忽略权限和上下文限制,动手前先确保是 https 环境并由用户点击触发。