Skip to content

ycrao/web-screen-recorder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

网页录制器

English

这是一个功能强大的网页录制工具,类似于 OBS 功能,可以在浏览器中录制屏幕、摄像头和音频。

screen-shot

🚀 主要功能

📹 录制源选择

  • 屏幕录制: 录制整个屏幕或选择特定窗口
  • 摄像头录制: 使用网络摄像头进行录制
  • 标签页录制: 仅录制当前浏览器标签页

🎵 音频支持

  • 无音频: 仅录制视频
  • 麦克风: 录制麦克风音频
  • 系统音频: 录制系统声音(浏览器支持情况下)
  • 混合音频: 同时录制麦克风和系统音频

🎛️ 高级设置

  • 视频质量: 支持360p、720p、1080p、1440p
  • 帧率调节: 1-60fps可调
  • 比特率控制: 1-20Mbps可调
  • 录制控制: 开始、停止、暂停/继续录制

💾 文件管理

  • 本地存储: 录制文件保存在浏览器本地
  • 播放预览: 在线播放录制的视频
  • 下载功能: 下载录制文件到本地
  • 文件管理: 删除不需要的录制文件

🛠️ 技术特性

核心技术

  • MediaRecorder API: 浏览器原生录制功能
  • MediaDevices API: 设备访问和媒体流控制
  • localStorage: 本地文件索引存储
  • WebM格式: 高效的视频编码格式

兼容性

  • 现代浏览器: Chrome 69+, Firefox 66+, Edge 79+
  • 移动设备: 部分支持(主要在桌面端)
  • HTTPS环境: 推荐在安全环境下使用

📖 使用指南

快速开始

  1. 打开 www/index.html 文件 (本地打开无效果,需要部署到 https 网站,演示站点为 WSR
  2. 选择录制源(屏幕/摄像头/标签页)
  3. 选择音频源(如果需要)
  4. 调整视频质量设置
  5. 点击"开始录制"按钮
  6. 录制完成后点击"停止录制"

高级功能

  • 暂停录制: 在录制过程中可以暂停和继续
  • 全屏预览: 点击全屏按钮查看大尺寸预览
  • 源切换: 可以在不同录制源之间切换
  • 文件管理: 在录制文件列表中管理你的录制

设置选项

  • 帧率: 影响视频流畅度,30fps适合大多数场景
  • 比特率: 影响视频质量,5-10Mbps提供良好质量
  • 视频质量: 根据需要选择合适的分辨率

⚠️ 注意事项

权限要求

  • 需要用户授权摄像头和麦克风访问权限
  • 屏幕录制需要用户选择要录制的屏幕区域
  • 建议在HTTPS环境下使用以获得最佳兼容性

性能考虑

  • 高分辨率和高帧率会消耗更多系统资源
  • 长时间录制会产生较大的文件
  • 建议定期清理不需要的录制文件

浏览器限制

  • Safari浏览器支持有限
  • 某些移动浏览器可能不支持所有功能
  • 系统音频录制的兼容性因浏览器而异

🐛 故障排除

常见问题

无法开始录制

  • 检查浏览器是否支持 MediaRecorder API (或者打开线上 https 站点 www/test.html 对应的页面),演示站 测试页面
  • 确认已授予摄像头/麦克风权限
  • 尝试刷新页面重新授权

音频录制失败

  • 检查麦克风是否正常工作
  • 确认浏览器支持系统音频录制
  • 尝试选择不同的音频源

录制文件过大

  • 降低视频分辨率
  • 减少帧率设置
  • 降低比特率设置

预览黑屏

  • 检查设备是否被其他应用占用
  • 确认选择了正确的录制源
  • 尝试重新授权设备权限

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目!

📞 联系

如有问题或建议,请通过以下方式联系:

About

Web Screen Recorder

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published