Video, audio and screen recording. One JavaScript client.

// hide AddPipe's controls, use your own buttons
PipeSDK.insert("recorder", {
  size: { width: 640, height: 390 },
  qualityurl: "avq/1080p.xml",
  accountHash: "YOUR_ACCOUNT_HASH",
  eid: "YOUR_ENV_ID",
  showMenu: false,
  mrt: 300
}, (recorder) => {
  // control API
  $("#start").onclick = () => recorder.record();
  $("#stop").onclick  = () => recorder.stopVideo();

  // events API
  recorder.onReadyToRecord      = () => enable("#start");
  recorder.onRecordingStarted   = () => showTimer();
  recorder.onConnectionClosed   = () => toast("Reconnecting…");
  recorder.onSaveOk = (id, name, duration) => done(name, duration);
});

// npm i @addpipe/react-pipe-media-recorder
import { usePipeSDK } from "@addpipe/react-pipe-media-recorder";

export function Recorder() {
  const { isLoaded } = usePipeSDK((recorders) => {
    const r = recorders[0];
    r.onSaveOk = (id, name, duration) => save(name, duration);
  }, {
    size: { width: 640, height: 390 },
    qualityurl: "avq/720p.xml",
    accountHash: "YOUR_ACCOUNT_HASH",
    eid: "YOUR_ENV_ID"
  });

  return <div id="custom-id" />;
}