feat(media): alpha-capable authoring proxies (#2598)

* feat(media): alpha-capable authoring proxies

Alpha sources were refused a proxy before the codec map ever asked whether the
browser could decode them, so a ProRes 4444 alpha file (which no browser
previews at all) rendered black forever, while an alpha WebM (which previews
fine) was already covered by the browser-safe check on the next line. The alpha
veto earned nothing and cost the one case that needed help.

Alpha is now a target-codec choice rather than a veto: alpha sources transcode
to VP9 + yuva420p in WebM, everything else keeps the existing H.264/MP4 path
byte for byte. Only files no browser can preview are proxied, which is the rule
the runtime already followed everywhere else.

WebM cannot carry AAC, so the VP9 path uses Opus and drops the MP4-only
faststart flag. PROXY_PARAMS_VERSION moves to v3 so clients stop serving the
previously cached proxies.

Safari does not decode VP9 alpha and still shows black for alpha sources, as it
does today: this is better on Chromium and Firefox and no worse anywhere.

* fix(media): infer proxy variant for rescue

* fix(media): preserve alpha proxy hardening after restack
This commit is contained in:
Miguel Ángel
2026-07-17 03:26:55 -04:00
committed by GitHub
parent 8c1b6c5154
commit e8371a7acc
21 changed files with 601 additions and 240 deletions
+30 -13
View File
@@ -59,10 +59,20 @@ const mediaMocks = vi.hoisted(() => ({
representativeMime: "video/mp4",
hasAlpha: false,
})),
decideMediaProxyEligibility: vi.fn(
(facts: { hasAlpha: boolean; browserHostile: boolean } | null) =>
facts?.hasAlpha ? { eligible: false, reason: "alpha_source" } : { eligible: true },
decideMediaProxyEligibility: vi.fn((facts: { browserHostile: boolean } | null) =>
facts?.browserHostile ? { eligible: true } : { eligible: false, reason: "browser_safe_codec" },
),
isProxyVariant: (value: string) => value === "h264" || value === "vp9",
isProxyVariantRequest: (value: string) => value === "auto" || value === "h264" || value === "vp9",
proxyVariantFor: (facts: { hasAlpha?: boolean }) => (facts.hasAlpha ? "vp9" : "h264"),
resolveProxyVariantRequest: (request: "auto" | "h264" | "vp9", facts: { hasAlpha?: boolean }) => {
const expected = facts.hasAlpha ? "vp9" : "h264";
return request === "auto" || request === expected ? expected : null;
},
PROXY_VARIANT_CONFIG: {
h264: { extension: ".mp4", contentType: "video/mp4" },
vp9: { extension: ".webm", contentType: "video/webm" },
},
}));
vi.mock("@hyperframes/studio-server/proxy-transcoder", () => ({
@@ -109,7 +119,7 @@ afterEach(() => {
dir = undefined;
});
it("rejects direct proxy requests for alpha sources", async () => {
it("serves direct VP9 proxy requests for alpha sources", async () => {
const project = tmpProject();
writeFileSync(join(project.dir, "clip.mov"), "alpha-prores");
mediaMocks.probeAssetCodec.mockResolvedValueOnce({
@@ -118,17 +128,20 @@ it("rejects direct proxy requests for alpha sources", async () => {
representativeMime: "video/quicktime",
hasAlpha: true,
});
mediaMocks.decideMediaProxyEligibility.mockReturnValueOnce({
eligible: false,
reason: "alpha_source",
});
const proxyPath = join(project.dir, "proxy.webm");
writeFileSync(proxyPath, "vp9-alpha-proxy");
mocks.resolveProxy.mockResolvedValueOnce(proxyPath);
const app = await buildApp(project, true);
const res = await app.request("/composition/clip.mov?hf-proxy=h264");
const res = await app.request("/composition/clip.mov?hf-proxy=auto");
expect(res.status).toBe(422);
expect(await res.text()).toContain("alpha_source");
expect(mocks.resolveProxy).not.toHaveBeenCalled();
expect(res.status).toBe(200);
expect(res.headers.get("content-type")).toBe("video/webm");
expect(mocks.resolveProxy).toHaveBeenCalledWith(
project.dir,
join(project.dir, "clip.mov"),
"vp9",
);
});
async function buildApp(project: ProjectDir, autoProxy: boolean): Promise<Hono> {
@@ -163,7 +176,11 @@ describe("registerCompositionRoute", () => {
expect(res.status).toBe(200);
expect(await res.text()).toBe("transcoded-h264-bytes");
expect(mocks.resolveProxy).toHaveBeenCalledWith(project.dir, join(project.dir, "clip.mp4"));
expect(mocks.resolveProxy).toHaveBeenCalledWith(
project.dir,
join(project.dir, "clip.mp4"),
"h264",
);
});
it("serves ?hf-proxy=h264 for a .mov hostile asset as Content-Type video/mp4 (the proxy IS mp4)", async () => {
+21 -9
View File
@@ -44,7 +44,10 @@ import {
} from "@hyperframes/studio-server/proxy-transcoder";
import {
decideMediaProxyEligibility,
isProxyVariantRequest,
probeAssetCodec,
resolveProxyVariantRequest,
PROXY_VARIANT_CONFIG,
} from "@hyperframes/studio-server/media-codec-map";
export default defineCommand({
@@ -72,7 +75,7 @@ export default defineCommand({
proxy: {
type: "boolean",
description:
"Auto-transcode browser-hostile video codecs (HEVC, ProRes, AV1) to a cached H.264 proxy for preview (default: on; overrides hyperframes.json's media.autoProxy)",
"Auto-transcode browser-hostile video codecs (HEVC, ProRes, AV1) to a cached authoring proxy for preview (default: on; overrides hyperframes.json's media.autoProxy)",
negativeDescription: "Disable auto-proxying of browser-hostile video codecs",
},
},
@@ -192,8 +195,8 @@ export default defineCommand({
* Registers the `/composition/*` route: serves composition HTML (runtime +
* `__HF_MEDIA_CODEC_MAP__` injected) and asset files, with byte-Range support
* (`play` previously did a whole-file `readFileSync`, so seeking/duration
* probing on media elements never worked) and a `?hf-proxy=h264` branch that
* serves the cached H.264 authoring proxy for a browser-hostile video asset
* probing on media elements never worked) and a `?hf-proxy=` branch that
* serves the alpha-aware authoring proxy for a browser-hostile video asset
* (per docs/plans/2026-07-14-002-feat-transparent-media-proxies-plan.md,
* unit U4). Exported standalone (rather than inlined in `run()`) so tests can
* exercise it via `app.request(...)` without booting a real HTTP listener,
@@ -228,19 +231,28 @@ export async function registerCompositionRoute(
}
const contentType = assetContentType(filePath);
if (ctx.req.query("hf-proxy") === "h264") {
const proxyParam = ctx.req.query("hf-proxy");
if (proxyParam !== undefined && isProxyVariantRequest(proxyParam)) {
// Opt-out (or a non-video asset) 404s the param without attempting a
// transcode; a missing asset already 404'd above.
if (!autoProxy || !contentType.startsWith("video/")) return ctx.text("Not found", 404);
try {
const eligibility = decideMediaProxyEligibility(await probeAssetCodec(filePath));
const facts = await probeAssetCodec(filePath);
const eligibility = decideMediaProxyEligibility(facts);
if (!eligibility.eligible) {
return ctx.text(`Media proxy unavailable: ${eligibility.reason}`, 422);
}
const proxyPath = await resolveProxy(project.dir, filePath);
// The proxy IS an mp4 regardless of the source's extension (.mov,
// .mkv, ...) — serve its real type, matching the preview route.
return buildRangeResponse(proxyPath, "video/mp4", ctx.req.header("Range"));
if (!facts) return ctx.text("Media proxy unavailable: unknown_codec", 422);
const proxyVariant = resolveProxyVariantRequest(proxyParam, facts);
if (!proxyVariant) {
return ctx.text("Media proxy variant does not match asset", 422);
}
const proxyPath = await resolveProxy(project.dir, filePath, proxyVariant);
return buildRangeResponse(
proxyPath,
PROXY_VARIANT_CONFIG[proxyVariant].contentType,
ctx.req.header("Range"),
);
} catch (err) {
if (err instanceof ProxyCapacityError) {
return ctx.text(`Proxy transcode deferred: ${err.message}`, 503, {
+1 -1
View File
@@ -192,7 +192,7 @@ export default defineCommand({
proxy: {
type: "boolean",
description:
"Auto-transcode browser-hostile video codecs (HEVC, ProRes, AV1) to a cached H.264 proxy for preview (default: on; overrides hyperframes.json's media.autoProxy)",
"Auto-transcode browser-hostile video codecs (HEVC, ProRes, AV1) to a cached authoring proxy for preview (default: on; overrides hyperframes.json's media.autoProxy)",
negativeDescription: "Disable auto-proxying of browser-hostile video codecs",
},
},