ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

test(render): add WebM regression test and getEncoderPreset unit tests

Browse Source 
- New regression test `webm-transparency`: minimal transparent composition
  rendered to WebM, validates VP9 codec and visual quality at 100
  checkpoints against golden baseline
- Extend regression harness: `renderConfig.format` field ("mp4" | "webm"),
  format-aware output paths and snapshot filenames
- Fix `extractMonoPcm16` to gracefully handle videos without audio
  streams (WebM without audio was throwing instead of returning empty)
- Unit tests for `getEncoderPreset()`: VP9/yuva420p for WebM,
  h264/yuv420p for MP4, preset mapping, quality preservation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
James
2026-03-27 02:19:43 +00:00
co-authored by Claude Opus 4.6
parent 15f6b86ac0
commit a146c9e527
6 changed files with 211 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/producer/tests/webm-transparency/meta.json
+14
View File
@@ -0,0 +1,14 @@
{
"name": "webm-transparency",
"description": "WebM VP9 render with transparent background (alpha channel). Validates the full WebM pipeline: PNG capture, VP9 encoding with yuva420p, and alpha_mode=1 metadata.",
"tags": ["webm", "transparency", "fast"],
"minPsnr": 30,
"maxFrameFailures": 2,
"minAudioCorrelation": 0.0,
"maxAudioLagWindows": 120,
"renderConfig": {
"fps": 30,
"format": "webm",
"workers": 1
}
}
packages/producer/tests/webm-transparency/output/compiled.html
+49
View File
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; }
html, body { background: transparent; overflow: hidden; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="640" data-height="360" style="width: 640px; height: 360px; background: transparent; position: relative">
<!-- Semi-transparent red box that animates across the frame -->
<div id="box" data-start="0" data-duration="2" data-track-index="0" style="
width: 120px;
height: 120px;
background: rgba(255, 0, 0, 0.7);
border-radius: 16px;
position: absolute;
top: 120px;
left: 50px;
"></div>
<!-- White text with transparent background -->
<div id="label" data-start="0.5" data-duration="1.5" data-track-index="1" style="
font-family: sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
position: absolute;
top: 280px;
left: 50px;
opacity: 0;
">Overlay Test</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
</div>
<script>window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// Animate box sliding right
tl.to("#box", { left: 470, duration: 2, ease: "power2.inOut" }, 0);
// Fade in label
tl.to("#label", { opacity: 1, duration: 0.5, ease: "power2.out" }, 0.5);
window.__timelines["main"] = tl;</script></body>
</html>
packages/producer/tests/webm-transparency/output/output.webm
BIN
View File
Binary file not shown.
packages/producer/tests/webm-transparency/src/index.html
+71
View File
@@ -0,0 +1,71 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style>
* { margin: 0; padding: 0; }
html, body { background: transparent; overflow: hidden; }
</style>
</head>
<body>
<div
id="root"
data-composition-id="main"
data-start="0"
data-duration="2"
data-width="640"
data-height="360"
style="width: 640px; height: 360px; background: transparent; position: relative"
>
<!-- Semi-transparent red box that animates across the frame -->
<div
id="box"
data-start="0"
data-duration="2"
data-track-index="0"
style="
width: 120px;
height: 120px;
background: rgba(255, 0, 0, 0.7);
border-radius: 16px;
position: absolute;
top: 120px;
left: 50px;
"
></div>
<!-- White text with transparent background -->
<div
id="label"
data-start="0.5"
data-duration="1.5"
data-track-index="1"
style="
font-family: sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
position: absolute;
top: 280px;
left: 50px;
opacity: 0;
"
>Overlay Test</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// Animate box sliding right
tl.to("#box", { left: 470, duration: 2, ease: "power2.inOut" }, 0);
// Fade in label
tl.to("#label", { opacity: 1, duration: 0.5, ease: "power2.out" }, 0.5);
window.__timelines["main"] = tl;
</script>
</div>
</body>
</html>