Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rustyconover/deterministic-screenshots-chromium
Create deterministic screenshots with Chromium and virtual time.
https://github.com/rustyconover/deterministic-screenshots-chromium
animation chrome-devtools chromium puppetter screenshot screenshots
Last synced: 9 days ago
JSON representation
Create deterministic screenshots with Chromium and virtual time.
- Host: GitHub
- URL: https://github.com/rustyconover/deterministic-screenshots-chromium
- Owner: rustyconover
- License: other
- Created: 2019-10-28T15:27:19.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T07:04:52.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T21:46:26.447Z (6 months ago)
- Topics: animation, chrome-devtools, chromium, puppetter, screenshot, screenshots
- Language: TypeScript
- Size: 157 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# deterministic-screenshots-chromium
A program to create deterministic screenshots of webpages and render them as videos.
If the webpage contains animations or animated gifs but the rate
at which they refresh is faster than the rate at which screenshots can be captured
you will be missing parts of the animation.
This script uses what is called virtual time and frame control in chrome to control
"time". Virtual time can be faster or slower than real wall clock time. But virtual
time is deterministic, meaning that it is disconnected from real time and there will
be no lost frames because frames/screenshots are only rendered and time advanced as specified.
Upon page load an initial budget of virtual time is assigned to the page, then once
that virtual time has expired a screenshot is created. Then another amount of virtual
time is added to the webpage and another screenshot is created. Repeating the loop
of assigning time then creating screenshots create the source frames which will then
be encoded into a h.264 video by ffmpeg.
Chrome's functionality of controlling when webpage frames is not available in Mac OS X.
This program has only been tested on Linux.
This program uses [chrome-aws-lambda](https://www.npmjs.com/package/chrome-aws-lambda) to launch Chrome and [ffmpeg-static](https://www.npmjs.com/package/ffmpeg-static) to execute ffmpeg. You may wish to change this behavior, it is left as an exercise to the reader.
## Usage
```
Usage: index.ts [options]
Options:
--width Width of the screenshot in pixels
[number] [default: 300]
--height Height of the screenshot in pixels
[number] [default: 300]
--frameInterval Interval between frames in milliseconds
[number] [default: 1000]
--url The url to screenshot [string] [required]
--frameCount The number of frames to create[number] [default: 300]
--outputFilename The filename of the output MP4/H264 file
[string] [default: "output.mp4"]
--screenshotFormat The format of screenshots created
[string] [choices: "jpeg", "png"] [default: "jpeg"]
--screenshotJpegQuality The quality of the JPEG screenshot from 0-100. 100 is
best. [number] [default: 85]
--noVideo Do not encode a video from the created frames
[boolean] [default: false]
--keepFrames Keep the generated frames [boolean] [default: false]
--help Show help [boolean]
--version, -V Show version number [boolean]
```
Example call
```
ts-node index.ts -u http://flipclockjs.com/
```
Then view the resulting output.mp4 file that is produced.
## Author
Author: Rusty Conover
Portions of this code were adapted from Chromium source as such this
program is licensed under a BSD-like license.