{"id":23785205,"url":"https://github.com/benjaminadk/gifit","last_synced_at":"2025-09-06T03:31:03.725Z","repository":{"id":37216319,"uuid":"184846366","full_name":"benjaminadk/gifit","owner":"benjaminadk","description":"GifIt - A JavaScript clone of ScreenToGif.","archived":false,"fork":false,"pushed_at":"2022-12-10T14:51:41.000Z","size":3200,"stargazers_count":7,"open_issues_count":21,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-29T19:03:18.219Z","etag":null,"topics":["electron","javascript","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benjaminadk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-05-04T03:08:24.000Z","updated_at":"2023-09-16T09:35:31.000Z","dependencies_parsed_at":"2023-01-26T02:45:16.662Z","dependency_job_id":null,"html_url":"https://github.com/benjaminadk/gifit","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjaminadk%2Fgifit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjaminadk%2Fgifit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjaminadk%2Fgifit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjaminadk%2Fgifit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjaminadk","download_url":"https://codeload.github.com/benjaminadk/gifit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232081575,"owners_count":18469913,"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":["electron","javascript","react"],"created_at":"2025-01-01T13:15:22.031Z","updated_at":"2025-01-01T13:15:22.489Z","avatar_url":"https://github.com/benjaminadk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GifIt\n\nA JavaScript clone of the popular [**ScreenToGif**](https://github.com/NickeManarin/ScreenToGif).\n\n## Contents\n\n- [**Objective**](#objective)\n- [**Installation**](#installation)\n- [**Tech Stack**](#tech-stack)\n- [**Features**](#features)\n  - [**Screen Recorder**](#screen-recorder)\n  - [**Webcam Recorder**](#webcam-recorder)\n  - [**Board Recorder**](#board-recorder)\n  - [**GIF Encoding**](#gif-encoding)\n  - [**Editor**](#editor)\n    - [**Selection**](#selection)\n    - [**Playback**](#playback)\n    - [**Duration**](#duration)\n    - [**Title Frame**](#title-frame)\n    - [**Clipboard**](#clipboard)\n    - [**Zoom Controls**](#zoom-controls)\n    - [**Free Drawing**](#free-drawing)\n    - [**Progress**](#progress)\n    - [**Watermark**](#watermark)\n    - [**Obfuscate**](#obfuscate)\n    - [**Border**](#border)\n  - [**Icons**](#icons)\n\n## Objective\n\n[**ScreenToGif**](https://github.com/NickeManarin/ScreenToGif) is a popular (7000⭐) _.NET_ application that allows users to record GIFs from their screen, webcam or sketchboard. It is written primarily in _C#_. **ScreenToGif** is an exceptional application and I highly recommend you go and download it. This project an attempt to clone the original using JavaScript for education purposes. If you want to make GIFs download [**ScreenToGif**](https://github.com/NickeManarin/ScreenToGif).\n\n## Installation\n\nDownload the latest release.\n\nPlease note this application is not intended for distrubution. As mentioned above, download [**ScreenToGif**](https://github.com/NickeManarin/ScreenToGif).\n\n## Tech Stack\n\nOutline of the main dependencies used in the application.\n\n|       Library       |    Version     |                         Description                         |\n| :-----------------: | :------------: | :---------------------------------------------------------: |\n|     `electron`      |     5.0.1      | A cross platform framework for building desktop application |\n| `electron-webpack`  |     2.6.2      |             Compile Electron apps with webpack              |\n| `electron-builder`  |    20.40.2     |      Package and build Electron apps for distribution       |\n|       `react`       |     16.8.6     |       JavaScript library for building user interfaces       |\n|     `react-dom`     |     16.8.6     |                React entry point to the DOM                 |\n|     `react-rnd`     |     9.1.2      |        A resizable and draggable component for React        |\n| `styled-components` |     4.2.0      |           Visual primitives for the component age           |\n|   `gif-encoder-2`   |     1.0.0      |                  Create GIFs with Node.js                   |\n|     `immutable`     |  4.0.0-rc.12   |    Immutable persistent data collections for JavaScript     |\n|     `date-fns`      | 2.0.0-alpha.27 |                 Tool for manipulating dates                 |\n|      `iohook`       |     0.4.6      |         Node.js native keyboard and mouse listener          |\n|     `archiver`      |     3.0.0      |        A streaming interface for archive generation         |\n\n## Features\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/startup-1.png\" /\u003e\n\u003c/p\u003e\n\n### Screen Recorder\n\nCapture fullscreen, or selected portion, frame-by-frame at a user set frame rate. This is accomplished using **Electron's** `desktopCapturer` API with HTML video and canvas elements. The user can pause and resume recording. After the recorder is stopped a new project folder is created containing each frame saved as a PNG as well as other information relating to the project saved in a JSON file.\n\nThe screen recorder uses **Electron's** transparent `BrowserWindow` which allows the display of a small recorder user interface.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/recorder-2.png\" /\u003e\n\u003c/p\u003e\n\nThe `react-rnd` package provides a useful resizable/draggable component that can be used to select a portion of the screen. The dark tinted background is created with 4 separate `div` elements that resize along with the box.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/recorder-1.png\" /\u003e\n\u003c/p\u003e\n\nWhen recording starts **Electron's** `Tray` API is used to add a red camera icon to the operating system tray in the lower right corner. Clicking this stops the recording. **Electron** also provides a `globalShortcut` API to set global shortcut keys. In this case, the `escape` key also stops recording.\n\n### Webcam Recorder\n\nCapture webcam output at a user set size, frame-by-frame at a user set frame rate. This works very similarly to the Screen Recorder except it uses a video input device, aka webcam, of the user's choosing. A notable feature is the ability to scale the size of the video with a HTML range input.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/recorder-5.png\" /\u003e\n\u003c/p\u003e\n\n### Board Recorder\n\nCapture canvas output as user draws onto white board. The board is an HTML canvas element. The key feature of the Board Recorder is that, by default, frames are only captured while the user is actually drawing. The end result is an animation that appears to draw itself.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/recorder-4.png\" /\u003e\n\u003c/p\u003e\n\n### GIF Encoding\n\nCombine all frames into a single GIF image. There a numerous options for this, including three seperate encoders. Options include setting frame delay, number of loops, quality and palette size. I forked an existing GIF encoding package and added the Octree algorithm as well as some speed optimizations to create [`gif-encoder-2`](https://github.com/benjaminadk/gif-encoder-2). This library is designed to be used in a Node environment.\n\nAs an alternative, [**FFmpeg**](https://ffmpeg.org/) can be used to encode the GIF. This is accomplished by using **Node's** `child_process` module. The user must download **FFmpeg** separately. **GitIt** will automatically look for the **FFmpeg** executable in the user's `PATH` environment variable, but the user can also enter this path manually in options.\n\n| Encoder  | Speed | Filesize |                                                           GIF                                                           |\n| :------: | :---: | :------: | :---------------------------------------------------------------------------------------------------------------------: |\n| NeuQuant |  2nd  | largest  | ![kd-neu](https://raw.githubusercontent.com/benjaminadk/gif-encoder-2/master/examples/output/intermediate-neuquant.gif) |\n|  Octree  |  3rd  |  middle  |  ![kd-oct](https://raw.githubusercontent.com/benjaminadk/gif-encoder-2/master/examples/output/intermediate-octree.gif)  |\n|  FFmpeg  |  1st  | smallest |                    ![kd-ffmpeg](https://gifit-screenshots.s3-us-west-1.amazonaws.com/kd-ffmpeg.gif)                     |\n\n### Editor\n\nOffers a variety of features that can alter individual frames and manage the project as a whole.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/editor-1.png\" /\u003e\n\u003c/p\u003e\n\nThe top portion of the Editor is a menu with multiple tab categories. The main portion contains the current frame's image which can be scaled up and down. The bottom portion displays a row of thumbnails. Below the thumbnails is a small status bar that displays loading progress, messages and other controls. Various features require user input and these are displayed in a drawer which slides in and out from the right side of the screen.\n\n#### Selection\n\nWhile one full-size frame is displayed at a time in the main editor window, multiple frame thumbnails can be selected using the standard `Control` and `Shift` key modifiers. Many editor features can be applied to all selected frames.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/editor-4.png\" /\u003e\n\u003c/p\u003e\n\n#### Playback\n\nFrames can be played back at actual speed to give the user an idea of what the GIF output will look like.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/playback.gif\" /\u003e\n\u003c/p\u003e\n\n#### Duration\n\nEach frame has a duration property which is set as the frame is captured, based on the initial frame rate. The editor allows setting this property to any value, increasing/decreasing by a set value or scaling up/down by a set percentage. The duration of each frame is displayed with its thumbnail.\n\n#### Title Frame\n\nTitle frames can be inserted into the frame list at any point and consist of a solid background and text.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/editor-3.png\" /\u003e\n\u003c/p\u003e\n\n#### Clipboard\n\nThe Editor has its own internal clipboard. The toolbar buttons or standard keyboard shortcuts of `Control+X`, `Control+C` and `Control+V` can be used to cut, copy and paste selected frames. This allows for easy manipulation of frames.\n\n#### Zoom Controls\n\nWhen a project is loaded the editor adjusts the scale setting so that the entire frame fits within the main section. The user then has the power to zoom in and out as they wish, with the options to return to the original zoom level at any point.\n\n#### Free Drawing\n\nFreehand drawing can be applied to frames. Options include square or rounded pen tips, a wide range of pen sizes and color selections, and a highlighter effect.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/editor-7.png\" /\u003e\n\u003c/p\u003e\n\n#### Progress\n\nThe editor features two types of progress bars with a variety of options. The first type of progress bar is variable width with the bar growing as the GIF progresses. The width of the bar reflects the percentage of the total GIF time that has passed. The second type of progress bar is fixed width. The bar displays a comparison of elapsed time vs total time. Options include choosing the size, color and location of the progress bar.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/editor-5.png\" /\u003e\n\u003c/p\u003e\n\n#### Watermark\n\nAdd a smaller image as a watermark over the original frame. Typically, this is some sort of branding but it can be anything. The editor allows the user to chose any image file from their local machine and drag and/or resize it to any part of the screen. The user can also select the opacity of the image. This feature can be applied to one or more frames at a time.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://gifit-screenshots.s3-us-west-1.amazonaws.com/editor-6.png\" /\u003e\n\u003c/p\u003e\n\n#### Obfuscate\n\nCreates a pixelated effect that can disquise a selected area. Useful if a face or certain sensitive information needs to be covered up. The obfuscate effect creates a more visual appealing result than covering an area with a solid color for example.\n\n#### Border\n\nCreate a border on any or all sides of frames. This is an especially useful feature when frames have the same color background as the area where the GIF will be shared. Adding a border can help make the GIF stand out.\n\n### Icons\n\nI really liked the icon package that **ScreenToGif** used but I couldn't find anything remotely close to it for **JavaScript**. I ended up drawing them all by hand with [**Boxy SVG**](https://boxy-svg.com/) and creating a simple `Svg` component with **React** that accepts a `name` prop and returns the actual `svg` markup.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjaminadk%2Fgifit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjaminadk%2Fgifit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjaminadk%2Fgifit/lists"}