产品简介
use-media-recorder 这是一个基于 React 的 hooks 库，简化了 MediaRecorder API 的使用，支持音频、视频和屏幕录制。开发者可以轻松集成录制功能到 React 应用中，通过可配置选项自定义录制设置，并构建自定义用户界面，适合需要快速实现浏览器录制功能的前端开发者。
核心功能
- 熟悉的 API，最小抽象易于使用
- 支持音频、视频和屏幕录制
- 可配置录制设置满足不同需求
- 无头式设计允许自定义用户界面
快速开始
- 通过 npm 安装 @wmik/use-media-recorder 包
- 在 React 组件中导入 useMediaRecorder 函数
- 配置录制参数如启用屏幕录制或设置 blob 类型
- 调用 getMediaStream 获取媒体流，然后 startRecording 开始录制
- 停止录制后从 mediaBlob 获取录制内容用于播放或保存
界面预览
与其他方案对比
| 对比项 | use-media-recorder | 同类方案 |
|---|---|---|
| API 设计 | 提供 React hooks 接口，最小抽象，易于集成和自定义 | 如 react-media-recorder 可能提供更高层组件，封装更多但灵活性较低 |
适合谁用
- 需要实现浏览器录制功能的前端开发者
- 构建在线教育或会议录制工具的团队
- 希望快速集成音视频处理能力的 React 项目开发者
下载与版本
当前最新版本为 main，发布于 。支持 Windows、macOS、Linux。
⚠️ 注意：本项目仅提供源代码下载，不包含可直接运行的安装包（exe/dmg/apk 等。下载后需要自行编译构建才能使用，适合有一定开发经验的用户。如果你不熟悉编译流程，建议寻找同类开箱即用的替代方案。
注意事项
- 本工具仅供学习和研究使用，请遵守相关法律法规。
- 请尊重内容创作者版权，勿将下载内容用于商业或非法传播。
- 项目源码地址：https://github.com/wmik/use-media-recorder