{"id":21487088,"url":"https://github.com/dtinth/html5-animation-video-renderer","last_synced_at":"2025-04-09T12:04:05.651Z","repository":{"id":41432192,"uuid":"209372680","full_name":"dtinth/html5-animation-video-renderer","owner":"dtinth","description":"Render HTML5-based animation into a high-quality video. (Tested with 1080p60)","archived":false,"fork":false,"pushed_at":"2023-04-30T16:13:58.000Z","size":1779,"stargazers_count":216,"open_issues_count":11,"forks_count":23,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-02T11:07:57.491Z","etag":null,"topics":["circleci","cloud-run","ffmpeg","hacktoberfest","nodejs","puppeteer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dtinth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-18T18:01:35.000Z","updated_at":"2025-03-23T16:08:14.000Z","dependencies_parsed_at":"2025-01-01T04:10:07.550Z","dependency_job_id":null,"html_url":"https://github.com/dtinth/html5-animation-video-renderer","commit_stats":{"total_commits":69,"total_committers":3,"mean_commits":23.0,"dds":"0.21739130434782605","last_synced_commit":"1cb4c174023e0f160255abfc72f161142acd76ce"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Fhtml5-animation-video-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Fhtml5-animation-video-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Fhtml5-animation-video-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Fhtml5-animation-video-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dtinth","download_url":"https://codeload.github.com/dtinth/html5-animation-video-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036064,"owners_count":21037092,"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":["circleci","cloud-run","ffmpeg","hacktoberfest","nodejs","puppeteer"],"created_at":"2024-11-23T13:26:21.609Z","updated_at":"2025-04-09T12:04:05.633Z","avatar_url":"https://github.com/dtinth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html5-animation-video-renderer\n\n[**Watch the introduction video**](https://www.youtube.com/watch?v=zaSYWktDkAQ)\n\nA Node.js script that renders an HTML5-based animation into a high-quality video (supports at least 1080p60).\nIt renders the animation in a frame-by-frame basis using Puppeteer.\nSo, even very CPU-intensive animations can be rendered without skipping frames (unlike screen recording solutions).\n\nIt works by opening a headless browser and calls `seekToFrame(frameNumber)` for each frame of your animation.\nWhen called, your web page is expected to display that frame on the screen so that a screenshot for that frame can be taken.\nEach frame is then sent to `ffmpeg` to encode the video without needing to save temporary files to disk.\nBecause it works by capturing the page screenshot, it can render:\n\n- HTML elements\n- SVG elements\n- Canvas\n- WebGL\n\nHowever, the renderer needs to be able to display a freeze frame when requested. Therefore, it does not support:\n\n- CSS animations and transitions\n- Nondeterministic animations\n\nFeatures:\n\n- **Outputs high-quality MP4 file** with configurable frame rate and size.\n- **Outputs PNG image frames** with the `--png` flag.\n- **Framework-agnostic,** so you can use it with GSAP, Pixi.js, Vue.js, React.js, etc. See examples below!\n- **Parallizable** — It can run multiple instances of headless Chrome in parallel to speed up rendering.\n- **Video with alpha channel** can be rendered using the `--transparent` option.\n  It outputs as a QuickTime Animation (.mov) file.\n\n## Examples and demos\n\nAll videos and preview images here are [generated by CircleCI](.circleci/config.yml) [on every commit](https://circleci.com/gh/dtinth/html5-animation-video-renderer/tree/master).\n\n\u003ctable\u003e\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;Image\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/th\u003e\n    \u003cth\u003eSource code\u003c/th\u003e\n    \u003cth\u003eView in browser\u003c/th\u003e\n    \u003cth\u003eResult\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd rowspan=\"2\" align=\"center\"\u003e\u003cimg src=\"https://latest-circleci-artifacts.lovely.workers.dev/github/dtinth/html5-animation-video-renderer/master/output/previews/gsap-hello-world/frame000064.png\" alt=\"Screenshot\" width=\"96\" height=\"54\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"examples/gsap-hello-world.html\"\u003eexamples/gsap-hello-world.html\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://raw.githack.com/dtinth/html5-animation-video-renderer/master/examples/gsap-hello-world.html\"\u003e🌏 View\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://latest-circleci-artifacts.lovely.workers.dev/github/dtinth/html5-animation-video-renderer/master/output/gsap-hello-world.mp4\"\u003e🎬 Play (1080p60)\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd colspan=\"3\"\u003e\n      \u003cstrong\u003eA simple but CPU-intensive Hello World example using GSAP.\u003c/strong\u003e\n      Shows basic usage on how to create an HTML5 webpage compatible with this renderer.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd rowspan=\"2\" align=\"center\"\u003e\u003cimg src=\"https://latest-circleci-artifacts.lovely.workers.dev/github/dtinth/html5-animation-video-renderer/master/output/previews/vue-starfield/frame000064.png\" alt=\"Screenshot\" width=\"96\" height=\"54\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"examples/vue-starfield.html\"\u003eexamples/vue-starfield.html\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://raw.githack.com/dtinth/html5-animation-video-renderer/master/examples/vue-starfield.html\"\u003e🌏 View\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://latest-circleci-artifacts.lovely.workers.dev/github/dtinth/html5-animation-video-renderer/master/output/vue-starfield.mp4\"\u003e🎬 Play (1080p60)\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd colspan=\"3\"\u003e\n      \u003cstrong\u003eA very CPU-intensive starfield built with Vue.js.\u003c/strong\u003e\n      When viewed in real-time, my Late 2013 MacBook Pro cannot render any faster than 10 fps.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Creating your HTML5 animation\n\nYour HTML5-based animation can be created using any tool, so long as the webpage has these properties:\n\n- The webpage should contain a `#scene` element in the DOM, positioned at `top: 0; left: 0;`.\n  The dimensions of the `#scene` element will be the video’s dimensions.\n  You can use the provided [lib/style.css](lib/style.css) as a starting point.\n\n- The webpage should contain these global JavaScript functions:\n\n  - **`getInfo()`** should return an object with the following properties:\n\n    - `fps` The video frame rate.\n    - `numberOfFrames` The number of frames to render.\n\n  - **`seekToFrame(frameNumber)`** should display the frame at the specified `frameNumber`.\n    This function may return a promise, in this case the renderer will wait for it to resolve.\n    Please make sure that all assets (such as images/fonts) are already loaded.\n\n    If `seekToFrame()` returns (or resolves to) a string begining with `data:image/png;base64,`,\n    then the renderer directly renders the PNG image instead of taking a screenshot.\n    This can really speed up rendering by an order of magnitude.\n\n  See an example at [examples/gsap-hello-world.html](examples/gsap-hello-world.html).\n\n## Install the prerequisites\n\nInstall Node.js 12, Yarn and ffmpeg, then install the project dependencies with:\n\n```\nyarn install\n```\n\n## Running the renderer\n\nTo see help text, run:\n\n```\nnode render --help\n```\n\n### Rendering a video\n\n```\nnode render --url=\u003cURL\u003e --video=\u003cFILE\u003e.mp4\n```\n\n### Controlling parallelism\n\nBy default, the renderer will spawn multiple headless Chrome processes matching the number of CPU cores detected on your machine.\nHowever, more running Chrome instances means more memory consumption.\nThis may be undesirable.\n\nFor instance, CircleCI instances have 2 vCPUs and 4 GB of RAM.\nHowever it reports as having 36 cores, leading to a lot of crashes due to out-of-memory condition.\n\nYou can control the number of headless Chrome processes using the `--parallelism` option:\n\n```\nnode render --url=\u003cURL\u003e --video=\u003cFILE\u003e.mp4 --parallelism=4\n```\n\n### Render as image files instead\n\nYou can also render individual frames as different image files using the `--png` option.\nThis can help you avoid losing your work in case you want to render a long video, in exchange for more disk usage.\n\n```\nnode render --url=\u003cURL\u003e --video=\u003cFILE\u003e.mp4 --png=\u003cDIR\u003e\n```\n\nThis will render each frame to `\u003cDIR\u003e/frameNNNNNN.png`.\nNote that you will have to assemble these frames into a video file yourself.\nYou can use this in conjunction with `--no-video` to render just the image files, without the video.\n\n### Render only some part of the video\n\nYou can also set the starting and ending frame numbers.\n\n```\nnode render --url=\u003cURL\u003e --video=\u003cFILE\u003e.mp4 --start=60 --end=120\n```\n\nThis will render the frames 60–119. Note that the ending frame is not rendered.\n\n### Do not render a video\n\nUse the `--no-video` option. Useful when used with `--png`.\n\n```\nnode render --url=\u003cURL\u003e --no-video\n```\n\n### Render a single frame\n\nJust set `--end` to (`--start` + 1) and render out a `--png` file.\n\n```\nnode render --url=\u003cURL\u003e --png=\u003cDIR\u003e --start=60 --end=61\n```\n\n### Upscale/downscale the viewport\n\nUse the `--scale` option to scale up or scale down the browser viewport.\n\n```\nnode render --url=\u003cURL\u003e --video=\u003cFILE\u003e.mp4 --scale=0.5\nnode render --url=\u003cURL\u003e --video=\u003cFILE\u003e.mp4 --scale=2\n```\n\n### Render alpha channel\n\nYou can also use this tool to render animations with alpha channel passing the `--alpha` option and outputting a `.mov` file.\nNote that the resulting file size will be significantly larger due to codec change (QuickTime Animation codec)!\n\n```\nnode render --url=\u003cURL\u003e --video=\u003cFILE\u003e.mov --alpha\n```\n\nThis allows you to composite the rendered animation on top of another video file!\n\n![](docs/images/transparent-example.png)\n\n\u003c!--\n## Demo\n\nTODO add video\n\nIt has been used to render a 4-minute long 1080p60 video. That’s 15000 frames.\nThe speed on my Late 2013 MacBook Pro is around 4.5 frames per second.\n\n```\nframe=15000 fps=4.5 q=-1.0 Lsize=  644441kB time=00:04:09.98 bitrate=21118.5kbits/s speed=0.0758x\nvideo:644374kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.010475%\n``` --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtinth%2Fhtml5-animation-video-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdtinth%2Fhtml5-animation-video-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtinth%2Fhtml5-animation-video-renderer/lists"}