前端：前端/浏览器 可以录屏吗 / 实践 / 录制 Microsoft Edge 标签页、应用窗口、整个屏幕
一、浏览器可以实现录屏功能吗
回答：可以。前端浏览器可以开发录屏功能，这主要依赖于浏览器提供的 WebRTC 和 MediaRecorder API 等原生技术。
二、实现核心原理
2.1、获取屏幕媒体流
通过 navigator.mediaDevices.getDisplayMedia() 请求用户授权，捕获屏幕、窗口或浏览器标签页的视频流（可选音频）。
const stream = await navigator.mediaDevices.getDisplayMedia({video: { cursor: "always" }, // 可录制鼠标指针audio: true // 可选录制系统声音
});2.2、录制媒体流
使用 MediaRecorder 将媒体流录制为视频文件（如 WebM 格式）
const mediaRecorder = new MediaRecorder(stream, {mimeType: "video/webm;codecs=vp9" // 选择支持的编码格式
});
const chunks = [];
mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
mediaRecorder.start();2.3、停止录制并生成文件
当用户停止录制时，合并数据块并生成可下载的视频文件
mediaRecorder.stop();
const blob = new Blob(chunks, { type: "video/webm" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "recording.webm"; // 设置文件名
a.click();三、完整demo
<button id="startBtn">开始录屏</button>
<button id="stopBtn" disabled>停止录屏</button>
<video id="preview" controls style="display: none;"></video><script>let mediaRecorder, stream;document.getElementById("startBtn").addEventListener("click", async () => {try {stream = await navigator.mediaDevices.getDisplayMedia({video: true,audio: true});const mimeType = MediaRecorder.isTypeSupported("video/webm;codecs=vp9") ? "video/webm;codecs=vp9" : "video/webm";mediaRecorder = new MediaRecorder(stream, { mimeType });const chunks = [];mediaRecorder.ondataavailable = (e) => chunks.push(e.data);mediaRecorder.onstop = () => {const blob = new Blob(chunks, { type: mimeType });const url = URL.createObjectURL(blob);// 预览或下载const preview = document.getElementById("preview");preview.src = url;preview.style.display = "block";const a = document.createElement("a");a.href = url;a.download = `recording-${new Date().toISOString()}.webm`;a.click();};mediaRecorder.start();document.getElementById("stopBtn").disabled = false;} catch (err) {console.error("录屏失败:", err);}});document.getElementById("stopBtn").addEventListener("click", () => {mediaRecorder.stop();stream.getTracks().forEach(track => track.stop()); // 关闭屏幕共享document.getElementById("stopBtn").disabled = true;});
</script>四、页面效果
4.1、打开页面
4.2、点击开始录屏
可以选择 Microsoft Edge 标签页、应用窗口、整个屏幕
4.3、点整个屏幕
我有笔记本电脑的一个显示屏、外部连接的一个显示器，所以这里有两个屏幕，都可以选择
4.4、我们选择屏幕1，点击共享按钮，即开始录屏中
4.5、点击停止录屏，录屏结束，录制好的内容展示在浏览器窗口中
4.6、录屏成功，非常满意
五、注意事项
5.1、用户授权
getDisplayMedia() 必须由用户交互（如点击按钮）触发，否则浏览器会阻止请求。
需明确告知用户录屏目的，避免隐私争议。
5.2、浏览器兼容
支持情况：Chrome、Firefox、Edge 等现代浏览器均支持，但 Safari 对部分编码格式（如 VP9）支持有限。
降级方案：检测支持的 MIME 类型，优先使用 video/webm，必要时回退到 video/mp4（需浏览器支持 H.264 编码）。
5.3、性能优化
分辨率与帧率：高分辨率或高帧率会显著增加 CPU 和内存占用，建议根据需求调整。
分片上传：若需上传至服务器，可分片录制并实时传输，避免内存溢出。
5.4、安全限制
录屏功能仅在 HTTPS 或 localhost 环境下可用，防止中间人攻击。
录制完成后，务必调用 stream.getTracks().forEach(track => track.stop()) 关闭媒体流。
5.5、替代方案
5.5.1、Canvas 截图拼接
适合录制静态内容（如幻灯片），但动态内容（如视频）会因帧率不足导致卡顿。
示例：定时截取 Canvas 内容并合并为视频。
5.5.2、rrweb 库
记录 DOM 变化和用户操作，生成可回放的 JSON 数据，适合录制交互流程。
特点：轻量、支持数据压缩，但无法录制音频或视频内容。