mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +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
@@ -1,7 +1,12 @@
|
||||
// @vitest-environment node
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { parseHTML } from "linkedom";
|
||||
import { type Page } from "puppeteer-core";
|
||||
import { pageScreenshotCapture, cdpSessionCache } from "./screenshotService.js";
|
||||
import {
|
||||
pageScreenshotCapture,
|
||||
cdpSessionCache,
|
||||
injectVideoFramesBatch,
|
||||
} from "./screenshotService.js";
|
||||
|
||||
// Stub a Page + CDPSession just enough that pageScreenshotCapture can call
|
||||
// `client.send("Page.captureScreenshot", ...)` and we can inspect the args.
|
||||
@@ -20,7 +25,7 @@ describe("pageScreenshotCapture supersample plumbing", () => {
|
||||
const ONE_PIXEL_PNG_B64 =
|
||||
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=";
|
||||
|
||||
it("omits `clip` when deviceScaleFactor is undefined (default 1)", async () => {
|
||||
it("passes `clip` with scale 1 when deviceScaleFactor is undefined (default 1)", async () => {
|
||||
const send = vi.fn().mockResolvedValue({ data: ONE_PIXEL_PNG_B64 });
|
||||
const page = makeFakePageWithCdp(send);
|
||||
|
||||
@@ -34,11 +39,13 @@ describe("pageScreenshotCapture supersample plumbing", () => {
|
||||
|
||||
expect(send).toHaveBeenCalledWith(
|
||||
"Page.captureScreenshot",
|
||||
expect.not.objectContaining({ clip: expect.anything() }),
|
||||
expect.objectContaining({
|
||||
clip: { x: 0, y: 0, width: 1920, height: 1080, scale: 1 },
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("omits `clip` when deviceScaleFactor is exactly 1", async () => {
|
||||
it("passes `clip` with scale 1 when deviceScaleFactor is exactly 1", async () => {
|
||||
const send = vi.fn().mockResolvedValue({ data: ONE_PIXEL_PNG_B64 });
|
||||
const page = makeFakePageWithCdp(send);
|
||||
|
||||
@@ -50,8 +57,8 @@ describe("pageScreenshotCapture supersample plumbing", () => {
|
||||
deviceScaleFactor: 1,
|
||||
});
|
||||
|
||||
const params = send.mock.calls[0]?.[1] as { clip?: unknown };
|
||||
expect(params.clip).toBeUndefined();
|
||||
const params = send.mock.calls[0]?.[1] as { clip?: { scale: number } };
|
||||
expect(params.clip).toEqual({ x: 0, y: 0, width: 1920, height: 1080, scale: 1 });
|
||||
});
|
||||
|
||||
it("passes `clip` with `scale = dpr` when deviceScaleFactor > 1 (the supersample contract)", async () => {
|
||||
@@ -90,3 +97,97 @@ describe("pageScreenshotCapture supersample plumbing", () => {
|
||||
expect(params.clip?.scale).toBe(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe("injectVideoFramesBatch replacement layout", () => {
|
||||
it("does not copy opposing inset constraints onto the injected frame image", async () => {
|
||||
const { window, document } = parseHTML(
|
||||
'<html><body><div id="root"><video id="clip" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover"></video></div></body></html>',
|
||||
);
|
||||
|
||||
Object.defineProperty(window.HTMLImageElement.prototype, "decode", {
|
||||
configurable: true,
|
||||
value: () => Promise.resolve(),
|
||||
});
|
||||
|
||||
const video = document.getElementById("clip") as HTMLVideoElement;
|
||||
Object.defineProperties(video, {
|
||||
offsetLeft: { configurable: true, get: () => 0 },
|
||||
offsetTop: { configurable: true, get: () => 0 },
|
||||
offsetWidth: { configurable: true, get: () => 1920 },
|
||||
offsetHeight: { configurable: true, get: () => 1080 },
|
||||
});
|
||||
video.getBoundingClientRect = () =>
|
||||
({
|
||||
x: 0,
|
||||
y: 0,
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 1920,
|
||||
bottom: 1080,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
toJSON: () => ({}),
|
||||
}) as DOMRect;
|
||||
|
||||
const computedStyle = document.createElement("div").style;
|
||||
computedStyle.position = "absolute";
|
||||
computedStyle.width = "1920px";
|
||||
computedStyle.height = "1080px";
|
||||
computedStyle.top = "0px";
|
||||
computedStyle.left = "0px";
|
||||
computedStyle.right = "0px";
|
||||
computedStyle.bottom = "0px";
|
||||
computedStyle.inset = "0px";
|
||||
computedStyle.objectFit = "cover";
|
||||
computedStyle.objectPosition = "center center";
|
||||
computedStyle.zIndex = "3";
|
||||
computedStyle.opacity = "1";
|
||||
Object.defineProperty(window, "getComputedStyle", {
|
||||
configurable: true,
|
||||
value: () => computedStyle,
|
||||
});
|
||||
|
||||
const globals = globalThis as unknown as {
|
||||
window?: typeof window;
|
||||
document?: Document;
|
||||
};
|
||||
const previousWindow = globals.window;
|
||||
const previousDocument = globals.document;
|
||||
globals.window = window;
|
||||
globals.document = document;
|
||||
try {
|
||||
const page = {
|
||||
evaluate: async (
|
||||
fn: (
|
||||
updates: Array<{ videoId: string; dataUri: string }>,
|
||||
visualProperties: string[],
|
||||
) => Promise<void>,
|
||||
updates: Array<{ videoId: string; dataUri: string }>,
|
||||
visualProperties: string[],
|
||||
) => fn(updates, visualProperties),
|
||||
} as unknown as Page;
|
||||
|
||||
await injectVideoFramesBatch(page, [
|
||||
{
|
||||
videoId: "clip",
|
||||
dataUri:
|
||||
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=",
|
||||
},
|
||||
]);
|
||||
} finally {
|
||||
globals.window = previousWindow;
|
||||
globals.document = previousDocument;
|
||||
}
|
||||
|
||||
const img = video.nextElementSibling as HTMLImageElement | null;
|
||||
expect(img).not.toBeNull();
|
||||
expect(img?.style.position).toBe("absolute");
|
||||
expect(img?.style.left).toBe("0px");
|
||||
expect(img?.style.top).toBe("0px");
|
||||
expect(img?.style.width).toBe("1920px");
|
||||
expect(img?.style.height).toBe("1080px");
|
||||
expect(img?.style.right).toBe("auto");
|
||||
expect(img?.style.bottom).toBe("auto");
|
||||
expect(img?.style.inset).toBe("auto");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user