fix(screencast): correctly process videos with 1 frame (#4144)

This commit is contained in:
Yury Semikhatsky 2020-10-14 14:10:35 -07:00 committed by GitHub
parent 25cb649ea1
commit bb981fc0cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 11 deletions

View File

@ -26,7 +26,7 @@ const fps = 25;
export class VideoRecorder { export class VideoRecorder {
private _process: ChildProcess | null = null; private _process: ChildProcess | null = null;
private _gracefullyClose: (() => Promise<void>) | null = null; private _gracefullyClose: (() => Promise<void>) | null = null;
private _lastWritePromise: Promise<void>; private _lastWritePromise: Promise<void> | undefined;
private _lastFrameTimestamp: number = 0; private _lastFrameTimestamp: number = 0;
private _lastFrameBuffer: Buffer | null = null; private _lastFrameBuffer: Buffer | null = null;
private _lastWriteTimestamp: number = 0; private _lastWriteTimestamp: number = 0;
@ -47,7 +47,6 @@ export class VideoRecorder {
private constructor(progress: Progress) { private constructor(progress: Progress) {
this._progress = progress; this._progress = progress;
this._lastWritePromise = Promise.resolve();
} }
private async _launch(options: types.PageScreencastOptions) { private async _launch(options: types.PageScreencastOptions) {
@ -89,15 +88,15 @@ export class VideoRecorder {
assert(this._process); assert(this._process);
if (!this._isRunning()) if (!this._isRunning())
return; return;
const repeatCount = this._lastFrameTimestamp ? Math.max(1, Math.round(25 * (timestamp - this._lastFrameTimestamp))) : 1; this._progress.log(`writing frame ` + timestamp);
this._progress.log(`writing ${repeatCount} frame(s)`); if (this._lastFrameBuffer)
this._lastWritePromise = this._flushLastFrame(repeatCount).catch(e => this._progress.log('Error while writing frame: ' + e)); this._lastWritePromise = this._flushLastFrame(timestamp - this._lastFrameTimestamp).catch(e => this._progress.log('Error while writing frame: ' + e));
this._lastFrameBuffer = frame; this._lastFrameBuffer = frame;
this._lastFrameTimestamp = timestamp; this._lastFrameTimestamp = timestamp;
this._lastWriteTimestamp = Date.now(); this._lastWriteTimestamp = Date.now();
} }
private async _flushLastFrame(repeatCount: number): Promise<void> { private async _flushLastFrame(durationSec: number): Promise<void> {
assert(this._process); assert(this._process);
const frame = this._lastFrameBuffer; const frame = this._lastFrameBuffer;
if (!frame) if (!frame)
@ -105,6 +104,8 @@ export class VideoRecorder {
const previousWrites = this._lastWritePromise; const previousWrites = this._lastWritePromise;
let finishedWriting: () => void; let finishedWriting: () => void;
const writePromise = new Promise<void>(fulfill => finishedWriting = fulfill); const writePromise = new Promise<void>(fulfill => finishedWriting = fulfill);
const repeatCount = Math.max(1, Math.round(fps * durationSec));
this._progress.log(`flushing ${repeatCount} frame(s)`);
await previousWrites; await previousWrites;
for (let i = 0; i < repeatCount; i++) { for (let i = 0; i < repeatCount; i++) {
const callFinish = i === (repeatCount - 1); const callFinish = i === (repeatCount - 1);
@ -124,8 +125,8 @@ export class VideoRecorder {
if (this._lastWriteTimestamp) { if (this._lastWriteTimestamp) {
const durationSec = (Date.now() - this._lastWriteTimestamp) / 1000; const durationSec = (Date.now() - this._lastWriteTimestamp) / 1000;
if (durationSec > 1 / fps) if (!this._lastWritePromise || durationSec > 1 / fps)
this.writeFrame(this._lastFrameBuffer!, this._lastFrameTimestamp + durationSec); this._flushLastFrame(durationSec).catch(e => this._progress.log('Error while writing frame: ' + e));
} }
const close = this._gracefullyClose; const close = this._gracefullyClose;

View File

@ -180,7 +180,7 @@ describe('screencast', suite => {
} }
}); });
it('should emit video event', async ({browser, testInfo}) => { it('should expose video path', async ({browser, testInfo}) => {
const videosPath = testInfo.outputPath(''); const videosPath = testInfo.outputPath('');
const size = { width: 320, height: 240 }; const size = { width: 320, height: 240 };
const context = await browser.newContext({ const context = await browser.newContext({
@ -190,10 +190,10 @@ describe('screencast', suite => {
}); });
const page = await context.newPage(); const page = await context.newPage();
await page.evaluate(() => document.body.style.backgroundColor = 'red'); await page.evaluate(() => document.body.style.backgroundColor = 'red');
await new Promise(r => setTimeout(r, 1000));
await context.close();
const path = await page.video()!.path(); const path = await page.video()!.path();
expect(path).toContain(videosPath); expect(path).toContain(videosPath);
await context.close();
expect(fs.existsSync(path)).toBeTruthy();
}); });
it('should capture navigation', async ({browser, server, testInfo}) => { it('should capture navigation', async ({browser, server, testInfo}) => {