From f5753824a506fdedc564c74d196c601531a4c3b5 Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Mon, 22 Mar 2021 16:44:50 +0100 Subject: [PATCH 01/12] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c598f2b..a09ce01 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# puppeteer-video-recorder +# puppeteer-video-recorder - Dreamdealer Edit [Prerequisites](#Prerequisites "Prerequisites") | [Installation](#Installation "Installation") | [Manual](#Manual "Manual") | [InitOptions](InitOptions.md "InitOptions") | [StartOptions](StartOptions.md "StartOptions") | [FAQ](#FAQ "FAQ")

@@ -129,4 +129,4 @@ Yes.

I get errors related to FFMPEG, why?

Please ensure that you have FFMPEG installed on your PC

run from your cmd / terminal (in linux) the command: ffmpeg --help

-

If you see results, and don't see "command not found" errors, this plugin should work with your FFMPEG

\ No newline at end of file +

If you see results, and don't see "command not found" errors, this plugin should work with your FFMPEG

From 3c7ee980e34c62ca7c51969f0147276fd9148378 Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Wed, 31 Mar 2021 08:54:09 +0200 Subject: [PATCH 02/12] Update FsHandler.js --- handlers/FsHandler.js | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/handlers/FsHandler.js b/handlers/FsHandler.js index 9bb62fb..56e28ee 100644 --- a/handlers/FsHandler.js +++ b/handlers/FsHandler.js @@ -1,11 +1,18 @@ -const { appendFile, mkdir } = require('fs').promises; +const { appendFile, mkdir, rmdir, unlink } = require('fs').promises; const { openSync, closeSync, existsSync } = require('fs'); const { join } = require('path'); class FsHandler { - async init(outputFolder) { + async init(outputFolder, testName) { + const now = new Date(); this.outputFolder = outputFolder; - this.videoFilename = join(this.outputFolder, Date.now() + '.webm'); + + const hours = this.addZeroBefore(now.getHours()); + const minutes = this.addZeroBefore(now.getMinutes()); + const seconds = this.addZeroBefore(now.getSeconds()); + const videofilename = `${testName.replace(/ /gi, '_').toLowerCase()}-${hours}:${minutes}:${seconds}.webm`; + + this.videoFilename = join(this.outputFolder, videofilename); this.imagesPath = join(this.outputFolder, 'images'); this.imagesFilename = join(this.outputFolder, 'images.txt'); await this.verifyPathExists(this.outputFolder); @@ -13,6 +20,19 @@ class FsHandler { await this.verifyPathExists(this.imagesFilename, 'file'); } + addZeroBefore(n) { + return (n < 10 ? '0' : '') + n; + } + + async clear() { + if (await existsSync(this.imagesPath)) { + await rmdir(this.imagesPath, { recursive: true }); + } + if (await existsSync(this.imagesFilename)) { + await unlink(this.imagesFilename); + } + } + createEmptyFile(filename) { return closeSync(openSync(filename, 'w')); } From 14bdfbfae27acacb55126834894e8c0b1db54ab1 Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Wed, 31 Mar 2021 08:54:32 +0200 Subject: [PATCH 03/12] Update index.js --- index.js | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/index.js b/index.js index 11c4ebb..567e729 100644 --- a/index.js +++ b/index.js @@ -8,15 +8,15 @@ class PuppeteerVideoRecorder { this.fsHandler = new FsHandler(); } - async init(page, outputFolder){ + async init(page, outputFolder, testName){ this.page = page; this.outputFolder = outputFolder; - await this.fsHandler.init(outputFolder); - const { imagesPath,imagesFilename, appendToFile } = this.fsHandler; + await this.fsHandler.init(outputFolder, testName); + const { imagesPath, imagesFilename, appendToFile } = this.fsHandler; await this.screenshots.init(page, imagesPath, { - afterWritingImageFile: (filename) => appendToFile(imagesFilename, `file '${filename}'\n`) + afterWritingImageFile: (filename) => appendToFile(imagesFilename, `file '${filename.replace(outputFolder,'')}'\n`) }); - } + } start(options = {}) { return this.screenshots.start(options); @@ -24,7 +24,13 @@ class PuppeteerVideoRecorder { async stop () { await this.screenshots.stop(); - return this.createVideo(); + await this.createVideo(); + await this.fsHandler.clear(); + } + + async stopButDontSaveVideo () { + await this.screenshots.stop(); + await this.fsHandler.clear(); } get defaultFFMpegCommand() { @@ -35,17 +41,20 @@ class PuppeteerVideoRecorder { '-safe 0', `-i ${imagesFilename}`, '-framerate 60', - videoFilename + `"${videoFilename}"` ].join(' '); } createVideo(ffmpegCommand = '') { const _ffmpegCommand = ffmpegCommand || this.defaultFFMpegCommand; - exec(_ffmpegCommand, (error, stdout, stderr) => { - if (error) throw new Error(error); - console.log(stdout); - console.log(stderr); - }); + + return new Promise((resolve, reject) => { + exec(_ffmpegCommand, (error) => { + if (error) reject(error); + + resolve(); + }); + }); } } From 3843b6c7eb273ec45658a23fdba0178adee28191 Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Wed, 31 Mar 2021 16:16:03 +0200 Subject: [PATCH 04/12] Update FsHandler.js --- handlers/FsHandler.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/handlers/FsHandler.js b/handlers/FsHandler.js index 56e28ee..8ec20d4 100644 --- a/handlers/FsHandler.js +++ b/handlers/FsHandler.js @@ -1,4 +1,4 @@ -const { appendFile, mkdir, rmdir, unlink } = require('fs').promises; +const { appendFile, mkdir, rmdir } = require('fs').promises; const { openSync, closeSync, existsSync } = require('fs'); const { join } = require('path'); @@ -10,7 +10,7 @@ class FsHandler { const hours = this.addZeroBefore(now.getHours()); const minutes = this.addZeroBefore(now.getMinutes()); const seconds = this.addZeroBefore(now.getSeconds()); - const videofilename = `${testName.replace(/ /gi, '_').toLowerCase()}-${hours}:${minutes}:${seconds}.webm`; + const videofilename = `../${testName}-${hours}:${minutes}:${seconds}.webm`; this.videoFilename = join(this.outputFolder, videofilename); this.imagesPath = join(this.outputFolder, 'images'); @@ -25,11 +25,8 @@ class FsHandler { } async clear() { - if (await existsSync(this.imagesPath)) { - await rmdir(this.imagesPath, { recursive: true }); - } - if (await existsSync(this.imagesFilename)) { - await unlink(this.imagesFilename); + if (await existsSync(this.outputFolder)) { + await rmdir(this.outputFolder, { recursive: true }); } } From 26ad2ee26c688c541d298a6d8dd20626555c3c7f Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Thu, 1 Apr 2021 12:50:02 +0200 Subject: [PATCH 05/12] Update index.js --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 567e729..9646eb8 100644 --- a/index.js +++ b/index.js @@ -28,7 +28,7 @@ class PuppeteerVideoRecorder { await this.fsHandler.clear(); } - async stopButDontSaveVideo () { + async cancel () { await this.screenshots.stop(); await this.fsHandler.clear(); } From 0dcdc4d4419768f82b98447eb46f63b637f52535 Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Thu, 1 Apr 2021 15:40:26 +0200 Subject: [PATCH 06/12] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a09ce01..0f80314 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# puppeteer-video-recorder - Dreamdealer Edit +# puppeteer-video-recorder [Prerequisites](#Prerequisites "Prerequisites") | [Installation](#Installation "Installation") | [Manual](#Manual "Manual") | [InitOptions](InitOptions.md "InitOptions") | [StartOptions](StartOptions.md "StartOptions") | [FAQ](#FAQ "FAQ")

From b46b03f1a4fd9e937f497c3bda91c1c7c5413a1f Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Thu, 1 Apr 2021 16:55:08 +0200 Subject: [PATCH 07/12] Update index.js --- index.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 9646eb8..708a3c4 100644 --- a/index.js +++ b/index.js @@ -11,26 +11,40 @@ class PuppeteerVideoRecorder { async init(page, outputFolder, testName){ this.page = page; this.outputFolder = outputFolder; - await this.fsHandler.init(outputFolder, testName); + // replace spaces with underscores and form a name for a sub-folder for each test + this.testSubFolder = testName.replace(/ /gi, '_').toLowerCase(); + // append sub-folder name to output folder to form the full output folder name + this.fullOutputFolder = `${this.outputFolder.replace(/\/$/, "")}/${this.testSubFolder}/`; + await this.fsHandler.init(this.fullOutputFolder, testName); const { imagesPath, imagesFilename, appendToFile } = this.fsHandler; + // strip the full output foldername from the filename to prevent FFMPEG throwing errors await this.screenshots.init(page, imagesPath, { - afterWritingImageFile: (filename) => appendToFile(imagesFilename, `file '${filename.replace(outputFolder,'')}'\n`) + afterWritingImageFile: (filename) => appendToFile(imagesFilename, `file '${filename.replace(this.fullOutputFolder,'')}'\n`) }); } + // start recording images start(options = {}) { return this.screenshots.start(options); } - + + // stop recording and save images as videofile async stop () { await this.screenshots.stop(); await this.createVideo(); - await this.fsHandler.clear(); } + // stop recording, save video and clear the subfolder with images + async stopAndClear () { + await this.screenshots.stop(); + await this.createVideo(); + await this.fsHandler.clearOutputSubFolder(); + } + + // stop recording, do not save a video and clear all images async cancel () { await this.screenshots.stop(); - await this.fsHandler.clear(); + await this.fsHandler.clearOutputSubFolder(); } get defaultFFMpegCommand() { From beff35c8f2308fb5f13d9213e383b3370d014a22 Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Thu, 1 Apr 2021 16:55:28 +0200 Subject: [PATCH 08/12] Update FsHandler.js --- handlers/FsHandler.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/handlers/FsHandler.js b/handlers/FsHandler.js index 8ec20d4..00cb193 100644 --- a/handlers/FsHandler.js +++ b/handlers/FsHandler.js @@ -3,14 +3,17 @@ const { openSync, closeSync, existsSync } = require('fs'); const { join } = require('path'); class FsHandler { - async init(outputFolder, testName) { + async init(outputFolder, videoName) { const now = new Date(); this.outputFolder = outputFolder; + // get the time to construct a more human readable timestamp in the filename const hours = this.addZeroBefore(now.getHours()); const minutes = this.addZeroBefore(now.getMinutes()); const seconds = this.addZeroBefore(now.getSeconds()); - const videofilename = `../${testName}-${hours}:${minutes}:${seconds}.webm`; + + // do not put the video in the test subfolder, but in the root recording folder + const videofilename = `../${videoName}-${hours}:${minutes}:${seconds}.webm`; this.videoFilename = join(this.outputFolder, videofilename); this.imagesPath = join(this.outputFolder, 'images'); @@ -24,7 +27,7 @@ class FsHandler { return (n < 10 ? '0' : '') + n; } - async clear() { + async clearOutputSubFolder() { if (await existsSync(this.outputFolder)) { await rmdir(this.outputFolder, { recursive: true }); } From 0ed5e2686ee36af32146fd4facb192cbf84e044d Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Fri, 2 Apr 2021 08:51:32 +0200 Subject: [PATCH 09/12] Update index.js --- index.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index 708a3c4..d627896 100644 --- a/index.js +++ b/index.js @@ -11,11 +11,11 @@ class PuppeteerVideoRecorder { async init(page, outputFolder, testName){ this.page = page; this.outputFolder = outputFolder; - // replace spaces with underscores and form a name for a sub-folder for each test - this.testSubFolder = testName.replace(/ /gi, '_').toLowerCase(); + // if no testName was provided use a timestamp + this.testName = testName ? testName : Date.now(); // append sub-folder name to output folder to form the full output folder name - this.fullOutputFolder = `${this.outputFolder.replace(/\/$/, "")}/${this.testSubFolder}/`; - await this.fsHandler.init(this.fullOutputFolder, testName); + this.fullOutputFolder = `${this.outputFolder.replace(/\/$/, "")}/${this.testName.replace(/ /gi, '_').toLowerCase()}/`; + await this.fsHandler.init(this.fullOutputFolder, this.testName); const { imagesPath, imagesFilename, appendToFile } = this.fsHandler; // strip the full output foldername from the filename to prevent FFMPEG throwing errors await this.screenshots.init(page, imagesPath, { @@ -34,17 +34,14 @@ class PuppeteerVideoRecorder { await this.createVideo(); } - // stop recording, save video and clear the subfolder with images - async stopAndClear () { - await this.screenshots.stop(); - await this.createVideo(); + // clear the subfolder with images + async clear () { await this.fsHandler.clearOutputSubFolder(); } - // stop recording, do not save a video and clear all images + // stop recording, do not save a video async cancel () { await this.screenshots.stop(); - await this.fsHandler.clearOutputSubFolder(); } get defaultFFMpegCommand() { From 5e1d0004b7d8d9296d3919cc294536e3244bc470 Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Fri, 2 Apr 2021 10:32:50 +0200 Subject: [PATCH 10/12] Update index.js --- index.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index d627896..5a7c684 100644 --- a/index.js +++ b/index.js @@ -8,18 +8,23 @@ class PuppeteerVideoRecorder { this.fsHandler = new FsHandler(); } - async init(page, outputFolder, testName){ + async init(page, outputFolder, name = Date.now()){ this.page = page; this.outputFolder = outputFolder; - // if no testName was provided use a timestamp - this.testName = testName ? testName : Date.now(); + this.testName = name; + // append sub-folder name to output folder to form the full output folder name this.fullOutputFolder = `${this.outputFolder.replace(/\/$/, "")}/${this.testName.replace(/ /gi, '_').toLowerCase()}/`; + await this.fsHandler.init(this.fullOutputFolder, this.testName); + const { imagesPath, imagesFilename, appendToFile } = this.fsHandler; - // strip the full output foldername from the filename to prevent FFMPEG throwing errors + await this.screenshots.init(page, imagesPath, { - afterWritingImageFile: (filename) => appendToFile(imagesFilename, `file '${filename.replace(this.fullOutputFolder,'')}'\n`) + // strip the full output foldername from the filename to prevent FFMPEG throwing errors + afterWritingImageFile: (filename) => { + appendToFile(imagesFilename, `file 'images${filename.split(imagesPath)[1]}'\n`) + } }); } From 9106cb90dcaef9bcd559e0a09d81d14f96aaa582 Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Fri, 2 Apr 2021 10:33:01 +0200 Subject: [PATCH 11/12] Update FsHandler.js --- handlers/FsHandler.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/handlers/FsHandler.js b/handlers/FsHandler.js index 00cb193..8c14544 100644 --- a/handlers/FsHandler.js +++ b/handlers/FsHandler.js @@ -3,17 +3,12 @@ const { openSync, closeSync, existsSync } = require('fs'); const { join } = require('path'); class FsHandler { - async init(outputFolder, videoName) { + async init(outputFolder, name = Date.now()) { const now = new Date(); this.outputFolder = outputFolder; - // get the time to construct a more human readable timestamp in the filename - const hours = this.addZeroBefore(now.getHours()); - const minutes = this.addZeroBefore(now.getMinutes()); - const seconds = this.addZeroBefore(now.getSeconds()); - // do not put the video in the test subfolder, but in the root recording folder - const videofilename = `../${videoName}-${hours}:${minutes}:${seconds}.webm`; + const videofilename = `../${name}.webm`; this.videoFilename = join(this.outputFolder, videofilename); this.imagesPath = join(this.outputFolder, 'images'); From 51d698851d7392239027d3f769e5693b0f23a70e Mon Sep 17 00:00:00 2001 From: Johan van Tongeren Date: Fri, 2 Apr 2021 10:37:32 +0200 Subject: [PATCH 12/12] Update FsHandler.js --- handlers/FsHandler.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/handlers/FsHandler.js b/handlers/FsHandler.js index 8c14544..7aa41cb 100644 --- a/handlers/FsHandler.js +++ b/handlers/FsHandler.js @@ -4,7 +4,6 @@ const { join } = require('path'); class FsHandler { async init(outputFolder, name = Date.now()) { - const now = new Date(); this.outputFolder = outputFolder; // do not put the video in the test subfolder, but in the root recording folder @@ -18,10 +17,6 @@ class FsHandler { await this.verifyPathExists(this.imagesFilename, 'file'); } - addZeroBefore(n) { - return (n < 10 ? '0' : '') + n; - } - async clearOutputSubFolder() { if (await existsSync(this.outputFolder)) { await rmdir(this.outputFolder, { recursive: true });