Run ffmpeg from a Vercel route handler, without bundling it

vercel env add REELSDK_KEY production
vercel env add REELSDK_WEBHOOK_SECRET production

vercel deploy --prod

import { handleUpload, type HandleUploadBody } from "@vercel/blob/client";

export async function POST(request: Request) {
  const body = (await request.json()) as HandleUploadBody;

  try {
    const json = await handleUpload({
      body,
      request,
      onBeforeGenerateToken: async () => {
        // We check the signed-in user here before handing out an upload token
        return {
          allowedContentTypes: ["video/mp4", "video/quicktime", "video/webm"],
          addRandomSuffix: true,
        };
      },
      onUploadCompleted: async ({ blob }) => {
        console.log("upload finished", blob.url);
      },
    });
    return Response.json(json);
  } catch (error) {
    return Response.json({ error: (error as Error).message }, { status: 400 });
  }
}

"use client";

import { upload } from "@vercel/blob/client";
import { useState } from "react";

export function ReframeForm() {
  const [status, setStatus] = useState("");

  async function onChange(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file) return;

    setStatus("Uploading");
    const blob = await upload(file.name, file, {
      access: "public",
      handleUploadUrl: "/api/blob-upload",
    });

    setStatus("Rendering");
    const res = await fetch("/api/reframe", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ videoUrl: blob.url }),
    });
    const result = await res.json();
    setStatus(result.video ?? `Job ${result.id} is ${result.status}`);
  }

  return (
    <label>
      <input type="file" accept="video/*" onChange={onChange} />
      <span>{status}</span>
    </label>
  );
}

export const maxDuration = 300;

const REELSDK = "https://api.reelsdk.com";

export async function POST(request: Request) {
  const { videoUrl } = await request.json();

  const res = await fetch(`${REELSDK}/v1/ffmpeg?wait=280`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.REELSDK_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      inputs: { "in.mp4": videoUrl },
      args: [
        "-i", "in.mp4",
        "-vf", "crop=ih*9/16:ih,scale=1080:1920,setsar=1",
        "-c:v", "libx264", "-crf", "20", "-c:a", "aac",
        "out.mp4",
      ],
      outputs: ["out.mp4"],
      webhook_url: `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/api/reelsdk-webhook`,
    }),
  });

  const { job, error } = await res.json();
  if (!res.ok) return Response.json({ error }, { status: res.status });

  // 200 means the mp4 is ready, 202 means the webhook delivers it later
  return Response.json(
    { id: job.id, status: job.status, video: job.outputs?.["out.mp4"] ?? null },
    { status: res.status },
  );
}

import { createHmac, timingSafeEqual } from "node:crypto";

export async function POST(request: Request) {
  const body = await request.text();
  const signature = request.headers.get("reel-signature") ?? "";

  if (!verifyReelSignature(signature, body, process.env.REELSDK_WEBHOOK_SECRET!)) {
    return new Response("invalid signature", { status: 401 });
  }

  const job = JSON.parse(body);
  // We save job.status and job.outputs["out.mp4"] for job.id in the database here
  console.log("reelsdk job finished", job.id, job.status);
  return new Response("ok");
}

function verifyReelSignature(header: string, body: string, secret: string) {
  const parts = Object.fromEntries(header.split(",").map((part) => part.split("=", 2)));
  const age = Math.abs(Date.now() / 1000 - Number(parts.t));
  if (!/^[0-9a-f]{64}$/i.test(parts.v1 ?? "") || !(age <= 300)) return false;

  const expected = createHmac("sha256", secret).update(`${parts.t}.${body}`).digest();
  return timingSafeEqual(expected, Buffer.from(parts.v1, "hex"));
}