{"id":14990190,"url":"https://github.com/web-components-in-space/recordable-canvas","last_synced_at":"2025-04-12T02:05:50.196Z","repository":{"id":160791555,"uuid":"626198771","full_name":"Web-Components-in-Space/recordable-canvas","owner":"Web-Components-in-Space","description":"A Web Component based canvas element wrapper that can be recorded to a downloadable video","archived":false,"fork":false,"pushed_at":"2023-05-05T04:01:43.000Z","size":21,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T02:05:39.512Z","etag":null,"topics":["canvas","mp4box","webcodecs","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Web-Components-in-Space.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-11T01:58:53.000Z","updated_at":"2024-05-29T06:55:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"56b49a0b-ef29-4e9a-8811-bc404d02b38f","html_url":"https://github.com/Web-Components-in-Space/recordable-canvas","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"d9aa32cfe975d36c21d6280117b492a43ccdfbec"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Web-Components-in-Space%2Frecordable-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Web-Components-in-Space%2Frecordable-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Web-Components-in-Space%2Frecordable-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Web-Components-in-Space%2Frecordable-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Web-Components-in-Space","download_url":"https://codeload.github.com/Web-Components-in-Space/recordable-canvas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505862,"owners_count":21115354,"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":["canvas","mp4box","webcodecs","webcomponent","webcomponents"],"created_at":"2024-09-24T14:19:40.796Z","updated_at":"2025-04-12T02:05:50.167Z","avatar_url":"https://github.com/Web-Components-in-Space.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# recordable-canvas\nA canvas element that can be recorded to a downloadable video\n\n`\u003crecordable-canvas\u003e` is a Web Component that wraps the canvas element and provides an API to record the contents\nof the canvas to an MP4 file.\n\nIt uses the Web Codecs API (https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API) to encode the stream, \nand then MP4Box.js (https://github.com/gpac/mp4box.js/) to mux and save the file.\n\nSince the canvas has a limited API (as most operations are done through the canvas context, you should find all the methods you'd normally need on an HTMLCanvasElement\npassed through.\n\nIn addition to any normal canvas attributes, a `recording` attribute will be applied when this \ncomponent is recording. There are also few more API calls:\n\nUse by importing `index.js` or `recordable-canvas.js` and wait for the `ready` event\nto set up the canvas (otherwise the component may not have registered yet and not have an API)\n```\n\u003crecordable-canvas width=\"300\" height=\"300\"\u003e\u003c/recordable-canvas\u003e\n\u003cscript\u003e\n    import 'recordable-canvas';\n    const canvas = document.body.querySelector('recordable-canvas');\n    canvas.addEventListener('ready', () =\u003e { ...\n\u003c/script\u003e\n```\n\n`get innerCanvas`\n-----------------\nas the canvas we're recording against is wrapped with the `recordable-canvas` Web Component, \nif you need to access this canvas for any reason, you may do so with this getter\n\n`startRecording`\n----------------\nStart canvas recording. This accepts two optional arguments:\n- timeBetweenKeyframes: if you want to change the default time in milliseconds (1000) between keyframes in the encoded video, you may set this here\n- config: a custom VideoEncoderConfig you may pass to override the default (specified below)\n\nDefault Encoder Configuration:\n```\n{\n    codec : 'avc1.42001E',\n    width: 0,\n    height: 0,\n    hardwareAcceleration:\"prefer-hardware\",\n    avc:{format:\"avc\"}\n}\n```\n*width and height will be overwritten with the canvas width and height*\n\navc1.42001E refers to AVC baseline level 3 which supports 1920x1080 as shown in the demos in this repo.\nRefer here for others https://privacycheck.sec.lrz.de/active/fp_cpt/fp_can_play_type.html\n\n`stopRecording`\n----------------\nStops recording the canvas. Accepts an optional string for a filename. If the filename is\nspecified, the file will automatically be saved as a download\n\n`saveFile`\n-----------\nAccepts a filename as a parameter and when calls, saves the file as a download\n\n`get isRecording`\n-----------------\nA getter which will return true or false to indicate if recording is in progress\n\n`encodeFrame`\n-------------\nPass with no arguments. This will snapshot the current state of the canvas and encode it.\nRecordings occur in realtime, meaning the frame's timestamp will be relative to\nthe \"startRecording\" call measured by your system's time. For example, if you call `encodeFrame`\n3 seconds after you start recording, that timestamp will be 3 seconds in the video.\n\nThis will also return the current duration of the video in MICROseconds (to match the internal timestamp of the frame).\n\n\n-------------------------------\n\nUsing without the Web Component\n===============================\n\nThe Web Component API mainly serves as a wrapper for the `canvasrecorder.js` class.\nMost of the API is the same with the exception of needing to pass the canvas where needed.\n\n`get isRecording`\n-----------------\nA getter which will return true or false to indicate if recording is in progress\n\n`get recordingDuration`\n-----------------\nA getter which will return the duration in milliseconds of your current recording\n\n`startRecording`\n----------------\nStart canvas recording. One required and two optional arguments are accepted:\n- canvas: The canvas element being recorded\n- timeBetweenKeyframes: if you want to change the default time in milliseconds (1000) between keyframes in the encoded video, you may set this here\n- config: a custom VideoEncoderConfig you may pass to override the default (specified below)\n\n`stopRecording`\n----------------\nStops recording the canvas. Accepts an optional string for a filename. If the filename is\nspecified, the file will automatically be saved as a download\n\n`saveFile`\n-----------\nAccepts a filename as a parameter and when calls, saves the file as a download\n\n`encode`\n--------\n- canvas: The canvas element being recorded at the time you wish to snapshot it\nRecordings occur in realtime, meaning the frame's timestamp will be relative to\nthe \"startRecording\" call measured by your system's time. For example, if you call `encode`\n3 seconds after you start recording, that timestamp will be 3 seconds in the video.\n\nThis will also return the current duration of the video in MICROseconds (to match the internal timestamp of the frame).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-components-in-space%2Frecordable-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-components-in-space%2Frecordable-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-components-in-space%2Frecordable-canvas/lists"}