ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 06:30:03 +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/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>