Web 录屏中心

Express · Vue 3 · MediaRecorder · v{{ version }}
{{ config.ffmpeg ? 'ffmpeg 就绪' : '无 ffmpeg' }} {{ secure ? '安全上下文' : '非安全上下文' }} {{ platform.label }}
当前浏览器/环境无法直接录屏
  • {{ r }}

解决方式:通过 https://(本服务已内置自签名 HTTPS 端口)或 localhost 打开本页面。也可使用下方「导入视频文件」。

📱 {{ platform.label }} · 录屏指南

这个平台的浏览器不开放网页屏幕捕获接口(getDisplayMedia),网页内直接录屏会失败。 请按下面两步走,功能完全一致:

  1. 打开「设置 → 控制中心」,把 屏幕录制 加入控制中心
  2. 从右上角下拉打开控制中心,点 ⏺ 开始录屏(长按图标可打开麦克风边讲边录)
  3. 录完点顶部红色状态条停止,视频会存进「照片」
  4. 回到本页点下面的 「导入视频文件」,从相册选中刚录的视频
  1. 从屏幕右上角下拉打开 控制中心
  2. 点 屏幕录制 开始(长按可按需开启麦克风录音)
  3. 录完在控制中心/状态栏点停止,视频保存在「图库」
  4. 回到本页点下面的 「导入视频文件」,从图库选中刚录的视频
  1. 下拉通知栏的快捷菜单,点 屏幕录制
  2. 录完自动保存到相册 / 图库
  3. 回到本页点下面的 「导入视频文件」 选中视频

上传时请保持本页面在前台,进度见下方;上传完成后服务端会自动转码为 MP4 并生成缩略图。 想直接在网页里录屏,请改用电脑上的 Chrome / Edge / Safari(macOS)。

启动录制失败

{{ lastErrorText }}

macOS Safari 录屏需要系统授权

首次点「开始录制」若没有弹窗或被拒绝:打开 系统设置 → 隐私与安全性 → 屏幕录制, 勾选 Safari 并重启浏览器。录出的格式为 MP4(Safari 原生支持),服务端会直接保留。

未检测到 ffmpeg:录制将直接保存为 WebM(浏览器可直接播放),不会生成 MP4 转码副本。

1选择采集源

点击「开始录制」后,浏览器会弹出共享选择器,最终采集目标以系统选择器为准(此处为偏好提示)。

2画质与声音

码率越高画质越好、体积越大;60fps 适合演示动画,录屏讲课 30fps 足够。

同时开启系统声与麦克风时会自动混音。

📤 导入进度 {{ importTotalPct }}% 上传中…

{{ f.name }} {{ f.pct }}% · {{ f.state==='done' ? '完成' : (f.state==='error' ? '失败' : (f.state==='processing' ? '转码中' : (f.state==='uploading' ? '上传中' : '准备中'))) }}
{{ f.error }}
{{ fmt(elapsed) }} 已暂停 收尾中… 📦 {{ fmtBytes(uploaded) }} +{{ fmtBytes(pendingBytes) }} 待传 🧩 分片 {{ chunks }} (队列 {{ pending }}) ⏱ {{ kbps }} kbps
数据边录边传,页面意外关闭已落盘的分片仍可恢复

提示:在浏览器底部的共享控制条点击「停止共享」也会自动结束录制并保存。

✅ 录制完成

标题:{{ result.title }} 时长:{{ fmt(result.durationMs) }} 大小:{{ fmtBytes(result.size) }} {{ result.width }}×{{ result.height }} 状态: MP4 已就绪 转码中… WebM
{{ stats.count }} 条 · {{ fmtBytes(stats.bytes) }}
还没有录像。切到「录制」标签,开始第一段录屏吧 🎬
🎬
{{ fmt(it.durationMs) }}
▶
{{ it.title }}
{{ fmtDate(it.createdAt) }} {{ fmtBytes(it.size) }} 未完成 🔊 MP4
{{ t.text }}