Build a video sharing app with StreamGate

StreamGate is a self-hosted video sharing web app built with Next.js and powered by FastPix. It lets users upload videos or record their screen and camera in the browser, then share a permanent link within seconds. No database is required.

Live demo: streamgate.dev

Overview

StreamGate implements a complete video upload and playback workflow using FastPix APIs. Key capabilities include:

• Drag-and-drop file uploading with a progress bar
• In-browser screen and camera recording through the MediaRecorder API
• Adaptive HLS playback delivered over FastPix’s global CDN with an adaptive bitrate ladder
• Webhook event handling for asset lifecycle events
• Permanent shareable URLs for every uploaded video

Before you begin

System requirements

Get your FastPix API credentials

FastPix APIs use HTTP Basic Auth. Your Access Token ID is the username; your Secret Key is the password.

To generate credentials:

1. Log in to the FastPix Dashboard.
2. Go to Manage → Access Tokens.
3. Copy your Access Token ID and Secret Key.

For detailed steps, see Authentication with Basic Auth.

Set up StreamGate

Clone the repository and install dependencies

$
git clone https://github.com/FastPix/streamGate.git
$
cd streamGate
$
npm install

Configure environment variables

Create a .env.local file in the project root:

$
touch .env.local

Add the following variables:

FASTPIX_ACCESS_TOKEN_ID=your-access-token-id
FASTPIX_SECRET_KEY=your-secret-key
FASTPIX_WEBHOOK_SECRET=your-webhook-secret
NEXT_PUBLIC_BASE_URL=http://localhost:3000

WARNING:

Never commit .env.local to version control. The file is already listed in .gitignore.

For a full description of each variable, see Environment variables reference.

Start the development server

$
npm run dev

Open http://localhost:3000 in your browser.

Routes and API endpoints

Upload

Playback

Recording

Webhooks

Integrate StreamGate into an existing app

You don’t need to run StreamGate as a standalone project. You can copy individual parts into your own codebase.

Option A: Copy the API routes (backend only)

Copy the following files into your Next.js project for server-side FastPix integration:

lib/fastpix.ts
app/api/uploads/route.ts
app/api/uploads/[id]/route.ts
app/api/assets/[id]/route.ts
app/api/webhooks/fastpix/route.ts     # optional

Install the FastPix Node SDK:

$
npm install @fastpix/fastpix-node

Then call the routes from your existing frontend:

1
// 1. Get a signed upload URL
2
const { uploadId, url } = await fetch('/api/uploads', { method: 'POST' }).then(r => r.json());
3
4
// 2. Upload the file directly to FastPix
5
await fetch(url, {
6
  method: 'PUT',
7
  body: file,
8
  headers: { 'Content-Type': file.type }
9
});
10
11
// 3. Poll until the asset is ready (2-minute timeout)
12
let mediaId;
13
for (let i = 0; i < 60; i++) {
14
  await new Promise(r => setTimeout(r, 2000));
15
  const data = await fetch(`/api/uploads/${uploadId}`).then(r => r.json());
16
  if (data.mediaId && data.status !== 'waiting') {
17
    mediaId = data.mediaId;
18
    break;
19
  }
20
}
21
22
// 4. Get the playback ID and render the player
23
const { playbackId } = await fetch(`/api/assets/${mediaId}`).then(r => r.json());

Option B: Copy the React components

Copy these ready-made components into your Next.js or React project:

<Uploader /> — drag-and-drop file upload with a progress bar:

1
import Uploader from '../../../components/Uploader';
2
3
<Uploader />

<Player /> — FastPix HLS player web component:

1
import Player from '../../../components/Player';
2
3
<Player playbackId="your-playback-id" />

<Recorder /> — in-browser screen and camera recorder:

1
import Recorder from '../../../components/Recorder';
2
3
<Recorder />

Install the required dependencies:

$
npm install @fastpix/fp-player swr fix-webm-duration

Option C: Use the FastPix Node SDK directly

For non-Next.js backends, use the FastPix Node SDK without any of the StreamGate files:

$
npm install @fastpix/fastpix-node

1
import { Fastpix } from '@fastpix/fastpix-node';
2
3
import { PageSchema } from "../../../components/PageSchema";
4
5
<PageSchema
6
  headline={"Build a Video Sharing App (StreamGate) | FastPix"}
7
  description={"Build a full video-sharing app on FastPix with the StreamGate example: upload, process, and play user videos end to end. Full walkthrough with reference code."}
8
  url={"https://fastpix.com/docs/integrations/streamgate"}
9
  breadcrumb={["Docs Home", "Integrations", "Build a video sharing app with StreamGate"]}
10
/>
11
12
const fp = new Fastpix({
13
  security: {
14
    username: process.env.FASTPIX_ACCESS_TOKEN_ID,
15
    password: process.env.FASTPIX_SECRET_KEY,
16
  },
17
});
18
19
const result = await fp.inputVideo.upload({
20
  corsOrigin: '*',
21
  pushMediaSettings: {
22
    accessPolicy: 'public',
23
    maxResolution: '1080p'
24
  },
25
});
26
27
console.log(result.data.uploadId, result.data.url);

For the full SDK reference, see the FastPix API reference.

Webhooks

StreamGate verifies incoming FastPix webhook payloads using HMAC-SHA256. To enable verification, set the FASTPIX_WEBHOOK_SECRET environment variable.

Register your endpoint

In the FastPix Dashboard, go to Manage → Webhooks and add:

https://your-domain.com/api/webhooks/fastpix

Supported events

Note: If FASTPIX_WEBHOOK_SECRET is not set, signature verification is skipped. This is acceptable for local development but not recommended in production.

Error handling

All API routes return JSON error responses with an error field and an HTTP status code.

Example: handling an upload error

1
const res = await fetch('/api/uploads', { method: 'POST' });
2
if (!res.ok) {
3
  const { error } = await res.json();
4
  console.error('Upload failed:', error);
5
}

FastPix API errors are logged to the server console with the full status code, response body, and headers.

Deploy to Cloudflare Pages

Cloudflare Pages is the recommended deployment target for StreamGate.

Install the adapter and Wrangler CLI

$
npm install --save-dev @cloudflare/next-on-pages wrangler

Create wrangler.toml

In the project root, create a wrangler.toml file with the following content:

1
name = "streamgate"
2
compatibility_date = "2024-09-23"
3
compatibility_flags = ["nodejs_compat"]
4
pages_build_output_dir = ".vercel/output/static"

NOTE:

The nodejs_compat flag is required. StreamGate uses the FastPix SDK and the Node.js crypto module for webhook signature verification.

Add build scripts to package.json

1
"scripts": {
2
  "pages:build": "npx @cloudflare/next-on-pages",
3
  "pages:deploy": "npm run pages:build && wrangler pages deploy"
4
}

Deploy

$
npm run pages:deploy

Set environment variables

1. Open the Cloudflare Dashboard.
2. Go to Pages → your project → Settings → Environment variables.
3. Add all four environment variables for both the Production and Preview environments.
4. Set NEXT_PUBLIC_BASE_URL to your production domain, for example https://streamgate.pages.dev.

Environment variables reference

What’s next

• FastPix API reference
• Authentication with Basic Auth
• FastPix Node SDK on npm
• StreamGate source on GitHub