rrvideo: improve the video quality and add a progress bar for the CLI…

… tool (rrweb-io#1197)

* refactor rrvideo: use playwright rather than puppeteer

* add a progress bar for the tool

* add tests for cli.ts

* fix build error

* add change log

* update readme file

* Apply a scaling method to improve the resolution of the output video

.changeset/lazy-toes-confess.md

@@ -0,0 +1,5 @@
+---
+'rrvideo': patch
+---
+
+Refactor: Improve the video quality and add a progress bar for the CLI tool

packages/rrvideo/README.md

@@ -4,11 +4,12 @@
 
 rrvideo is a tool for transforming the session recorded by [rrweb](https://github.com/rrweb-io/rrweb) into a video.
 
+![Demo Video](./demo/demo.gif)
+
 ## Install rrvideo
 
-1. Install [ffmpeg](https://ffmpeg.org/download.html)。
-2. Install [Node.JS](https://nodejs.org/en/download/)。
-3. Run `npm i -g rrvideo` to install the rrvideo CLI。
+1. Install [Node.JS](https://nodejs.org/en/download/)。
+2. Run `npm i -g rrvideo` to install the rrvideo CLI.
 
 ## Use rrvideo
 
@@ -18,7 +19,7 @@ rrvideo is a tool for transforming the session recorded by [rrweb](https://githu
 rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE
 ```
 
-Running this command will output a `rrvideo-output.mp4` file in the current working directory.
+Running this command will output a `rrvideo-output.webm` file in the current working directory.
 
 ### Config the output path
 

packages/rrvideo/README.zh_CN.md

@@ -2,11 +2,12 @@
 
 rrvideo 是用于将 [rrweb](https://github.com/rrweb-io/rrweb) 录制的数据转为视频格式的工具。
 
+![Demo Video](./demo/demo.gif)
+
 ## 安装 rrvideo
 
-1. 安装 [ffmpeg](https://ffmpeg.org/download.html)。
-2. 安装 [Node.JS](https://nodejs.org/en/download/)。
-3. 执行 `npm i -g rrvideo` 以安装 rrvideo CLI。
+1. 安装 [Node.JS](https://nodejs.org/en/download/)。
+2. 执行 `npm i -g rrvideo` 以安装 rrvideo CLI。
 
 ## 使用 rrvideo
 
@@ -16,7 +17,7 @@ rrvideo 是用于将 [rrweb](https://github.com/rrweb-io/rrweb) 录制的数据
 rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE
 ```
 
-运行以上命令会在执行文件夹中生成一个 `rrvideo-output.mp4` 文件。
+运行以上命令会在执行文件夹中生成一个 `rrvideo-output.webm` 文件。
 
 ### 指定输出路径
 

packages/rrvideo/jest.config.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line tsdoc/syntax
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

packages/rrvideo/package.json

@@ -11,18 +11,28 @@
   ],
   "types": "build/index.d.ts",
   "scripts": {
+    "install": "playwright install",
     "build": "tsc",
+    "test": "jest",
+    "check-types": "tsc -noEmit",
     "prepublish": "yarn build"
   },
   "author": "[email protected]",
   "license": "MIT",
   "devDependencies": {
+    "@types/fs-extra": "11.0.1",
+    "@types/jest": "^27.4.1",
     "@types/minimist": "^1.2.1",
+    "@types/node": "^18.15.11",
+    "jest": "^27.5.1",
+    "ts-jest": "^27.1.3",
     "@rrweb/types": "^2.0.0-alpha.8"
   },
   "dependencies": {
+    "@open-tech-world/cli-progress-bar": "^2.0.2",
+    "fs-extra": "^11.1.1",
     "minimist": "^1.2.5",
-    "puppeteer": "^19.7.2",
+    "playwright": "^1.32.1",
     "rrweb-player": "^2.0.0-alpha.8"
   }
 }

packages/rrvideo/src/cli.ts

@@ -2,6 +2,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import minimist from 'minimist';
+import { ProgressBar } from '@open-tech-world/cli-progress-bar';
 import type { RRwebPlayerOptions } from 'rrweb-player';
 import { transformToVideo } from './index';
 
@@ -24,10 +25,18 @@ if (argv.config) {
   >;
 }
 
+const pBar = new ProgressBar({ prefix: 'Transforming' });
+const onProgressUpdate = (percent: number) => {
+  if (percent < 1) pBar.run({ value: percent * 100, total: 100 });
+  else
+    pBar.run({ value: 100, total: 100, prefix: 'Transformation Completed!' });
+};
+
 transformToVideo({
   input: argv.input as string,
   output: argv.output as string,
   rrwebPlayer: config,
+  onProgressUpdate,
 })
   .then((file) => {
     console.log(`Successfully transformed into "${file}".`);