heygen-com · miguel-heygen · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026
diff --git a/packages/core/src/studio-api/routes/render.ts b/packages/core/src/studio-api/routes/render.ts
@@ -216,6 +216,50 @@ export function registerRenderRoutes(api: Hono, adapter: StudioApiAdapter): void
     });
   });
 
+  // Upload a browser-rendered video (client-side renderer posts the blob here)
+  api.post("/projects/:id/renders/upload", async (c) => {
+    const project = await adapter.resolveProject(c.req.param("id"));
+    if (!project) return c.json({ error: "not found" }, 404);
+
+    const rendersDir = adapter.rendersDir(project);
+    if (!existsSync(rendersDir)) mkdirSync(rendersDir, { recursive: true });
+
+    const body = await c.req.arrayBuffer();
+    if (!body || body.byteLength === 0) {
+      return c.json({ error: "empty body" }, 400);
+    }
+
+    const format = c.req.query("format") ?? "mp4";
+    const now = new Date();
+    const datePart = now.toISOString().slice(0, 10);
+    const timePart = now.toTimeString().slice(0, 8).replace(/:/g, "-");
+    const jobId = `${project.id}_browser_${datePart}_${timePart}`;
+    const ext = format === "webm" ? ".webm" : ".mp4";
+    const outputPath = join(rendersDir, `${jobId}${ext}`);
+
+    const { writeFileSync: writeFile } = await import("node:fs");
+    writeFile(outputPath, Buffer.from(body));
+    writeFile(
+      outputPath.replace(/\.(mp4|webm)$/, ".meta.json"),
+      JSON.stringify({
+        status: "complete",
+        source: "browser",
+        durationMs: Number(c.req.query("durationMs") ?? 0),
+      }),
+    );
+
+    // Register in job store so it shows in the renders list
+    renderJobs.set(jobId, {
+      id: jobId,
+      status: "complete",
+      progress: 100,
+      outputPath,
+      createdAt: Date.now(),
+    } as RenderJobState & { createdAt: number });
+
+    return c.json({ jobId, filename: `${jobId}${ext}`, size: body.byteLength });
+  });
+
   // List renders
   api.get("/projects/:id/renders", async (c) => {
     const project = await adapter.resolveProject(c.req.param("id"));

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@hyperframes/renderer",
+  "version": "0.0.1",
+  "description": "Client-side video renderer for HyperFrames compositions",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/heygen-com/hyperframes",
+    "directory": "packages/renderer"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@zumer/snapdom": "^2.8.0",
+    "mediabunny": "^1.40.0"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^28.0.1",
+    "jsdom": "^29.0.2",
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "@hyperframes/core": "workspace:^"
+  }
+}
diff --git a/packages/renderer/public/turbo-worker.html b/packages/renderer/public/turbo-worker.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Turbo Worker</title>
+</head>
+<body>
+<script type="module" src="./turbo-worker.bundle.js"></script>
+</body>
+</html>
diff --git a/packages/renderer/scripts/compile-test.ts b/packages/renderer/scripts/compile-test.ts
@@ -0,0 +1,92 @@
+/**
+ * Compile a single test composition via the producer's htmlCompiler.
+ * Usage: npx tsx --esm packages/renderer/scripts/compile-test.ts <test-name>
+ */
+import { writeFileSync, mkdirSync, cpSync } from "node:fs";
+import { resolve, join } from "node:path";
+import { compileForRender } from "../../producer/src/services/htmlCompiler.js";
+import { getVerifiedHyperframeRuntimeSource } from "../../producer/src/services/hyperframeRuntimeLoader.js";
+
+const testName = process.argv[2];
+if (!testName) {
+  console.error("Usage: npx tsx packages/renderer/scripts/compile-test.ts <test-name>");
+  process.exit(1);
+}
+
+const srcDir = resolve(`packages/producer/tests/${testName}/src`);
+const htmlPath = join(srcDir, "index.html");
+const outputDir = resolve(`renders/parity-regression/${testName}`);
+mkdirSync(outputDir, { recursive: true });
+
+console.log(`Compiling ${testName}...`);
+
+// Copy all source assets to output dir so the composition can resolve relative paths
+cpSync(srcDir, outputDir, { recursive: true, force: true });
+
+const result = await compileForRender(srcDir, htmlPath, outputDir);
+
+// Inject the HyperFrames runtime IIFE and the __player → __hf bridge.
+// The producer's file server normally serves these separately,
+// but for client-side rendering we need them inline.
+const runtimeSource = getVerifiedHyperframeRuntimeSource();
+
+// Bridge script: maps window.__player (set by runtime) → window.__hf (engine protocol)
+const bridgeScript = `(function() {
+  function getDeclaredDuration() {
+    var root = document.querySelector('[data-composition-id]');
+    if (!root) return 0;
+    var d = Number(root.getAttribute('data-duration'));
+    return Number.isFinite(d) && d > 0 ? d : 0;
+  }
+  function bridge() {
+    var p = window.__player;
+    if (!p || typeof p.renderSeek !== "function" || typeof p.getDuration !== "function") {
+      return false;
+    }
+    window.__hf = {
+      get duration() {
+        var d = p.getDuration();
+        return d > 0 ? d : getDeclaredDuration();
+      },
+      seek: function(t) { p.renderSeek(t); },
+    };
+    return true;
+  }
+  if (bridge()) return;
+  var iv = setInterval(function() {
+    if (bridge()) clearInterval(iv);
+  }, 50);
+})();`;
+
+const runtimeTag = `<script data-hyperframes-render-runtime>${runtimeSource}</script>`;
+const bridgeTag = `<script data-hyperframes-bridge>${bridgeScript}</script>`;
+const htmlWithRuntime = result.html.replace("</body>", `${runtimeTag}\n${bridgeTag}\n</body>`);
+
+writeFileSync(join(outputDir, "compiled.html"), htmlWithRuntime);
+writeFileSync(
+  join(outputDir, "compile-meta.json"),
+  JSON.stringify(
+    {
+      width: result.width,
+      height: result.height,
+      staticDuration: result.staticDuration,
+      videoCount: result.videos.length,
+      audioCount: result.audios.length,
+      htmlLength: result.html.length,
+    },
+    null,
+    2,
+  ),
+);
+
+console.log(
+  JSON.stringify({
+    ok: true,
+    width: result.width,
+    height: result.height,
+    staticDuration: result.staticDuration,
+    videos: result.videos.length,
+    audios: result.audios.length,
+    htmlLength: result.html.length,
+  }),
+);