{"id":13529638,"url":"https://github.com/yaronn/GifW00t","last_synced_at":"2025-04-01T17:30:45.189Z","repository":{"id":66165373,"uuid":"12650365","full_name":"yaronn/GifW00t","owner":"yaronn","description":"A pure javascript web recorder","archived":false,"fork":false,"pushed_at":"2015-01-21T21:38:29.000Z","size":13953,"stargazers_count":824,"open_issues_count":7,"forks_count":46,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-10-14T16:53:31.570Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/yaronn.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}},"created_at":"2013-09-06T17:40:03.000Z","updated_at":"2024-10-07T17:49:12.000Z","dependencies_parsed_at":"2023-02-19T23:45:29.651Z","dependency_job_id":null,"html_url":"https://github.com/yaronn/GifW00t","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/yaronn%2FGifW00t","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaronn%2FGifW00t/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaronn%2FGifW00t/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaronn%2FGifW00t/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yaronn","download_url":"https://codeload.github.com/yaronn/GifW00t/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222748050,"owners_count":17031894,"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":[],"created_at":"2024-08-01T07:00:38.119Z","updated_at":"2024-11-02T16:30:54.764Z","avatar_url":"https://github.com/yaronn.png","language":"JavaScript","funding_links":[],"categories":["Utilities","JavaScript"],"sub_categories":[],"readme":"GifW00t!\n====================\n\n\u003cimg src=\"https://raw.githubusercontent.com/yaronn/pacman/master/img/demo8.gif\"  width=\"220px\" /\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/yaronn/pacman/master/img/demo10.gif\"  width=\"200px\" /\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/yaronn/pacman/master/img/demo11.gif\"  width=\"230px\" /\u003e\n\nExamples Gallery\n---------------------\n* [Packman](http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.html)\n* [Helicopter](http://s3-us-west-2.amazonaws.com/anigif100/examples/helicopter/index.html)\n* [Paint](http://s3-us-west-2.amazonaws.com/anigif100/examples/paint/paint.html)\n* [Editor](http://s3-us-west-2.amazonaws.com/anigif100/examples/editor/editor.html)\n\nMore in my twitter - [@YaronNaveh](http://twitter.com/#!/YaronNaveh)\n\nYou may also like building [ascii dashboards](https://github.com/yaronn/blessed-contrib) in the terminal.\n\nWhat is GifW00t!?\n---------------------\nGifW00t! is a pure-javascript web recorder. Just add one script tag to your page, and users will be able to record and replay their interaction with the site. Some of the possibilities:\n\n* Record game sessions and watch instant replay\n* Report site bugs\n* Usage instructions clip\n* Share amazing data visualizations, canvas animation\n\nOh and did I mention that you can use GifW00t! on 3rd party sites as well?\n\nFor more information check out [@YaronNaveh](http://twitter.com/#!/YaronNaveh), the project [sample site](http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.html), or [my blog](http://webservices20.blogspot.com/).\n\nHow to use GifW00t!?\n---------------------\nThere are 4 options:\n\n### 1. You surf in a site that already embeds GifW00t!\nIn this case all you need is to work with the [GifW00t! panel bar](http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.html).\n\n### 2. You surf in a site that does not embed GifW00t!\nNo problem. Open Chrome developer tools (CTRL+J) or Firefox Firebug and paste this code in the console:\n\n    var anigif_base_url = \"https://s3-us-west-2.amazonaws.com/anigif100/anigif/\"\n    var ref=document.createElement('script')\n    ref.setAttribute(\"src\", \"https://s3-us-west-2.amazonaws.com/anigif100/anigif/anigif.min.js\")\n    document.head.appendChild(ref)\n\nwait a few seconds and the GifW00t! panel bar will appear. You can also set both urls to https if you need ssl.\n\n### 3. You develop a website and want to embed GifW00t!\n\n**Option 1 - refer directly to GifW00t! server**\n\nJust add this code inside your \\\u003chead\\\u003e:\n\n    \u003cscript\u003e\n        var anigif_base_url = \"https://s3-us-west-2.amazonaws.com/anigif100/anigif/\"\n    \u003c/script\u003e\n    \u003cscript src=\"https://s3-us-west-2.amazonaws.com/anigif100/anigif/anigif.min.js\"\u003e\u003c/script\u003e\n  \n**Option 2 - serve GifW00t! yourself (it is just static files)**\n\nCopy /anigif from this project to your web site root. Then in your html add this:\n\n    \u003cscript src=\"https://s3-us-west-2.amazonaws.com/anigif100/anigif/anigif.min.js\"\u003e\u003c/script\u003e\n\n\n### 4. You want a bookmarklet, because you can.\n\n    javascript:(function(a)%7Bwindow.anigif_base_url%3Da%3Bvar%20b%3Ddocument.createElement(%22script%22)%3Bb.src%3Da%2B%22anigif.min.js%22%3Bdocument.head.appendChild(b)%7D)(%22https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fanigif100%2Fanigif%2F%22)%3B%0A\n\n* [utils/bookmarklet.js](utils/bookmarklet.js)\n\n* [Build your own here](http://festercluck.github.io/)    \n\nCompatibility\n---------------------\nShould work on Chrome\u003e29, and Firefox\u003e24 and Safari 7. Will probably not work on some other browsers since some very new browser features are required.\n\n\nSettings\n---------------------\nClick the GifW00t! panel bar settings button in order to change record settings. Important settings are:\n\n**Element to record:** What element in your page should GifW00t! capture (including sub elements). The value is a CSS selector. For example if you want to capture '\\\u003cdiv id=\"main\"\\\u003e' set the value to '#main'. If you only have one canvas and want to capture it just write 'canvas' (it will use a tag selector). If you only want to record a canvas then you should write a selector directly to the canvas and not to some DIV around it - you would see better performance. Always choose this value such that you record the smallest DOM possible for your needs.\n\n**Period mode**: Online means that many of the calculations are done during record, and offline means that all is done after record. Online has the advantage of being more accurate in capturing the page and generating the image faster. However if you define a high frame-per-record or a ratio that differs from 1 then the online calculations will slow down your flow while recording.\n\n**Frames per second:** How many frames should GifW00t! capture each second. This heavily affects performance\n\n\nOptimization\n---------------------\nHere are the top ways to make GifW00t! render images faster:\n\n* Choose the minimal \"element to record\" as you can, with the least DOM child elements as possible. If you record a canvas choose a selector directly to it.\n* Choose smartly between online and offline period modes. Online will be faster (and produce more accurate image in many cases) but if you use high frames-per-second or ratio that differs than 1 or have a complex animation then online will slow down your work.\n* Choose a small number of frames per second. For low-graphic you will probably be ok with 2 per seconds. For high graphics (games, canvas) use 10 or 20 (or try with lower values first).\n* Dont's record for too long... Unless you like 100GB animated GIFs. A recording should probably be from a few seconds to a minute.\n* When using offline period mode, set the \"ratio\" attribute to a low value. This attribute determines how result gif is scaled down compared to actual size. 0.5 means 50%. When using online period mode set this attribute to 1.\n\n**Examples:**\n* You want to record a game which happens on canvas. In this case you want to choose \"element to record\" directly to your canvas, set frames-per-second for something between 10-20, and try online mode. If you need a ratio that is different than 1, or if online is slowing your game, then use offline mode and consider reducing ratio to 0.5-0.8.\n* You want to record a web site interaction. Use online (offline may not always work here) and set frames per second to something between 0.5-2. Make sure to choose \"element to record\" to the DOM node with least possible items inside it (based on your record needs of course).\n* You want to record a web site interaction. The site has a huge DOM tree and you need high request-per second. In general online is more accurate than offline when snapshotting HTML. However here online might slow your browser while recording, so you should try both.\n\nSpecial Thanks\n---------------------\nGifW00t! uses some amazing libraries including [html2canvas](https://github.com/niklasvh/html2canvas) by [@Niklasvh](https://twitter.com/Niklasvh) and [jsgif](https://github.com/antimatter15/jsgif) by [@antimatter15](https://twitter.com/antimatter15).\nAlso special thanks to [@daleharvey](https://twitter.com/daleharvey/) on the great HTML5 [Pac-Man](http://arandomurl.com/2010/07/25/html5-pacman.html) and [helicopter](http://arandomurl.com/2010/08/05/html5-helicopter.html) games which I've used a lot while testing.\n\nMore information\n---------------------\nCheck out [@YaronNaveh](http://twitter.com/#!/YaronNaveh), the project [sample site](http://s3-us-west-2.amazonaws.com/anigif100/pacman/index.html), or [my blog](http://webservices20.blogspot.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaronn%2FGifW00t","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyaronn%2FGifW00t","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaronn%2FGifW00t/lists"}