# @addpipe/react-pipe-media-recorder 中文文档

规范地址：https://npmcn.com/package/%40addpipe/react-pipe-media-recorder/

版本：1\.3\.0
npm 元数据更新时间：2026-06-25T09:10:34.577Z
中文译文更新时间：2026-11-05T21:40:06.242Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40addpipe/react-pipe-media-recorder
原文对照：https://npmcn.com/package/%40addpipe/react-pipe-media-recorder/?lang=original
项目主页：https://github.com/addpipe/react-pipe-media-recorder#readme
源码仓库：https://github.com/addpipe/react-pipe-media-recorder

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：19.8 kB，4 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=16\.8\.0
- 首次发布：2024-11-05T08:54:52.307Z
- 最新版本发布：2026-06-25T09:10:34.366Z
- 近 30 天下载量：17001（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 4 个）

## 中文简介

整合 adippe.com 记录客户端的回放自定义钩子

## 安装

```sh
npm install @addpipe/react-pipe-media-recorder
```

也可以使用：`pnpm add @addpipe/react-pipe-media-recorder`、`yarn add @addpipe/react-pipe-media-recorder`、`bun add @addpipe/react-pipe-media-recorder`

## README

# 复制管道媒体记录器

`@addpipe/react-pipe-media-recorder` 为 TypeScript 和 JavaScript 的集成提供了完全输入的反键钩,引入了 [管道平台](https://addpipe.com/) 输入您的反应项目 。 此包允许视频,音频,和屏幕+相机录制. 对于需要获取视频反馈,消息,恢复等用户生成内容的应用程序来说,这是理想的. 记录器易于设置并确保跨平台相容,同时在桌面和移动设备上工作.

与 `@addpipe/react-pipe-media-recorder`时,您可以:

-   记录高质量 **音频和视频** 内容直接来自用户.
-   捕获 **屏幕和相机** 用于详细的视觉反馈或演示.
-   **嵌入多台录音机** 用于各种用户交互的页面.

**说明**: 您需要免费审判或与 [插管](https://addpipe.com/) 用于使用此软件包.

> **如何装入 :** 截至版本 `1.3.0`,记录客户端直接通过 [`@addpipe/pipe-recording-client`](https://www.npmjs.com/package/@addpipe/pipe-recording-client) npm 包而不是通过远程插入页面 `<script>`编号 :`<link>` 标签。 Pipe记录客户端由钩子导入,所以你的捆绑器(Vite,webpack,Next.js,CRA,.)自动处理,不需要额外的设置. 记录器仍然在运行时与Pipe的服务器进行通信;只有客户端的加载方式已经改变. 录音客户端版本遵循此软件包 `@addpipe/pipe-recording-client` 依赖范围(`^2.0.0`; 见 [固定一个特定的录音客户端版本](https://npmcn.com/package/%40addpipe/react-pipe-media-recorder/#readme-pinning-a-specific-recording-client-version) 如果你需要锁定它 准确释放.

## 特征 :

-   **视频、音频和屏幕记录**: 在任何 React app 中加入高质量的媒体记录功能,支持桌面和移动设备.
-   **最多4K视频**: 支持录制可达4K分辨率.
-   **无上传时间**:在创建时流出录音,将用户的等待时间降到最低.
-   **移动兼容性**: 支持HTML Media Capture用于移动视频/音频录制.
-   **屏幕+相机录音**:同步抓取屏幕和相机,以提升记录能力.
-   **多语种支持**: 以多种语文提供:英语、法语、德语和西班牙语,并提供自定义语言支持.
-   **键盘访问**:通过键盘可完全控制,以改善无障碍性.
-   **连接复原力**: 自动重联,如果连接在录制过程中下降,则确保数据恢复.

## 安装

使用 npm 安装软件包 :

```bash
npm install @addpipe/react-pipe-media-recorder
```

## 用法实例

👉 **就业**: 您可以找到工作演示 [这里](https://addpipe.com/react-demo/)。演示的源代码在JavaScript和TypeScript React中都有。 找到更多关于它 [这里](https://addpipe.com/react-demo/)。 。 。 .

### 在页面中插入单个记录器

在这个例子中,我们将一个单管记录器插入到页面中,并使用记录器的API来控制`record()` 财务报告和审定财务报表 `stopVideo()`) (中文(简体) ).

```jsx
import { useState } from "react";
import usePipeSDK from "@addpipe/react-pipe-media-recorder"; // Importing the Pipe recorder npm package

// Inserting a single Pipe recorder into the page
const SingleRecorder = () => {
  // Storing the generated recorder inside of a state - optional
  const [recorder, setRecorder] = useState(null);
  const [canRecord, setCanRecord] = useState(false);

  // Using the Pipe recorder custom hook
  const { isLoaded } = usePipeSDK((PipeSDK) => {
    // Check to make sure the code below is only executed on the initial load
    if (isLoaded) return;

    // Prepare the parameters needed to generate a new recorder
    const pipeParams = { size: { width: 640, height: 390 }, qualityurl: "avq/360p.xml", accountHash: "YOUR_ACCOUNT_HASH", eid: "YOUR_ENV_CODE", mrt: 600, avrec: 1 };

    // Inserting a new recorder into the page
    PipeSDK.insert("custom-id", pipeParams, (pipeRecorder) => {
      setRecorder(pipeRecorder); // Store the recorder instance for later use
      pipeRecorder.onReadyToRecord = () => {
        setCanRecord(true);
      }
    });
  });

  // Function to start a new recording using the recorder's API
  const startRecording = () => {
    if (!recorder || !canRecord) return;
    recorder.record(); // Call to start recording
  };

  // Function to stop a recording using the recorder's API
  const stopRecording = () => {
    if (!recorder || !canRecord) return;
    recorder.stopVideo(); // Call to stop recording
  };

  return (
    <div>
      {!isLoaded && <div>Loading the Pipe recorder</div>}
      <div id="custom-id"></div> {/* Placeholder for where the new recorder should be inserted */}
      {isLoaded && recorder && (
        <>
          {/* Buttons to control the recorder - Only display them after all prerequisites have loaded */}
          <button onClick={startRecording}>Record</button>
          <button onClick={stopRecording}>Stop</button>
        </>
      )}
    </div>
  );
};

export default SingleRecorder;
```

### 从我们的欧盟客户端交付服务器(S1)上装入一个单一记录器

在这个例子中,我们将一个单管记录器插入到页面中,并使用记录器的API来控制`record()` 财务报告和审定财务报表 `stopVideo()`) (中文(简体) ). 我们从欧盟客户端交付服务器(S1)装入其静态资产,而不是通过通过默认的全球CDN `useS1: true`。 。 。 .

> **折旧:** 这个 `buildSlug` 选项不再有任何效果,只保留后向兼容性。 它曾经要求具体 `pipe.min.js`编号 :`pipe.min.css` 释放; 记录客户端版本现在由已安装的确定 [`@addpipe/pipe-recording-client`](https://www.npmjs.com/package/@addpipe/pipe-recording-client) 依赖性。 通过 `buildSlug` 记录一次性控制台警告。 要控制客户端版本,请参见 [固定一个特定的录音客户端版本](https://npmcn.com/package/%40addpipe/react-pipe-media-recorder/#readme-pinning-a-specific-recording-client-version) 见下文.

```jsx
import { useState } from "react";
import usePipeSDK from "@addpipe/react-pipe-media-recorder"; // Importing the Pipe recorder npm package

// Inserting a single Pipe recorder into the page
const SingleRecorder = () => {
  // Storing the generated recorder inside of a state - optional
  const [recorder, setRecorder] = useState(null);
  const [canRecord, setCanRecord] = useState(false);

  // Custom options
  const options = {
    useS1: true, // Load from our EU client delivery servers (S1)
  }

  // Using the Pipe recorder custom hook with S1
  const { isLoaded } = usePipeSDK((PipeSDK) => {
    // Check to make sure the code below is only executed on the initial load
    if (isLoaded) return;

    // Prepare the parameters needed to generate a new recorder
    const pipeParams = { size: { width: 640, height: 390 }, qualityurl: "avq/360p.xml", accountHash: "YOUR_ACCOUNT_HASH", eid: "YOUR_ENV_CODE", mrt: 600, avrec: 1 };

    // Inserting a new recorder into the page
    PipeSDK.insert("custom-id", pipeParams, (pipeRecorder) => {
      setRecorder(pipeRecorder); // Store the recorder instance for later use
      pipeRecorder.onReadyToRecord = () => {
        setCanRecord(true);
      }
    });
  }, options);

  // Function to start a new recording using the recorder's API
  const startRecording = () => {
    if (!recorder || !canRecord) return;
    recorder.record(); // Call to start recording
  };

  // Function to stop a recording using the recorder's API
  const stopRecording = () => {
    if (!recorder || !canRecord) return;
    recorder.stopVideo(); // Call to stop recording
  };

  return (
    <div>
      {!isLoaded && <div>Loading the Pipe recorder</div>}
      <div id="custom-id"></div> {/* Placeholder for where the new recorder should be inserted */}
      {isLoaded && recorder && (
        <>
          {/* Buttons to control the recorder - Only display them after all prerequisites have loaded */}
          <button onClick={startRecording}>Record</button>
          <button onClick={stopRecording}>Stop</button>
        </>
      )}
    </div>
  );
};

export default SingleRecorder;
```

### 固定一个特定的录音客户端版本

此软件包取决于 [`@addpipe/pipe-recording-client`](https://www.npmjs.com/package/@addpipe/pipe-recording-client) 带范围 `^2.0.0`,因此默认情况下,您可以得到最新的兼容性 `2.x` 记录客户端。 这是现代取代旧的 `buildSlug` 选项.

要将录制客户端锁定到一个精确的客户端版本,请从 **你们自己** 项目的 `package.json` (不是这个包裹的). 被捆绑在你的应用软件里的录音客户端是那里任何版本的解答.

**无** (v8.3+) - 增加一个 [`overrides`](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides) 字段 :

```json
{
  "overrides": {
    "@addpipe/pipe-recording-client": "2.0.0"
  }
}
```

**亚伦/平分** - 添加一个 [`resolutions`](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) 字段 :

```json
{
  "resolutions": {
    "@addpipe/pipe-recording-client": "2.0.0"
  }
}
```

然后重新安装( R)`npm install`, (中文(简体) ), `yarn`,或 `pnpm install`)并用 `npm ls @addpipe/pipe-recording-client`现有版本列于 [记录-客户端版本页面](https://www.npmjs.com/package/@addpipe/pipe-recording-client?activeTab=versions)。 。 。 .

### 在页面中插入多个记录器

这个例子说明如何在页面中插入多个管道记录器.

```jsx
import { useState } from "react";
import usePipeSDK from "@addpipe/react-pipe-media-recorder"; // Importing the Pipe recorder npm package

// Inserting multiple Pipe recorders into the page
const MultipleRecorders = () => {
  // Storing the global PipeSDK into a state
  const [pipeSdk, setPipeSdk] = useState(null);

  // Custom IDs for the recorders
  const CUSTOM_IDS = ["custom-id-1", "custom-id-2", "custom-id-3"];

  // Using the Pipe recorder custom hook
  const { isLoaded } = usePipeSDK((PipeSDK) => {
    // Check to make sure the code below is only executed on the initial load
    if (isLoaded) return;

    // Prepare the parameters needed to generate new recorders
    const pipeParams = { size: { width: 640, height: 390 }, qualityurl: "avq/360p.xml", accountHash: "YOUR_ACCOUNT_HASH", eid: "YOUR_ENV_CODE", mrt: 600, avrec: 1 };

    // Inserting new recorders into the page
    CUSTOM_IDS.forEach((id) => PipeSDK.insert(id, pipeParams, () => {}));

    // Store PipeSDK into a state for controlling the recorders later
    setPipeSdk(PipeSDK);
  });

  // Function to start a new recording using PipeSDK
  const startRecording = (recorderId) => {
    if (!pipeSdk) return;
    pipeSdk.getRecorderById(recorderId).record(); // Call to start recording for a specific recorder
  };

  // Function to stop a recording using PipeSDK
  const stopRecording = (recorderId) => {
    if (!pipeSdk) return;
    pipeSdk.getRecorderById(recorderId).stopVideo(); // Call to stop recording for a specific recorder
  };

  return (
    <>
      {CUSTOM_IDS.map((id, index) => (
        <div key={index}>
          <div id={id}></div> {/* Placeholder for where the new recorder should be inserted */}
          {/* Buttons to control the recorder - Only display them after all prerequisites have loaded */}
          {isLoaded && (
            <>
              <button onClick={() => startRecording(id)}>Record</button>
              <button onClick={() => stopRecording(id)}>Stop</button>
            </>
          )}
        </div>
      ))}
    </>
  );
};

export default MultipleRecorders;
```

## 控制记录器

要控制记录器,您可以使用API控制方法,例如:

-   `record()`:开始新的录音.
-   `stopVideo()`:停止录音.

记录器的API控制方法的完整列表可见于官方 [管道 API 文档](https://addpipe.com/docs/javascript/js-api-v2/#methods-list)。 。 。 .

## 嵌入码参数

这个 `pipeParams` 对象用于配置管道记录器。 以下是其结构的例子:

```js
const pipeParams = {
  size: { width: 640, height: 390 },
  qualityurl: "avq/360p.xml",
  accountHash: "YOUR_ACCOUNT_HASH",
  eid: "YOUR_ENV_CODE",
  mrt: 600,
  avrec: 1,
  // Additional options available in the official documentation
};
```

更详细的嵌入式编码选项,请参见 [嵌入码选项](https://addpipe.com/docs/desktop-recording-client/embed-code-options-desktop/#20-javascript)。 。 。 .

## 文件和定价

-   官方开发者文档 : [添加道克](https://addpipe.com/docs)
-   定价信息 : [添加管道定价](https://addpipe.com/pricing)

* * *

### 关键词

-   录像机
-   录像
-   录音机
-   音频记录
-   屏幕记录器
-   屏幕记录
-   相机录音机
-   播放录相机
-   反射音频记录器
-   屏幕和相机抓取
-   媒体反应钩

# 释放

所有释放均可使用 [这里](https://github.com/addpipe/react-pipe-media-recorder/releases)

## 常见问题

### @addpipe/react-pipe-media-recorder 是什么？

整合 adippe\.com 记录客户端的回放自定义钩子

### 如何安装 @addpipe/react-pipe-media-recorder？

在项目目录运行 npm install @addpipe/react-pipe-media-recorder，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @addpipe/react-pipe-media-recorder 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @addpipe/react-pipe-media-recorder 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @addpipe/react-pipe-media-recorder 可以商用吗？

@addpipe/react-pipe-media-recorder 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @addpipe/react-pipe-media-recorder 的下载量有多少？

根据 npm 官方下载统计，@addpipe/react-pipe-media-recorder 在 2026/10/05 – 2026/11/03 这 30 天内被下载 17,001 次，日均约 567 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @addpipe/react-pipe-media-recorder 还在维护吗？

最新版本 1\.3\.0 发布于 2026/06/25（4 个月前）；至今共发布 12 个版本，其中过去 12 个月发布了 4 个；首次发布于 2024/11/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。