{"id":18023179,"url":"https://github.com/rustyconover/deterministic-screenshots-chromium","last_synced_at":"2025-03-26T23:31:00.966Z","repository":{"id":37878784,"uuid":"218079103","full_name":"rustyconover/deterministic-screenshots-chromium","owner":"rustyconover","description":"Create deterministic screenshots with Chromium and virtual time.","archived":true,"fork":false,"pushed_at":"2022-12-10T07:04:52.000Z","size":161,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T20:59:34.672Z","etag":null,"topics":["animation","chrome-devtools","chromium","puppetter","screenshot","screenshots"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rustyconover.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-28T15:27:19.000Z","updated_at":"2024-09-30T19:59:26.000Z","dependencies_parsed_at":"2023-01-26T00:31:03.211Z","dependency_job_id":null,"html_url":"https://github.com/rustyconover/deterministic-screenshots-chromium","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustyconover%2Fdeterministic-screenshots-chromium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustyconover%2Fdeterministic-screenshots-chromium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustyconover%2Fdeterministic-screenshots-chromium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustyconover%2Fdeterministic-screenshots-chromium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rustyconover","download_url":"https://codeload.github.com/rustyconover/deterministic-screenshots-chromium/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245753874,"owners_count":20666827,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","chrome-devtools","chromium","puppetter","screenshot","screenshots"],"created_at":"2024-10-30T07:07:41.389Z","updated_at":"2025-03-26T23:31:00.593Z","avatar_url":"https://github.com/rustyconover.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# deterministic-screenshots-chromium\n\nA program to create deterministic screenshots of webpages and render them as videos.\n \nIf the webpage contains animations or animated gifs but the rate \nat which they refresh is faster than the rate at which screenshots can be captured\nyou will be missing parts of the animation.\n\nThis script uses what is called virtual time and frame control in chrome to control\n\"time\".  Virtual time can be faster or slower than real wall clock time.  But virtual\ntime is deterministic, meaning that it is disconnected from real time and there will \nbe no lost frames because frames/screenshots are only rendered and time advanced as specified.\n\nUpon page load an initial budget of virtual time is assigned to the page, then once\nthat virtual time has expired a screenshot is created.  Then another amount of virtual\ntime is added to the webpage and another screenshot is created.  Repeating the loop\nof assigning time then creating screenshots create the source frames which will then \nbe encoded into a h.264 video by ffmpeg.\n \nChrome's functionality of controlling when webpage frames is not available in Mac OS X.  \nThis program has only been tested on Linux. \n\nThis 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. \n\n## Usage\n\n```\nUsage: index.ts [options]\n\nOptions:\n  --width                  Width of the screenshot in pixels\n                                                         [number] [default: 300]\n  --height                 Height of the screenshot in pixels\n                                                         [number] [default: 300]\n  --frameInterval          Interval between frames in milliseconds\n                                                        [number] [default: 1000]\n  --url                    The url to screenshot             [string] [required]\n  --frameCount             The number of frames to create[number] [default: 300]\n  --outputFilename         \u003cfilename\u003e The filename of the output MP4/H264 file\n                                                [string] [default: \"output.mp4\"]\n  --screenshotFormat       The format of screenshots created\n                             [string] [choices: \"jpeg\", \"png\"] [default: \"jpeg\"]\n  --screenshotJpegQuality  The quality of the JPEG screenshot from 0-100. 100 is\n                           best.                          [number] [default: 85]\n  --noVideo                Do not encode a video from the created frames\n                                                      [boolean] [default: false]\n  --keepFrames             Keep the generated frames  [boolean] [default: false]\n  --help                   Show help                                   [boolean]\n  --version, -V            Show version number                         [boolean]\n```\n\nExample call\n```\nts-node index.ts -u http://flipclockjs.com/\n```\n\nThen view the resulting output.mp4 file that is produced.\n\n## Author \nAuthor: Rusty Conover \u003crusty@luckydinosaur.com\u003e\n\nPortions of this code were adapted from Chromium source as such this\nprogram is licensed under a BSD-like license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frustyconover%2Fdeterministic-screenshots-chromium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frustyconover%2Fdeterministic-screenshots-chromium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frustyconover%2Fdeterministic-screenshots-chromium/lists"}