[New Feature]:: Aspect ratio and videoframeSize feature added

Author: prasana kannan

README.md

@@ -75,6 +75,11 @@ const Config = {
   followNewTab: true,
   fps: 25,
   ffmpeg_Path: '<path of ffmpeg_path>' || null,
+  videoFrame: {
+    width: 1024,
+    height: 768,
+  },
+  aspectRatio: '4:3',
 };
 ```
 
@@ -84,6 +89,11 @@ const Config = {
 
 > - **ffmpeg_Path**: String value pointing to the installation of [FFMPEG](https://ffmpeg.org/). Default is null (Automatically install the FFMPEG and use it).
 
+> - **videoFrame**: An object which is to specify the width and height of the capturing video frame. Default to browser viewport size.
+
+> - **aspectRatio**: Specify the apsect ratio of the video. Default value is `4:3`.
+
+
 **3. create a new instance of video recording**
 
 ```javascript

package.json

@@ -68,7 +68,7 @@
     "doc:json": "typedoc src/ --exclude **/*.spec.ts --target ES6 --mode file --json build/docs/typedoc.json",
     "doc:publish": "gh-pages -m \"[ci skip] Updates\" -d build/docs",
     "version": "standard-version",
-    "reset-hard": "git clean -dfx && git reset --hard && npm i",
+    "reset-hard": "git clean -dfx && npm i",
     "prepare-release": "run-s reset-hard test doc:html version doc:publish",
     "ci": "run-s reset-hard doc:html version doc:publish"
   },

src/lib/PuppeteerScreenRecorder.ts

@@ -17,6 +17,11 @@ const defaultPuppeteerScreenRecorderOptions: PuppeteerScreenRecorderOptions = {
   followNewTab: true,
   fps: 25,
   ffmpeg_Path: null,
+  videoFrame: {
+    width: null,
+    height: null,
+  },
+  aspectRatio: '4:3',
 };
 
 /**

src/lib/pageVideoStreamWriter.ts

@@ -8,6 +8,11 @@ import { pageScreenFrame } from './pageVideoStreamCollector';
 export type VideoOptions = {
   readonly fps?: number;
   readonly ffmpeg_Path?: string | null;
+  readonly videoFrame?: {
+    width: number | null;
+    height: number | null;
+  };
+  readonly aspectRatio?: '3:2' | '4:3' | '16:9';
 };
 
 /**
@@ -45,6 +50,12 @@ export default class PageVideoStreamWriter extends EventEmitter {
     this.configureVideoFile(savePath);
   }
 
+  private get videoFrameSize(): string {
+    const { width, height } = this.options.videoFrame;
+
+    return width !== null && height !== null ? `${width}x${height}` : '100%';
+  }
+
   private getFfmpegPath(): string | null {
     if (this.options.ffmpeg_Path) {
       return this.options.ffmpeg_Path;
@@ -79,6 +90,8 @@ export default class PageVideoStreamWriter extends EventEmitter {
     this.writerPromise = new Promise((resolve) => {
       ffmpeg({ source: this.videoMediatorStream, priority: 20 })
         .videoCodec('libx264')
+        .size(this.videoFrameSize)
+        .aspect(this.options.aspectRatio || '4:3')
         .inputFormat('image2pipe')
         .inputFPS(this.options.fps)
         .outputOptions('-preset ultrafast')

src/spec/PuppeteerScreenRecorder.spec.ts

@@ -3,7 +3,10 @@ import fs from 'fs';
 import test from 'ava';
 import puppeteer from 'puppeteer';
 
-import { PuppeteerScreenRecorder } from '../lib/PuppeteerScreenRecorder';
+import {
+  PuppeteerScreenRecorder,
+  PuppeteerScreenRecorderOptions,
+} from '../lib/PuppeteerScreenRecorder';
 
 test('case 1 --> Happy Path: Should be able to create a new screen-recording session', async (assert) => {
   /** setup */
@@ -74,37 +77,32 @@ test('test 3 -> Error Path: should throw error if an invalid savePath argument i
   }
 });
 
-// test('case 3 --> Happy Path: Should be follow new tab open and record it successfully', async (assert) => {
-//   /** setup */
-//   const browser = await puppeteer.launch({ headless: true });
-//   const page = await browser.newPage();
-
-//   const outputVideoPath = './test-output/test/video-recorder/testCase3.mp4';
-//   const recorder = new PuppeteerScreenRecorder(page);
-//   await recorder.start(outputVideoPath);
-
-//   /** execute */
-//   await page.goto('https://prasanaworld.herokuapp.com', { waitUntil: 'load' });
-
-//   await page.waitForSelector('.openLog');
-//   const link = await page.$('.openLog');
-//   const newPagePromise = new Promise((resolve) =>
-//     browser.once('targetcreated', (target) => resolve(target.page()))
-//   ); // declare promise
-//   await link.click({ button: 'middle' });
-//   const page2: Page = await newPagePromise;
-
-//   await page2.bringToFront();
+test('case 2 --> Happy Path: testing video recording with video frame width, height and aspect ratio', async (assert) => {
+  /** setup */
+  const browser = await puppeteer.launch({ headless: true });
+  const page = await browser.newPage();
 
-//   await page2.close();
+  const options: PuppeteerScreenRecorderOptions = {
+    followNewTab: false,
+    videoFrame: {
+      width: 1024,
+      height: 1024,
+    },
+    aspectRatio: '4:3',
+  };
+  const outputVideoPath = './test-output/test/video-recorder/testCase4.mp4';
+  const recorder = new PuppeteerScreenRecorder(page, options);
+  const recorderValue = await recorder.start(outputVideoPath);
 
-//   await page.goto('https://google.com', { waitUntil: 'load' });
+  /** execute */
+  await page.goto('https://github.com', { waitUntil: 'load' });
+  /** clear */
+  const status = await recorder.stop();
 
-//   /** clear */
-//   const status = await recorder.stop();
-//   await browser.close();
+  await browser.close();
 
-//   /** assert */
-//   assert.is(status, true);
-//   assert.is(fs.existsSync(outputVideoPath), true);
-// });
+  /** assert */
+  assert.is(recorderValue instanceof PuppeteerScreenRecorder, true);
+  assert.is(status, true);
+  assert.is(fs.existsSync(outputVideoPath), true);
+});