Pipe Recording Client

The easiest way to add video, audio, and screen + camera recording to your web app. This package provides the Pipe 2.0 recording client directly via npm, so no <script> or <link> tags needed.

Note: You will need a free trial or paid Addpipe account to use this package. Your account hash and environment ID are required when initializing the recorder.

This is the exact same Pipe 2.0 recording client, packaged for npm. The recorder still communicates with Pipe's servers at runtime. Installing via npm changes how you load the client, not how it works.

Install

npm install @addpipe/pipe-recording-client

React

For React projects, use the official hook instead: @addpipe/react-pipe-media-recorder

Usage Examples

With a bundler (Vite, webpack, Rollup, Next.js, …)

import PipeSDK from '@addpipe/pipe-recording-client';
import '@addpipe/pipe-recording-client/pipe.min.css';

PipeSDK.insert(
  'recorder-container',
  {
    size: { width: 640, height: 390 },
    qualityurl: 'avq/720p.xml',
    accountHash: 'YOUR_ACCOUNT_HASH',
    eid: 'YOUR_ENV_ID',
    mrt: 600,
    showMenu: 1,
  },
  (recorder) => {
    recorder.onReadyToRecord = (id, type) => console.log('Ready:', id, type);
    recorder.onSaveOk = (id, name, duration) => console.log('Saved:', name, duration + 's');
  }
);

Add a target element in your HTML:

<div id="recorder-container"></div>

Inserting multiple recorders into the page

Each recorder needs its own container ID and a separate PipeSDK.insert() call:

import PipeSDK from '@addpipe/pipe-recording-client';
import '@addpipe/pipe-recording-client/pipe.min.css';

const pipeParams = {
  size: { width: 640, height: 390 },
  qualityurl: 'avq/720p.xml',
  accountHash: 'YOUR_ACCOUNT_HASH',
  eid: 'YOUR_ENV_ID',
  mrt: 600,
};

PipeSDK.insert('recorder-1', pipeParams, (r1) => {
  r1.onSaveOk = (id, name) => console.log('Recorder 1 saved:', name);
});

PipeSDK.insert('recorder-2', pipeParams, (r2) => {
  r2.onSaveOk = (id, name) => console.log('Recorder 2 saved:', name);
});

<div id="recorder-1"></div>
<div id="recorder-2"></div>

Choosing the delivery server (CDN or S1/EU)

By default the recorder loads its static assets from the global CDN at cdn.addpipe.com. To load them from Pipe's EU client-delivery servers (S1) instead, call PipeSDK.setServer() before PipeSDK.insert():

import PipeSDK from '@addpipe/pipe-recording-client';
import '@addpipe/pipe-recording-client/pipe.min.css';

PipeSDK.setServer('s1'); // 'cdn' (default) | 's1'

PipeSDK.insert('recorder-container', pipeParams, (recorder) => {
  /* … */
});

• 'cdn' (default) — the global CDN, cdn.addpipe.com.
• 's1' — Pipe's EU client-delivery servers, s1.addpipe.com.

setServer() returns the resolved host. It has no effect once a recorder has been inserted, so call it first.

Controlling the Recorder

To control the recorders, you can use the API control methods, such as:

• record(): Starts a new recording.
• stopVideo(): Stops the recording.

A full list of the recorder's API control methods can be found in the official Pipe API Documentation.

Embed Code Parameters

The pipeParams object is used to configure the Pipe recorder. Here’s an example of its structure:

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
};

For more detailed embed code options, refer to the Addpipe Embed Code Options.

Documentation and Pricing

Official Developer Documentation: Addpipe Docs Pricing Information: Addpipe Pricing

Features

• Video, Audio, and Screen Recording: Add high-quality media recording functionality to any project, supporting both desktop and mobile devices.
• Up to 4K Video: Supports recording up to 4K resolution.
• No Upload Time: Stream recordings while they are created, minimizing the wait time for users.
• Mobile Compatibility: Supports HTML Media Capture for mobile video/audio recording.
• Screen + Camera Recording: Capture both the screen and camera simultaneously for enhanced recording capabilities.
• Multilingual Support: Available in multiple languages: English, French, German, and Spanish, with custom language support.
• Keyboard Accessibility: Fully controllable via keyboard for improved accessibility.
• Connection Resilience: Auto-reconnect ensures data recovery if the connection drops during recording.

Changelog

A changelog is available here.