HTML5通过MediaRecorder和getDisplayMedia()实现屏幕录制：先调用getDisplayMedia()获取屏幕媒体流，再用MediaRecorder录制为Blob，最后转URL并下载。需HTTPS环境，Safari等浏览器可能不支持，MP4编码需高版本Chrome，导出MP4建议服务端处理。
HTML5 本身不直接提供屏幕录制 API，但结合 MediaRecorder 和 getDisplayMedia()（属于 Media Capture and Streams API），可在现代浏览器中实现网页端的屏幕录制与导出功能。核心在于获取屏幕媒体流、实时录制为 Blob、再转换为可下载文件。
获取屏幕媒体流
调用 navigator.mediaDevices.getDisplayMedia() 请求用户授权并捕获当前屏幕、窗口或标签页。该方法返回一个 MediaStream，可直接传给 MediaRecorder。
- 需在安全上下文（HTTPS 或 localhost）中运行，否则会被浏览器拒绝
- 支持传入约束对象，例如
{ video: true, audio: false }（屏幕无音频）或{ video: { mediaSource: 'window' } }指定捕获窗口 - 部分浏览器（如 Safari）暂不支持
getDisplayMedia，需降级提示或使用替代方案（如扩展辅助）
使用 MediaRecorder 录制流
MediaRecorder 是 HTML5 提供的标准录制接口，接收媒体流后可启动、暂停、停止录制，并通过 dataavailable 事件获取录制片段（Blob）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 推荐设置 mimeType，如
'video/webm;codecs=vp9'（兼容性好）或'video/mp4;codecs=avc1.42E01E'（需 Chrome 128+ 支持 MP4 编码） - 录制过程中可监听
ondataavailable累积多个 Blob，或仅在停止后统一获取单个 Blob - 注意：录制期间若流断开（如用户关闭共享窗口），
MediaRecorder会自动触发stop并抛出错误，应监听onerror和onstop
导出为可下载文件
将录制结束生成的 Blob 转为 URL，并创建临时链接触发下载。
立即学习“前端免费学习笔记（深入）”；
- 使用
URL.createObjectURL(blob)创建有效 URL - 动态创建
<a></a>元素，设置href和download属性（如'screen-recording.webm'） - 调用
click()触发下载后，建议及时调用URL.revokeObjectURL()释放内存 - 如需转为其他格式（如 MP4），纯前端需依赖 WebAssembly 编码库（如 ffmpeg.wasm），但体积大、耗时长，一般建议服务端处理
基础代码示例（简化版）
以下为关键逻辑示意，不含错误处理和 UI 控制：
let mediaRecorder;
let recordedChunks = [];
async function startScreenRecording() {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' });
mediaRecorder.ondataavailable = e => {
if (e.data.size > 0) recordedChunks.push(e.data);
};
mediaRecorder.start();
} catch (err) {
console.error('无法开始录制：', err);
}
}
function stopRecording() {
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
mediaRecorder.stop();
mediaRecorder.stream.getTracks().forEach(t => t.stop());
}
}
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'recording.webm';
a.click();
URL.revokeObjectURL(url);
recordedChunks = [];
};
