TUS Resumable Uploads

import crypto from "crypto";

const libraryId = "your-library-id";
const apiKey = "your-api-key";
const videoId = "video-guid-from-create-call";
const expirationTime = Math.floor(Date.now() / 1000) + 86400; // 24 hours from now

const signatureString = `${libraryId}${apiKey}${expirationTime}${videoId}`;
const signature = crypto
  .createHash("sha256")
  .update(signatureString)
  .digest("hex");

<?php

$libraryId = "your-library-id";
$apiKey = "your-api-key";
$videoId = "video-guid-from-create-call";
$expirationTime = time() + 86400; // 24 hours from now

$signatureString = $libraryId . $apiKey . $expirationTime . $videoId;
$signature = hash("sha256", $signatureString);

import hashlib
import time

library_id = "your-library-id"
api_key = "your-api-key"
video_id = "video-guid-from-create-call"
expiration_time = int(time.time()) + 86400  # 24 hours from now

signature_string = f"{library_id}{api_key}{expiration_time}{video_id}"
signature = hashlib.sha256(signature_string.encode()).hexdigest()

import { type NextRequest, NextResponse } from "next/server";
import { createHash } from "node:crypto";

interface CreateVideoResponse {
  guid: string;
  title: string;
  libraryId: number;
}

interface UploadCredentials {
  videoId: string;
  libraryId: string;
  expirationTime: number;
  signature: string;
  embedUrl: string;
}

export async function POST(request: NextRequest) {
  // Require a signed-in user here. This route is a public endpoint that creates
  // videos in your library and signs uploads into them.

  const BUNNY_API_KEY = process.env.BUNNY_STREAM_API_KEY;
  const BUNNY_LIBRARY_ID = process.env.BUNNY_STREAM_LIBRARY_ID;

  if (!BUNNY_API_KEY || !BUNNY_LIBRARY_ID) {
    return NextResponse.json(
      { error: "Bunny Stream not configured" },
      { status: 500 },
    );
  }

  const { title } = (await request.json()) as { title?: string };

  // Step 1: Create a video object in Bunny Stream
  const createResponse = await fetch(
    `https://video.bunnycdn.com/library/${BUNNY_LIBRARY_ID}/videos`,
    {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        AccessKey: BUNNY_API_KEY,
      },
      body: JSON.stringify({
        title: title ?? "Untitled Video",
      }),
    },
  );

  if (!createResponse.ok) {
    const error = await createResponse.text();
    console.error("Failed to create Bunny video:", error);
    return NextResponse.json(
      { error: "Failed to create video" },
      { status: 500 },
    );
  }

  const video = (await createResponse.json()) as CreateVideoResponse;

  // Step 2: Generate TUS upload credentials
  const expirationTime = Math.floor(Date.now() / 1000) + 86400; // 24 hours

  const signature = createHash("sha256")
    .update(`${BUNNY_LIBRARY_ID}${BUNNY_API_KEY}${expirationTime}${video.guid}`)
    .digest("hex");

  return NextResponse.json({
    videoId: video.guid,
    libraryId: BUNNY_LIBRARY_ID,
    expirationTime,
    signature,
    embedUrl: `https://player.mediadelivery.net/embed/${BUNNY_LIBRARY_ID}/${video.guid}`,
  } satisfies UploadCredentials);
}

"use client";

import { useState } from "react";
import * as tus from "tus-js-client";

interface UploadCredentials {
  videoId: string;
  libraryId: string;
  expirationTime: number;
  signature: string;
  embedUrl: string;
}

export function VideoUploader() {
  const [progress, setProgress] = useState(0);
  const [uploading, setUploading] = useState(false);
  const [videoUrl, setVideoUrl] = useState<string | null>(null);

  async function handleUpload(file: File) {
    setUploading(true);
    setProgress(0);

    // Get upload credentials from your API
    const response = await fetch("/api/upload", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title: file.name }),
    });

    if (!response.ok) {
      setUploading(false);
      throw new Error("Failed to get upload credentials");
    }

    const credentials = (await response.json()) as UploadCredentials;

    // Create TUS upload
    const upload = new tus.Upload(file, {
      endpoint: "https://video.bunnycdn.com/tusupload",
      retryDelays: [0, 3000, 5000, 10000, 20000, 60000],
      headers: {
        AuthorizationSignature: credentials.signature,
        AuthorizationExpire: String(credentials.expirationTime),
        VideoId: credentials.videoId,
        LibraryId: credentials.libraryId,
      },
      metadata: {
        filetype: file.type,
        title: file.name,
      },
      onError(error) {
        console.error("Upload error:", error);
        setUploading(false);
      },
      onProgress(bytesUploaded, bytesTotal) {
        setProgress(Math.round((bytesUploaded / bytesTotal) * 100));
      },
      onSuccess() {
        setVideoUrl(credentials.embedUrl);
        setUploading(false);
      },
    });

    // Each call signs a new video, so start fresh. To resume after a reload, see Resuming uploads.
    upload.start();
  }

  function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (file) {
      handleUpload(file);
    }
  }

  return (
    <div>
      <input
        type="file"
        accept="video/*"
        onChange={handleFileChange}
        disabled={uploading}
      />
      {uploading && <p>Uploading: {progress}%</p>}
      {videoUrl && (
        <iframe
          src={videoUrl}
          width="640"
          height="360"
          allow="autoplay; fullscreen"
        />
      )}
    </div>
  );
}