Integrating The Pipe Recorder With React Via NPM

Alexandru -

We’re excited to announce the release of our new NPM package, @addpipe/react-pipe-media-recorder, which integrates the Pipe recording client directly into React 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.

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

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

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 with Addpipe 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 to insert a single Pipe media recorder into the page and control it programmatically via the JS Control API.

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:

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. For example, you can configure 4K video recording or enable features like background blurring, screen + camera recording, audio only recording, and many more.

For the complete list of parameters and customization options, refer to the Addpipe Embed Code Options.

Try It Out

The @addpipe/react-pipe-media-recorder package is available now via NPM. 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

• Pricing Information