How to create a comparison video like this:
comparison-nometrics.mp4
You can create videos using one of the following methods
-
Install
browsertime
npm install browsertime -g
-
Install
browsertime
dependencies to generate video and annotation
brew install ffmpeg
brew install imagemagick
pip install Pillow
-
Install
@better/api-testing-gateway
to generate a loan filenpm install @better/api-testing-gateway --save-dev
-
Add
page-speed.js
file intobarrel/scripts
. Copy file bellow and changePAGES_TO_CHECK
const inpage-speed.js
with pages you want to perform the performance script.
// for performance test on local env
browsertime barrel/scripts/page-speed.js -n 1 --video —visualMetrics --videoParams.filmstripFullSize --viewPort "1500x750"
// performance test on namespace deploy
// Set `TARGET_NAMESPACE` var with your NS deploy id
TARGET_NAMESPACE=barrel-22051 browsertime ./scripts/page-speed.js -n 1 --video --visualMetrics --videoParams.filmstripFullSize --viewPort "1500x750"
Sitespeed.io also offers a way to create videos by creating a docker container. This container pulls images that have all the software needed to create videos and analytize them. The following script below will create videos for you using performance test on a namespace deploy (make sure to have Docker installed first):
docker run -e TARGET_NAMESPACE='[your-ns-deploy]' --shm-size=1g --rm -v "$(pwd)":/browsertime sitespeedio/browsertime --n 1 --video --visualMetrics --videoParams.filmstripFullSize --viewPort "1500x750" barrel/scripts/page-speed.js
If this script is run from the mortgage root, your videos will be saved in the following directory:
mortgage/browsertime-results/barrel-scripts-page-speed.js/[timestamp]/pages/[ns-deply-id]_better_ci_bettermg_com/my-loan/[loan-id]/
You'll use this directory for putting the videos together in the below instructions.
Once script run is finished, barrel/browsertime-results/.-scripts-page-speed.js
folder will be created with the performance test output.
- Go to
$timestamp/pages/localhost/$loafileid/$pagepath/data/video
(example2021-11-24T222723-0500/pages/localhost/1065975510/overview/data/video
) folder. - Copy
1.mp4
file and place in some new folder (e.g /benchmark). - Rename to
old.mp4
. - Copy the other video you want to compare with to same folder with
old.mp4
and rename it tonew.mp4
Now it's time to generate a stack video with old.mp4
and new.mp4
together.
cd /benchmark
ffmpeg -i old.mp4 -i new.mp4 -filter_complex vstack output.mp4 -vsync 2
This command will generate a output.mp4
.
If you want to add label to old.mp4
and new.mp4
:
// Update `text=` values
ffmpeg -i output.mp4 -vf "drawtext=text='Label for old video':fontcolor=white:fontsize=100:box=1:boxcolor=black@0.5:boxborderw=5:x=100:y=400,drawtext=text='Label for new video':fontcolor=white:fontsize=100:box=1:boxcolor=black@0.5:boxborderw=5:x=100:y=h-th-200" -codec:a copy output-label.mp4
This command will output the final video, names output-lavel.mp4
If doesn't work, please let me know. I'll be happy to help you!
This script was tested on Node 14 with browsertime@14.11.0
https://apple.stackexchange.com/questions/238295/installing-ffmpeg-with-homebrew https://www.sitespeed.io/documentation/ https://www.sitespeed.io/documentation/sitespeed.io/installation/#docker https://www.sitespeed.io/documentation/sitespeed.io/scripting/#getting-correct-visual-metrics https://www.sitespeed.io/documentation/sitespeed.io/performance-budget/#override-per-url