# @bigbinary/neeto-media-recorder 中文文档 规范地址：https://npmcn.com/package/%40bigbinary/neeto-media-recorder/ 版本：2\.7\.60 npm 元数据更新时间：2026-11-02T07:01:07.743Z 中文译文更新时间：2026-11-08T02:39:39.955Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bigbinary/neeto-media-recorder 原文对照：https://npmcn.com/package/%40bigbinary/neeto-media-recorder/?lang=original 项目主页：https://github.com/bigbinary/neeto-media-recorder#readme 源码仓库：https://github.com/bigbinary/neeto-media-recorder ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.6 MB，17 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - Node.js 要求：\>=22\.13 - 运行依赖：0 个 - peer 依赖：axios 0\.27\.2，ramda ^0\.29\.0，react ^17\.0\.2，zustand 4\.3\.2，platform ^1\.3\.6，js-logger ^1\.6\.1，react-dom 17\.0\.2，classnames ^2\.3\.2，lucide-react ^1\.8\.0，react-i18next 12\.3\.1，react-router-dom 5\.3\.1，@bigbinary/neetoui 8\.2\.18，@bigbinary/neeto-cist latest，@tanstack/react-query 5\.40\.0，@bigbinary/neeto-atoms ^1\.0\.90，@bigbinary/neeto-icons 1\.17\.6，@bigbinary/neeto-molecules 5\.2\.0，@bigbinary/neeto-media-recorder latest，@bigbinary/neeto-commons-frontend latest - 首次发布：2023-11-28T10:26:22.821Z - 最新版本发布：2026-11-02T07:01:07.555Z - 近 30 天下载量：1949（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：166（近 12 个月 46 个） ## 中文简介 简化媒体捕获进程的软件包 ## 安装 ```sh npm install @bigbinary/neeto-media-recorder ``` 也可以使用：`pnpm add @bigbinary/neeto-media-recorder`、`yarn add @bigbinary/neeto-media-recorder`、`bun add @bigbinary/neeto-media-recorder` ## README # @ bigbinary/ neto- media- recorder ![npm](https://img.shields.io/npm/v/@bigbinary/neeto-media-recorder?color=greenyellow) ![npm](https://img.shields.io/npm/dw/@bigbinary/neeto-media-recorder?color=greenyellow) ## 概览 `@bigbinary/neeto-media-recorder` 是简化了媒体的 React 软件包 抓取过程。 它记录设备的屏幕和音频并上传 使用多段上传记录到 AWS S3 存储。 记录上限为15分 分钟后, 软件包就跨出纯网络应用程序 Electron 和浏览器 扩展. 它运送了四套出口: - **构成部分** a 包括: `MediaRecorder` 内置的 UI 反应组件 控件以启动、暂停/重现、丢弃和重新启动记录. - **核心** 单子 `screenRecorder` 处理屏幕和 音频捕获, a `getMultipartS3Uploader` 方法,和 a `useMultipartS3UploadStatus` 追踪上传进度的回放钩. - **公用事业** - 帮助者,例如: `generatePublicUrl` 以构建可分享的 链接. - **常数** 记录器状态、事件和出错表加 浏览器/扩展检测帮助器. ### 用于 这个软件包将屏幕的录制经验 带给需要录制的屏幕 套接字组 : - [`neeto-record-web`](https://github.com/neetozone/neeto-record-web) - 那个 网易应用. - [`neeto-record-electron`](https://github.com/neetozone/neeto-record-electron) ——桌面(电子)应用. - [`neeto-record-chrome-extension`](https://github.com/neetozone/neeto-record-chrome-extension) ——浏览器扩展. ## 安装 ```bash yarn add @bigbinary/neeto-media-recorder ``` ## 使用量 此套件会输出出四套不同的功能和组件. 1. [构成部分](https://npmcn.com/package/%40bigbinary/neeto-media-recorder/#readme-components) 2. [公用事业](https://npmcn.com/package/%40bigbinary/neeto-media-recorder/#readme-utilities) 3. [常数](https://npmcn.com/package/%40bigbinary/neeto-media-recorder/#readme-constants) 4. [核心](https://npmcn.com/package/%40bigbinary/neeto-media-recorder/#readme-core) ### 构成部分 - #### 媒体记录 这个 `MediaRecorder` 响应组件抓取的设备屏幕并将其上传到 aWS S3 存储器。 它包含要启动、 暂停/ 重置、 丢弃的 UI 控制 并重新启动一个录音. 您可以从 `@bigbinary/neeto-media-recorder`。 。 。 . ```js import { MediaRecorder } from "@bigbinary/neeto-media-recorder"; ``` `MediaRecorder` 接受三种道具: - `onUploadComplete`: 一旦上传到 屏幕记录完成. - `onRecordingCreated`: 此调用会随录音被触发 一旦在服务器上创建,则在上传之前. - `onDiscard`: 当用户丢弃时, 此调用会被触发 屏幕记录. - `appName`: 此道具用于设置将使用的应用程序名称 拒绝信件。 默认将设定为 `globalProps.appName` - `mimeType`:此道具用于设定录音的MIME类型. 以 默认将设定为 `video/webm;codecs=h264`。 。 。 . ### 公用事业 您可以从 `@bigbinary/neeto-media-recorder/utils`。 。 。 . ```js import { generatePublicUrl } from "@bigbinary/neeto-media-recorder/utils"; ``` - #### `generatePublicUrl(recordingId, baseURL = window.location.origin)` 可用于为屏幕录制生成公共 URL `recordingId` 财务报告和审定财务报表 `baseURL` 作为论据. ### 常数 您可以从 `@bigbinary/neeto-media-recorder/constants`。 。 。 . ```js import { UPLOAD_EVENT, UPLOAD_STATUS,... } from "@bigbinary/neeto-media-recorder/constants" ``` 可用的常数是: ```js const UPLOAD_EVENT = { onComplete: "onComplete" }; const UPLOAD_STATUS = { uploading: "uploading", completed: "completed", aborting: "aborting", }; const SCREEN_RECORDER_STATUS = { media_aborted: "media_aborted", permission_denied: "permission_denied", no_specified_media_found: "no_specified_media_found", media_in_use: "media_in_use", invalid_media_constraints: "invalid_media_constraints", no_chrome_flags_set: "no_chrome_flags_set", recorder_error: "recorder_error", idle: "idle", acquiring_media: "acquiring_media", media_acquired: "media_acquired", restarting: "restarting", recording: "recording", stopping: "stopping", stopped: "stopped", paused: "paused", }; const SCREEN_RECORDER_ERROR = { AbortError: "media_aborted", NotAllowedError: "permission_denied", NotFoundError: "no_specified_media_found", NotReadableError: "media_in_use", OverconstrainedError: "invalid_media_constraints", TypeError: "no_chrome_flags_set", None: "", NoRecorder: "recorder_error", UnSupportedBrowser: "unsupported_browser", }; const SCREEN_RECORDER_EVENT = { onStart: "onStart", onStop: "onStop", onDiscard: "onDiscard", onDataAvailable: "onDataAvailable", onDiscardDuringCountdown: "onDiscardDuringCountdown", onRestart: "onRestart", onReUpload: "onReUpload", onReUploadFromDisk: "onReUploadFromDisk", onPause: "onPause", onResume: "onResume", }; const HAS_CHROME_NAMESPACE = typeof chrome === "object"; const IS_EXTENSION = HAS_CHROME_NAMESPACE && isNotNil(chrome.extension); const IS_SAFARI = platform.name === "Safari"; const IS_SAFARI_EXTENSION = IS_SAFARI && IS_EXTENSION; ``` ### 核心 这个 `@bigbinary/neeto-media-recorder/core` 包含单通类 `screenRecorder` 财务报告和审定财务报表 `getMultipartS3Uploader` 方法和反应钩 `useMultipartS3UploadStatus`。 。 。 . ```js import { screenRecorder, getMultipartS3Uploader, useMultipartS3UploadStatus, } from "@bigbinary/neeto-media-recorder/core"; ``` - #### 屏幕反馈 它处理屏幕和音频捕获过程. 录音有限 到15分钟。 提供的各种方法 `screenRecorder` 它们是: - `startRecording()` 曾经开始屏幕录音. - `stopRecording()` 曾停止当前屏幕录音. - `pauseRecording()` 曾暂停当前屏幕录制. - `resumeRecording()` 曾恢复屏幕录音. - `discardRecording()` 用于丢弃当前屏幕记录 . - `restartRecording()` 用于丢弃当前屏幕录制并开始新的. - `addCallback(event, callback)` 曾为特定屏幕记录事件添加回调功能. 这个 常数 `SCREEN_RECORDER_EVENT` 包含所有可能的屏幕记录 事件. ```js screenRecorder.addCallback( SCREEN_RECORDER_EVENT.onStart, handleStartRecording ); ``` - `removeCallback(event, callback)` 用于通过提供事件和召回来删除已经添加的召回 将删除. ```js screenRecorder.removeCallback( SCREEN_RECORDER_EVENT.onStart, handleStartRecording ); ``` - `removeAllCallbacksByEvent(event)` 用于去除所有与特定事件相关的回调 . ```js screenRecorder.removeCallback(SCREEN_RECORDER_EVENT.onStart); ``` - `resetState()` 曾将屏幕收录指令的内部状态重置为初始状态. - `revokePermissions()` 用于取消浏览器访问MediaRecorder api的权限. - `useRecorderStore()` 可用以了解屏幕重排状态和错误的 zustand 商店 如果在反应组件内发生任何情况 - `setAudioConfiguration({ deviceId, ...})` 用于设置配置 音频设备。 参考: [https://w3c.github.io/mediacapture-main/#dom-mediachrack 支持的制约](https://w3c.github.io/mediacapture-main/#dom-mediatracksupportedconstraints) - `videoStream` 客户端可以设置的只写属性 视频流,一旦设置了屏幕反馈程序,将无法获取新视频 流或请求共享屏幕的权限. - #### 获得多部分S3 卸载器 它返回一个实例 `MultipartS3Uploader` 处理上传 将屏幕数据录入AWS S3存储. `getMultipartS3Uploader` 可选择接受以下对象 属性 : - `initialize` 设定为 `true`它会自动初始化一个新的实例 `MultipartS3Uploader` 并归还它。 这是有用的,当你想要清理 上加现有的多段上传实例,并创建一个新的实例. 这个 `MultipartS3Uploader` 实例返回 `getMultipartS3Uploader` 提供将录音以多块形式上传到S3的能力。 这个 提供的方法 `MultipartS3Uploader` 实例如下: - `setRecording(recordingId, uploadId)` 用于初始化 `multipartS3Uploader` 通过提供 `recordingId` 财务报告和审定财务报表 `uploadId`。 。 。 . `recordingId` 财务报告和审定财务报表 `uploadId` 可以通过创建 新记录 `neeto-record-web`。 。 。 . - `push(data)` 曾将所记录块上传到S3. - `completeUpload()` 录音完成后,应使用这种方法标出 记录完成. - `abortUpload()` 用来丢弃部分上传的录音. - `resetState()` 曾将多部分S3Uploader的内部状态重置为初始状态. - `addCallback(event, callback)` 曾将回调功能添加到特定的上传事件. 常数 `UPLOAD_EVENT` 包含所有可能的上传事件. - `removeCallback(event, callback)` 用于通过提供事件和召回来删除已经添加的召回 将删除. - `status` 返回当前状态的财产 `MultipartS3Uploader` 举个例子. - `mimeType` 返回录音的 mime 类型的属性 . - `setMimeType(mimeType)` 用于设定录音的MIME类型. - #### 使用多部件S3升载状态 用于了解当前状态的反应钩 `MultipartUploader` 举个例子 只要状态不变,它就会放弃组件 变化. ```js const { status, isStatus } = useMultipartS3UploadStatus(); // `status` can be one of the following: // UPLOAD_STATUS.uploading, UPLOAD_STATUS.completed, UPLOAD_STATUS.aborting, UPLOAD_STATUS.error, UPLOAD_STATUS.insufficient_data // `isStatus` is a function which can be used to check if the current status is one of the given statuses. isStatus(UPLOAD_STATUS.uploading); // will return true if the current status is UPLOAD_STATUS.uploading isStatus(UPLOAD_STATUS.uploading, UPLOAD_STATUS.completed); // will return true if the current status is either UPLOAD_STATUS.uploading or UPLOAD_STATUS.completed ``` ## 发展 通过执行以下命令安装所有依赖性 ```bash yarn install ``` ### 使用主机应用程序 1. 克隆这个仓库. 2. 运行 `yarn install` 下载依赖并设置开发 环境. 3. 准备好主机应用程序 . 4. 运行 `yarn watch` 在保存文件时自动转换代码。 你个 可以运行 `yarn build` 如果你只想运行一个建筑. 5. 在不同的终端,运行 `yalc publish` 出版时间 需要媒体记录员到当地雅尔克商店. 6. 运行 `yalc add @bigbinary/neeto-media-recorder` 以安装 需要媒体录制到主机应用程序. 7. 在对 `neeto-media-recorder`运行 `yarn release` 来推动修改到主机应用程序(假设您在监视中) 模式和更改自动捆绑。 重新启动网络软件包- dev- server 如果不应用更改,则在主机中. 8. 关于如何使用雅尔克语的视频解释: [https://www.youtube.com/watch?v=Q BiYGP0Rhe0 页面存档备份,存于互联网档案馆](https://www.youtube.com/watch?v=QBiYGP0Rhe0) # 建造并放出. 这个 `@bigbinary/neeto-neeto-media-recorder` 当 我们合并了 PR 和 `patch`, (中文(简体) ), `minor` 或者说 `major` 标签到 `main` 树枝。 这个 `patch` 标签用于错误修正, `minor` 标签用于新特性和 `major` 标签用于断开更改。 你可以去检查 `Create and publish releases` gitHub Actions中的工作流程获取实时更新. 如果不能添加标签,可以手动发布软件包. 首先,您需要创建 PR 来更新版本编号 `package.json` 文件并合并到 `main` 树枝。 合并公关后,你 需要创建一个 [新 github 释放](https://github.com/bigbinary/neeto-media-recorder/releases/new) 从主分支。 每当创建新版本编号时, github 动作将自动发布已建软件包到 npm 。 你们可以 检查 `Publish to npm` gitHub Actions中的工作流程获取实时更新. 请注意,在发布软件包之前,需要验证 本地使用 neto 网页应用程序中的功能 `yalc` 软件包 经理. # 项目一体化 | 项目 | 需要媒体记录器 | | :-: | :-: | | 需要记录-网络 | : 白色 检查 标记 : | | 需要记录- 染色- 扩展 | : 白色 检查 标记 : | ## 常见问题 ### @bigbinary/neeto-media-recorder 是什么？ 简化媒体捕获进程的软件包 ### 如何安装 @bigbinary/neeto-media-recorder？ 在项目目录运行 npm install @bigbinary/neeto-media-recorder，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：axios（0\.27\.2）、ramda（^0\.29\.0）、react（^17\.0\.2）、zustand（4\.3\.2）、platform（^1\.3\.6）、js-logger（^1\.6\.1）、react-dom（17\.0\.2）、classnames（^2\.3\.2）、lucide-react（^1\.8\.0）、react-i18next（12\.3\.1）、react-router-dom（5\.3\.1）、@bigbinary/neetoui（8\.2\.18）、@bigbinary/neeto-cist（latest）、@tanstack/react-query（5\.40\.0）、@bigbinary/neeto-atoms（^1\.0\.90）、@bigbinary/neeto-icons（1\.17\.6）、@bigbinary/neeto-molecules（5\.2\.0）、@bigbinary/neeto-media-recorder（latest）、@bigbinary/neeto-commons-frontend（latest）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bigbinary/neeto-media-recorder 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bigbinary\_\_neeto-media-recorder 是否存在。 ### @bigbinary/neeto-media-recorder 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @bigbinary/neeto-media-recorder 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=22\.13。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @bigbinary/neeto-media-recorder 可以商用吗？ @bigbinary/neeto-media-recorder 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @bigbinary/neeto-media-recorder 的下载量有多少？ 根据 npm 官方下载统计，@bigbinary/neeto-media-recorder 在 2026/10/08 – 2026/11/06 这 30 天内被下载 1,949 次，日均约 65 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bigbinary/neeto-media-recorder 还在维护吗？ 最新版本 2\.7\.60 发布于 2026/11/02（6 天前）；至今共发布 166 个版本，其中过去 12 个月发布了 46 个；首次发布于 2023/11/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。