> ## Content Index
> Fetch the complete content index at: https://blog.addpipe.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Integrating The Pipe Recorder With React Via NPM
- URL: https://blog.addpipe.com/integrating-pipe-with-react-via-npm/
- Published: 2024-11-05T12:47:40.000Z
- Updated: 2026-05-21T08:05:09.000Z
- Author: Alexandru
- Tags: Product Updates, #Import 2026-05-22 13:18

We’re excited to announce the release of our [new NPM package](https://www.npmjs.com/package/@addpipe/react-pipe-media-recorder), `@addpipe/react-pipe-media-recorder`, which integrates the Pipe recording client directly into [React](https://react.dev/) projects.

### Why Use React With Pipe?

Integrating media recording infrastructure and features without increasing your workload is essential as user-generated content becomes more important for web applications. This package allows you to add the Pipe media recorder to your React projects in a few lines of code, giving you access to robust and customizable recording capabilities and infrastructure. This package offers a wide range of options, from capturing 4K video to integrating screen and camera recorders for detailed tutorials or even allowing users to upload pre-recorded content.

The package is fully compatible with JavaScript and TypeScript React and ensures cross-platform support, allowing users to record content on desktop and mobile devices.

### Key Features and Benefits of Pipe

1. **Video, Audio, and Screen Recording**: Capture user video and audio or record the screen and camera together for presentation and feedback applications.
2. **Instant Streaming**: Real-time recording streaming reduces wait times, so users don’t need to wait for uploads after finishing their recording.
3. **Mobile Compatibility**: Support for HTML Media Capture ensures smooth video/audio recording on mobile devices.
4. **Multilingual Support**: The recorder is available in multiple languages, including English, French, German, and Spanish.
5. **Connection Resilience**: With automatic reconnection, your users won’t lose data if the connection drops mid-recording.
6. **Flexible Integrations**: Embed multiple recorders on the same page to create diverse recording interfaces tailored to your use case.
7. **Group Recordings:** Group recordings easily by using Pipe's environments feature.
8. **Many More:** Learn more about Pipe's features [here](https://addpipe.com/product).

### Getting Started with `@addpipe/react-pipe-media-recorder`

To get started, install the package within your React project via npm:

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

Once installed, you can embed the Pipe recording client into your React components, as shown in the example below. But before diving into the code, make sure you have a [free trial or paid account](https://dashboard.addpipe.com/signup) with [Addpipe](https://addpipe.com/) to access the Pipe Platform’s features.

### Adding a Media Recorder to Your React Component

In the following example, we use the custom hook provided by [@addpipe/react-pipe-media-recorder](https://www.npmjs.com/package/@addpipe/react-pipe-media-recorder) to insert a single Pipe media recorder into the page and control it programmatically via the [JS Control API](https://addpipe.com/docs/javascript/js-api-v2/).

```javascript
import { useState } from "react";
import usePipeSDK from "@addpipe/react-pipe-media-recorder";

const SingleRecorder = () => {
  const [recorder, setRecorder] = useState(null);
  const { isLoaded } = usePipeSDK((PipeSDK) => {
    if (isLoaded) return;

    const pipeParams = {
      size: { width: 640, height: 390 },
      qualityurl: "avq/360p.xml",
      accountHash: "YOUR_ACCOUNT_HASH",
      eid: "YOUR_ENV_CODE",
      mrt: 600,
      avrec: 1,
      /* Add more embed code options here */
    };

    PipeSDK.insert("custom-id", pipeParams, (pipeRecorder) => {
      setRecorder(pipeRecorder);
    });
  });

  const startRecording = () => recorder?.record();
  const stopRecording = () => recorder?.stopVideo();

  return (
    <div>
      {!isLoaded && <div>Loading the Pipe recorder...</div>}
      <div id="custom-id"></div>
      {isLoaded && recorder && (
        <>
          <button onClick={startRecording}>Record</button>
          <button onClick={stopRecording}>Stop</button>
        </>
      )}
    </div>
  );
};

export default SingleRecorder;
```

With this setup, users can start and stop recordings via custom buttons, providing an easy experience for capturing content.

### Example: Adding Multiple Recorders

You can also embed multiple recorders on the same page, offering users different recording interfaces. Here’s how:

```javascript
import { useState } from "react";
import usePipeSDK from "@addpipe/react-pipe-media-recorder";

const MultipleRecorders = () => {
  const [pipeSdk, setPipeSdk] = useState(null);
  const CUSTOM_IDS = ["custom-id-1", "custom-id-2", "custom-id-3"];

  const { isLoaded } = usePipeSDK((PipeSDK) => {
    if (isLoaded) return;

    const pipeParams = {
      size: { width: 640, height: 390 },
      qualityurl: "avq/360p.xml",
      accountHash: "YOUR_ACCOUNT_HASH",
      eid: "YOUR_ENV_CODE",
      mrt: 600,
      avrec: 1,
    };

    CUSTOM_IDS.forEach((id) => PipeSDK.insert(id, pipeParams, () => {}));
    setPipeSdk(PipeSDK);
  });

  const startRecording = (recorderId) => pipeSdk?.getRecorderById(recorderId).record();
  const stopRecording = (recorderId) => pipeSdk?.getRecorderById(recorderId).stopVideo();

  return (
    <>
      {CUSTOM_IDS.map((id, index) => (
        <div key={index}>
          <div id={id}></div>
          {isLoaded && (
            <>
              <button onClick={() => startRecording(id)}>Record</button>
              <button onClick={() => stopRecording(id)}>Stop</button>
            </>
          )}
        </div>
      ))}
    </>
  );
};

export default MultipleRecorders;
```

### Customization and Control

The `pipeParams` object allows you to control various recording options, such as resolution, recording time, and [many more](https://addpipe.com/docs/recording-client/embed-code-options-desktop/). For example, you can configure 4K video recording or enable features like background blurring, screen + camera recording, audio only recording, and [many more](https://addpipe.com/docs/recording-client/embed-code-options-desktop/).

For the complete list of parameters and customization options, refer to the [Addpipe Embed Code Options](https://addpipe.com/docs/recording-client/embed-code-options-desktop/).

### Try It Out

The [@addpipe/react-pipe-media-recorder](https://www.npmjs.com/package/@addpipe/react-pipe-media-recorder) package is available now [via NPM](https://www.npmjs.com/package/@addpipe/react-pipe-media-recorder). This package equips you with everything needed to integrate the Pipe recording client into your React app.

For complete documentation and pricing information, visit:

• [Developer Documentation](https://addpipe.com/docs/)

• [Pricing Information](https://addpipe.com/pricing)