Refactor

README.md

@@ -20,7 +20,7 @@ npm i playwright playwright-video
 
 ```js
 const { chromium, devices } = require('playwright');
-const { VideoCapture } = require('playwright-video');
+const { PageVideoCapture } = require('playwright-video');
 
 (async () => {
   const iPhone = devices['iPhone 6'];
@@ -33,7 +33,7 @@ const { VideoCapture } = require('playwright-video');
 
   const page = await context.newPage();
 
-  await VideoCapture.start({
+  await PageVideoCapture.start({
     browser,
     page,
     savePath: '/tmp/video.mp4',

package.json

@@ -33,6 +33,7 @@
     "tslib": "^1.11.1"
   },
   "devDependencies": {
+    "@types/debug": "^4.1.5",
     "@types/fluent-ffmpeg": "^2.1.14",
     "@types/fs-extra": "^8.1.0",
     "@types/jest": "^25.1.3",

src/PageVideoCapture.ts

@@ -0,0 +1,85 @@
+import Debug from 'debug';
+import { Page } from 'playwright-core';
+import { CRBrowser } from 'playwright-core/lib/chromium/crBrowser';
+import { ScreencastFrameCollector } from './ScreencastFrameCollector';
+import { VideoFrameBuilder } from './VideoFrameBuilder';
+import { VideoWriter } from './VideoWriter';
+
+const debug = Debug('playwright-video:PageVideoCapture');
+
+interface ConstructorArgs {
+  collector: ScreencastFrameCollector;
+  page: Page;
+  writer: VideoWriter;
+}
+
+interface CreateArgs {
+  browser: CRBrowser;
+  page: Page;
+  savePath: string;
+}
+
+export class PageVideoCapture {
+  public static async start({
+    browser,
+    page,
+    savePath,
+  }: CreateArgs): Promise<PageVideoCapture> {
+    debug('start');
+
+    const collector = await ScreencastFrameCollector.create({ browser, page });
+    const writer = await VideoWriter.create(savePath);
+
+    const capture = new PageVideoCapture({ collector, page, writer });
+    await collector.start();
+
+    return capture;
+  }
+
+  private _collector: ScreencastFrameCollector;
+  private _frameBuilder: VideoFrameBuilder = new VideoFrameBuilder();
+  // public for tests
+  public _stopped = false;
+  private _writer: VideoWriter;
+
+  protected constructor({ collector, page, writer }: ConstructorArgs) {
+    this._collector = collector;
+    this._writer = writer;
+
+    this._writer.on('ffmpegerror', () => {
+      debug('stop due to ffmpeg error');
+      this.stop();
+    });
+    page.on('close', () => this.stop());
+
+    this._listenForFrames();
+  }
+
+  private _listenForFrames(): void {
+    this._collector.on('screencastframe', screencastFrame => {
+      debug(`received frame: ${screencastFrame.timestamp}`);
+      const videoFrames = this._frameBuilder.buildVideoFrames(screencastFrame);
+
+      this._writer.write(videoFrames);
+    });
+  }
+
+  private _writeLastFrame(): void {
+    debug('write last frame');
+
+    const videoFrames = this._frameBuilder.buildVideoFrames();
+    this._writer.write(videoFrames);
+  }
+
+  public async stop(): Promise<void> {
+    if (this._stopped) return;
+
+    debug('stop');
+    this._stopped = true;
+
+    await this._collector.stop();
+    this._writeLastFrame();
+
+    return this._writer.stop();
+  }
+}

src/ScreencastFrameCollector.ts

@@ -0,0 +1,86 @@
+import Debug from 'debug';
+import { EventEmitter } from 'events';
+import { Page } from 'playwright-core';
+import { CRBrowser } from 'playwright-core/lib/chromium/crBrowser';
+import { CRSession } from 'playwright-core/lib/chromium/crConnection';
+import { ensureBrowserType } from './utils';
+
+const debug = Debug('playwright-video:FrameCollector');
+
+interface ConstructorArgs {
+  browser: CRBrowser;
+  page: Page;
+}
+
+export class ScreencastFrameCollector extends EventEmitter {
+  public static async create(
+    args: ConstructorArgs,
+  ): Promise<ScreencastFrameCollector> {
+    ensureBrowserType(args.browser);
+
+    const collector = new ScreencastFrameCollector(args);
+
+    await collector._buildClient(args.browser);
+    collector._listenForFrames();
+
+    return collector;
+  }
+
+  // public for tests
+  public _client: CRSession;
+  private _page: Page;
+  private _stopped = false;
+
+  protected constructor({ page }: ConstructorArgs) {
+    super();
+    this._page = page;
+  }
+
+  private async _buildClient(browser: CRBrowser): Promise<void> {
+    this._client = await browser.pageTarget(this._page).createCDPSession();
+  }
+
+  private _listenForFrames(): void {
+    this._client.on('Page.screencastFrame', payload => {
+      debug(`received frame with timestamp ${payload.metadata.timestamp}`);
+
+      this._client.send('Page.screencastFrameAck', {
+        sessionId: payload.sessionId,
+      });
+
+      if (!payload.metadata.timestamp) {
+        debug('skip frame without timestamp');
+        return;
+      }
+
+      this.emit('screencastframe', {
+        data: Buffer.from(payload.data, 'base64'),
+        received: Date.now(),
+        timestamp: payload.metadata.timestamp,
+      });
+    });
+  }
+
+  public async start(): Promise<void> {
+    debug('start');
+
+    await this._client.send('Page.startScreencast', {
+      everyNthFrame: 1,
+    });
+  }
+
+  public async stop(): Promise<void> {
+    if (this._stopped) return;
+
+    debug('stop');
+    this._stopped = true;
+    // Screencast API takes time to send frames
+    // Wait 1s for frames to arrive
+    // TODO figure out a better pattern for this
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    if (this._client._connection) {
+      await this._client.detach();
+    }
+  }
+}