一、浏览器可以实现录屏功能吗
回答：可以。前端浏览器可以开发录屏功能，这主要依赖于浏览器提供的 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 数据，适合录制交互流程。
特点：轻量、支持数据压缩，但无法录制音频或视频内容。