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="${url}" download="screen-recording.webm">下载 - 记得调用
URL.revokeObjectURL(url)释放内存
注意事项与兼容性
实际使用中需关注以下几点：
- Chrome、Edge、Firefox 支持较好；Safari 尚未支持
getDisplayMedia - 录制期间若用户切换到其他标签页或最小化窗口，部分浏览器可能暂停视频轨道（音频不受影响）
- 无法录制受保护内容（如 DRM 视频、某些 iframe 内容）
- 停止录制前务必调用
recorder.stop()或stream.getTracks().forEach(t => t.stop())清理资源
基本上就这些。不复杂但容易忽略权限和上下文限制，动手前先确保是 https 环境并由用户点击触发。
