{"id":26660618,"url":"https://github.com/codevideo/codevideo-frontend","last_synced_at":"2025-04-11T16:13:21.732Z","repository":{"id":64963779,"uuid":"578632939","full_name":"codevideo/codevideo-frontend","owner":"codevideo","description":"The frontend engine to create videos on codevideo.io","archived":false,"fork":false,"pushed_at":"2025-02-22T15:47:39.000Z","size":8861,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T07:16:02.386Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/codevideo.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":"2022-12-15T14:15:08.000Z","updated_at":"2025-03-18T11:27:50.000Z","dependencies_parsed_at":"2024-02-27T23:24:59.630Z","dependency_job_id":"805032ca-1273-4ae4-a2ad-6df59382884f","html_url":"https://github.com/codevideo/codevideo-frontend","commit_stats":{"total_commits":73,"total_committers":2,"mean_commits":36.5,"dds":0.4794520547945206,"last_synced_commit":"2ca3f7e7de3b2d01b73e2bfae8670ffc1bb30708"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codevideo","download_url":"https://codeload.github.com/codevideo/codevideo-frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248438513,"owners_count":21103410,"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":"2025-03-25T12:18:48.367Z","updated_at":"2025-04-11T16:13:21.712Z","avatar_url":"https://github.com/codevideo.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# codevideo-frontend\n\n\u003cimg src=\"https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-frontend\"/\u003e \u003cimg src=\"https://img.shields.io/codecov/c/github/codevideo/codevideo-frontend\"/\u003e\n\nThe frontend engine used to create videos on [https://codevideo.io](https://codevideo.io)\n\n**_This package is about as unstable as you can get. Consider it even below alpha status. It is brand new and under considerable development._**\n\n## GitHub Pages Example\n\nView a React example of `codeToVideo` in action [on the example site](https://codevideo.github.io/codevideo-frontend).\n\n## Get Started\n\nInstall this package:\n\n```shell\nnpm install --save @fullstackcraftllc/codevideo-frontend\n```\n\nThis will also install the required dependency @fullstackcraftllc/codevideo-core\n\nGiven the following HTML / JSX markup:\n\n```html\n\u003ccanvas id=\"canvas\" /\u003e\n```\n\nImport and call `codeToVideo`:\n\n```ts\nimport { codeToVideo, MimicTypos } from \"@fullstackcraftllc/codevideo-frontend\";\n\n// define video parameters\nconst fps = 60;\nconst mimeType = \"video/webm\";\nconst codec = \"codecs=vp9\";\n\n// get canvas and setup media recorder\nconst canvas = document.getElementById(\"canvas\") as HTMLCanvasElement;\n\nconst { videoUrl, error } = await codeToVideo(\n  canvas,\n  fps,\n  mimeType,\n  codec,\n  1920,\n  1080,\n  \"print('hello world!')\",\n  \"python\",\n  [\"red\", \"blue\"],\n  MimicTypos.NEVER\n);\nif (error) {\n  // handle error\n  console.error(error);\n}\n// No error, so we can do something with videoUrl.\n\n// In this example, create a video element, set its source, and append it to a container\n\n// Create the video element\nconst video = document.createElement(\"video\");\n\n// Set the video's src attribute to the URL of a video file\nvideo.src = videoUrl;\n\n// Set other useful attributes\nvideo.id = \"video\";\nvideo.height = 960;\nvideo.width = 540;\nvideo.controls = true;\nvideo.autoplay = true;\n\n// Append the video element to the container div\nconst container = document.getElementById(\"container\");\nif (container) {\n  container.appendChild(video);\n}\n```\n\nThe canvas doesn't even have to be visible on the page. It can be off-screen or in a hidden div.\n\nHappy video making!\n\n## For Developers\n\n1. Clone this repository:\n\n```bash\ngit clone https://github.com/codevideo/codevideo-frontend.git\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Run the tests:\n\n```bash\nnpm test\n```\n\n4. Optionally, run the example site locally:\n\n```bash\ncd example\nnpm install\nnpm start\n```\n\n## Deploys\n\nDeploys are run with Circle CI. Merging to the `main` branch will trigger first tests and code coverage, then packaging. If this all works, this triggers a merge from `main` to `release`, where it is finally published to the `release` branch. You can see all these CI/CD processes in `.circleci/config.yml` directory.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodevideo%2Fcodevideo-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodevideo%2Fcodevideo-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodevideo%2Fcodevideo-frontend/lists"}