mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
fix(engine): preserve video frame replacement geometry (#838)
* fix(engine): preserve video frame replacement geometry * test(producer): cover video overlay stretch regression * fix(engine): always pass clip to Page.captureScreenshot Without an explicit clip, Chrome can resolve replaced-element sizing differently at dpr=1 when full-bleed absolute videos interact with overlay layers — producing anisotropic frame stretching on some compositor paths. Always passing clip with scale=dpr (including 1) ensures geometry is locked to the measured viewport dimensions. Credit: brian-t-allen (#837) * test(producer): regenerate style-9-prod baseline for always-clip capture path The always-clip change in screenshotService.ts routes Chrome through a different compositor capture path at dpr=1, producing different video frame compression artifacts. Regenerated inside Dockerfile.test to match CI environment. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Miguel Ángel
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
952d2658b0
commit
8e0cfc33a7
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "render-video-overlay-stretch",
|
||||
"description": "Regression fixture for #837. Renders two full-bleed MP4 clips with position:absolute/inset:0 and an image overlay across the cut. The injected video-frame <img> must preserve the source video's measured 16:9 box instead of inheriting opposing inset constraints that can stretch the frame during overlay transitions.",
|
||||
"tags": ["regression", "video", "overlay"],
|
||||
"minPsnr": 30,
|
||||
"maxFrameFailures": 0,
|
||||
"minAudioCorrelation": 0,
|
||||
"maxAudioLagWindows": 1,
|
||||
"renderConfig": {
|
||||
"fps": 30,
|
||||
"workers": 1
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=480, height=270">
|
||||
<title>Video Overlay Stretch Regression</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 480px;
|
||||
height: 270px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#root {
|
||||
position: relative;
|
||||
width: 480px;
|
||||
height: 270px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.scene-video {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.transition-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.cut-label {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 20;
|
||||
padding: 5px 8px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.88);
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.68);
|
||||
font: 700 13px Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="video-overlay-stretch" data-start="0" data-duration="4" data-width="480" data-height="270">
|
||||
<video id="clip-a" class="clip scene-video" src="clip.mp4" data-start="0" data-duration="2" data-track-index="0" muted playsinline data-end="2" data-has-audio="false"></video>
|
||||
|
||||
<video id="clip-b" class="clip scene-video" src="clip.mp4" data-start="2" data-duration="2" data-track-index="1" muted playsinline data-end="4" data-has-audio="false"></video>
|
||||
|
||||
<img id="transition" class="clip transition-overlay" src="transition-overlay.png" data-start="1.6" data-duration="0.8" data-track-index="10" alt="">
|
||||
|
||||
<div class="clip cut-label" data-start="0" data-duration="2" data-track-index="20">
|
||||
CLIP A
|
||||
</div>
|
||||
<div class="clip cut-label" data-start="2" data-duration="2" data-track-index="21">
|
||||
CLIP B
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>window.__timelines = window.__timelines || {};</script></body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:95f96e2676be7808074ca22dc06f68bb845c83ff3f2036afd75730c4c487cc3a
|
||||
size 20066
|
||||
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:da59ab7e77075ae083b9c957bc6d7896a0e0d62eeef4f50be63e278a1feb7303
|
||||
size 5358
|
||||
@@ -0,0 +1,113 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=480, height=270" />
|
||||
<title>Video Overlay Stretch Regression</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 480px;
|
||||
height: 270px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#root {
|
||||
position: relative;
|
||||
width: 480px;
|
||||
height: 270px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.scene-video {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.transition-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.cut-label {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 20;
|
||||
padding: 5px 8px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.88);
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.68);
|
||||
font: 700 13px Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="video-overlay-stretch"
|
||||
data-start="0"
|
||||
data-duration="4"
|
||||
data-width="480"
|
||||
data-height="270"
|
||||
>
|
||||
<video
|
||||
id="clip-a"
|
||||
class="clip scene-video"
|
||||
src="clip.mp4"
|
||||
data-start="0"
|
||||
data-duration="2"
|
||||
data-track-index="0"
|
||||
muted
|
||||
playsinline
|
||||
></video>
|
||||
|
||||
<video
|
||||
id="clip-b"
|
||||
class="clip scene-video"
|
||||
src="clip.mp4"
|
||||
data-start="2"
|
||||
data-duration="2"
|
||||
data-track-index="1"
|
||||
muted
|
||||
playsinline
|
||||
></video>
|
||||
|
||||
<img
|
||||
id="transition"
|
||||
class="clip transition-overlay"
|
||||
src="transition-overlay.png"
|
||||
data-start="1.6"
|
||||
data-duration="0.8"
|
||||
data-track-index="10"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<div class="clip cut-label" data-start="0" data-duration="2" data-track-index="20">
|
||||
CLIP A
|
||||
</div>
|
||||
<div class="clip cut-label" data-start="2" data-duration="2" data-track-index="21">
|
||||
CLIP B
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:79aa1c819cfedf44f09b80e6bb1f161eea3d8090dfc0eb3929a421c6b9e46664
|
||||
size 1207
|
||||
File diff suppressed because one or more lines are too long
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:9e1103ae6d6f666f28c9dc8b814f08e625eb9e9da7bd9b321aa206cdf1463913
|
||||
size 7984836
|
||||
oid sha256:a256872dd11c18a5cbb776d105af04f13432264c5c0689fa79c6ca697c86cf6b
|
||||
size 13478856
|
||||
|
||||
Reference in New Issue
Block a user