codevideo-frontend

The frontend engine used to create videos on https://codevideo.io

GitHub Pages Example

View a React example of codeToVideo in action on the example site.

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.

Publishing

This package can only be published when logged in as the @fullstackcraftllc user (really a note for Chris to himself more than anything).