https://github.com/codevideo/codevideo-frontend
The frontend engine to create videos on codevideo.io
https://github.com/codevideo/codevideo-frontend
Last synced: about 1 year ago
JSON representation
The frontend engine to create videos on codevideo.io
- Host: GitHub
- URL: https://github.com/codevideo/codevideo-frontend
- Owner: codevideo
- Created: 2022-12-15T14:15:08.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-22T15:47:39.000Z (over 1 year ago)
- Last Synced: 2025-04-01T07:16:02.386Z (about 1 year ago)
- Language: HTML
- Size: 8.45 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# codevideo-frontend
The frontend engine used to create videos on [https://codevideo.io](https://codevideo.io)
**_This package is about as unstable as you can get. Consider it even below alpha status. It is brand new and under considerable development._**
## GitHub Pages Example
View a React example of `codeToVideo` in action [on the example site](https://codevideo.github.io/codevideo-frontend).
## Get Started
Install this package:
```shell
npm install --save @fullstackcraftllc/codevideo-frontend
```
This will also install the required dependency @fullstackcraftllc/codevideo-core
Given the following HTML / JSX markup:
```html
```
Import and call `codeToVideo`:
```ts
import { codeToVideo, MimicTypos } from "@fullstackcraftllc/codevideo-frontend";
// define video parameters
const fps = 60;
const mimeType = "video/webm";
const codec = "codecs=vp9";
// get canvas and setup media recorder
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const { videoUrl, error } = await codeToVideo(
canvas,
fps,
mimeType,
codec,
1920,
1080,
"print('hello world!')",
"python",
["red", "blue"],
MimicTypos.NEVER
);
if (error) {
// handle error
console.error(error);
}
// No error, so we can do something with videoUrl.
// In this example, create a video element, set its source, and append it to a container
// Create the video element
const video = document.createElement("video");
// Set the video's src attribute to the URL of a video file
video.src = videoUrl;
// Set other useful attributes
video.id = "video";
video.height = 960;
video.width = 540;
video.controls = true;
video.autoplay = true;
// Append the video element to the container div
const container = document.getElementById("container");
if (container) {
container.appendChild(video);
}
```
The canvas doesn't even have to be visible on the page. It can be off-screen or in a hidden div.
Happy video making!
## For Developers
1. Clone this repository:
```bash
git clone https://github.com/codevideo/codevideo-frontend.git
```
2. Install dependencies:
```bash
npm install
```
3. Run the tests:
```bash
npm test
```
4. Optionally, run the example site locally:
```bash
cd example
npm install
npm start
```
## Deploys
Deploys 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.