{"id":13588435,"url":"https://github.com/etro-js/etro","last_synced_at":"2025-04-12T06:02:38.375Z","repository":{"id":40294346,"uuid":"151770605","full_name":"etro-js/etro","owner":"etro-js","description":"Typescript video-editing framework for the browser","archived":false,"fork":false,"pushed_at":"2024-03-24T12:14:44.000Z","size":35943,"stargazers_count":759,"open_issues_count":70,"forks_count":83,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-04-14T07:42:23.345Z","etag":null,"topics":["api-driven","audio","blob","browser","etro","hacktoberfest","javascript","javascript-framework","javascript-frameworks","nodejs","typescript","video","video-editing","video-editor","video-manipulation"],"latest_commit_sha":null,"homepage":"https://etrojs.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/etro-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2018-10-05T19:49:51.000Z","updated_at":"2024-05-02T03:40:02.536Z","dependencies_parsed_at":"2023-02-15T08:15:50.817Z","dependency_job_id":"57359706-5f52-4765-8f37-6e8c905cf9da","html_url":"https://github.com/etro-js/etro","commit_stats":{"total_commits":756,"total_committers":23,"mean_commits":"32.869565217391305","dds":0.05820105820105825,"last_synced_commit":"4d46b4bbbcb45a302881aa419042431b8f4e9ee2"},"previous_names":["clabe45/vidar"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etro-js%2Fetro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etro-js%2Fetro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etro-js%2Fetro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etro-js%2Fetro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etro-js","download_url":"https://codeload.github.com/etro-js/etro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525137,"owners_count":21118616,"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":["api-driven","audio","blob","browser","etro","hacktoberfest","javascript","javascript-framework","javascript-frameworks","nodejs","typescript","video","video-editing","video-editor","video-manipulation"],"created_at":"2024-08-01T15:06:42.871Z","updated_at":"2025-04-12T06:02:38.296Z","avatar_url":"https://github.com/etro-js.png","language":"TypeScript","readme":"# Etro\n\n[![](https://img.shields.io/npm/v/etro)](https://www.npmjs.com/package/etro)\n[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fetro-js%2Fetro%2Fbadge\u0026style=flat)](https://actions-badge.atrox.dev/etro-js/etro/goto)\n[![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?style=flat\u0026logo=discord\u0026logoColor=white)](https://discord.gg/myrBsQ8Cht)\n\nEtro is a typescript framework for programmatically editing videos. It lets you\ncomposite layers and add filters (effects). Etro comes shipped with text, video,\naudio and image layers, along with a bunch of GLSL effects. You can also define\nyour own layers and effects with javascript and GLSL.\n\n## Features\n\n- Composite video and audio layers\n- Use built-in hardware accelerated effects\n- Write your own effects in JavaScript and GLSL\n- Manipulate audio with the web audio API *(audio effects coming soon)*\n- Define layer and effect parameters as keyframes or custom functions\n- Render to a blob in realtime *(offline rendering coming soon)*\n\n## Installation\n\n```\nnpm i etro\n```\n\n### System Dependencies\n\n- `node-canvas`\n\n_If you have problems while installing `etro` you may need to manually install additional dependencies. See: [compiling node-canvas](https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling)_\n\n## Basic Usage\n\nLet's look at an example:\n```js\nimport etro from 'etro'\n\nvar movie = new etro.Movie({ canvas: outputCanvas })\nvar layer = new etro.layer.Video({ startTime: 0, source: videoElement })  // the layer starts at 0s\nmovie.addLayer(layer)\n\nmovie.record({ frameRate: 24 })  // or just `play` if you don't need to save it\n    .then(blob =\u003e ...)\n```\n\nThe blob could then be downloaded as a video file or displayed using a `\u003cvideo\u003e`\nelement.\n\nSee the [documentation](https://etrojs.dev/docs/category/layers) for a list of\nall built-in layers.\n\n## Effects\n\nEffects can transform the output of a layer or movie:\n```js\nvar layer = new etro.layer.Video({ startTime: 0, source: videoElement })\n    .addEffect(new etro.effect.Brightness({ brightness: +100) }))\n```\n\nSee the [documentation](https://etrojs.dev/docs/category/effects) for a list of\nall built-in effects.\n\n## Dynamic Properties\n\nMost properties also support keyframes and functions:\n```js\n// Keyframes\nlayer.effects[0].brightness = new etro.KeyFrame(\n  [0, -75],  // brightness == -75 at 0 seconds\n  [2, +75]  // +75 at 2 seconds\n)\n\n// Function\nlayer.effects[0].brightness = () =\u003e 100 * Math.random() - 50\n```\n\nSee the [documentation](https://etrojs.dev/docs/reference/dynamic-properties)\nfor more info.\n\n## Using in Node\n\nTo use Etro in Node, see the [wrapper](https://github.com/etro-js/etro-node):\n\n## Running the Examples\n\nStart the development server (only used for convenience while developing; you\ndon't need a server to use Etro):\n\n```\nnpm i\nnpm run build\nnpm start\n```\n\nNow you can open any example (such as\nhttp://127.0.0.1:8080/examples/introduction/hello-world1.html).\n\n## Further Reading\n\n- [Documentation](https://etrojs.dev/docs/intro)\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md)\n\n## License\n\nDistributed under GNU General Public License v3. See [LICENSE](LICENSE) for more\ninformation.\n","funding_links":[],"categories":["TypeScript","HarmonyOS","browser"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetro-js%2Fetro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetro-js%2Fetro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetro-js%2Fetro/lists"}