An embeddable video recorder your users can use without your API key

What the recorder does

The recorder lets your customers' users record the screen, the camera or both (or pick a file) on your site and send it to your account. It uploads while they record, so processing starts the moment they stop, then offers a review step with Upload or Retake. The recording becomes an ordinary video, so everything else in the API applies to it, including captions and trimming.

It is a custom element with its own shadow styles, about 8.5 KB gzipped, that fills its container's width. In screen + camera mode it shows a layout picker, covering the camera's corner and size or side by side, and the live preview matches how the worker will compose the video. See the screen recording API for what happens after upload.

The token model

Your API key must never reach a browser. Instead, your server makes a short-lived upload token that can upload one video and nothing else:

// 1. Your server (Node.js): an endpoint that makes a token
app.post("/api/upload-token", async (req, res) => {   // check the user is signed in, as you need
  const r = await fetch(`${API}/upload-tokens`, { method: "POST",
    headers: { Authorization: `Bearer ${API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify({ expiresIn: 300, maxSeconds: 600, metadata: { userId: String(req.user.id) } }) });
  res.status(r.status).json(await r.json());   // { uploadToken: "vpu_…", … }
});

<!-- 2. Your page: the recorder asks token-url for a fresh token when someone starts -->
<script src="https://videopiper.com/recorder/recorder.js"></script>
<video-piper-recorder token-url="/api/upload-token" max-seconds="600"></video-piper-recorder>
<script>
  document.querySelector("video-piper-recorder")
    .addEventListener("vp-uploaded", (e) => console.log("uploaded", e.detail.videoId));
</script>

These are the documentation's examples, which also include an ASP.NET Core version of the endpoint. Token settings are all optional and fixed by your server, so the browser can't change them: expiresIn (60 to 86400 seconds), maxSeconds (the video is trimmed to this length), maxBytes, maxHeight, captions and metadata.

• One video per token. Aborting an unfinished upload, as a retake does, frees it for another try.
• Shown once. Only a hash is kept, and the token expires on its own. expiresIn is the time to start; once an upload begins, its token keeps working for that upload for 24 hours.
• Counts like any upload. It shares your key's rate limits and your plan, and a 10-minute screen + camera recording takes roughly 20 API requests.

Attributes and events

Events are vp-state, vp-progress, vp-uploaded, vp-ready, vp-error (with a message fit to show) and vp-layout-change. Theme it with the custom properties --vp-accent, --vp-panel, --vp-line and --vp-text.

Prefer to see it first? Your account page has the snippets filled in with your addresses, and a Try the recorder button that makes a 15-minute token so the video lands in your list.

Which plans include the recorder

Recording the screen, camera or both, with upload while recording, needs Pro or Scale. Picking a file to upload works in the component on every plan.

Usage beyond a paid plan is billed at $0.09 per processing minute, $0.15 per GB-month of storage and $0.55 per GB of delivery. Full details are on the pricing page.

In the documentation

• The video-piper-recorder web component
• Upload tokens
• Screen + camera layouts
• Uploading while recording
• Webhooks

Frequently asked questions