codevideo-frontend

The frontend engine used to create videos on 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.

Get Started

Install this package:

npm install --save @fullstackcraftllc/codevideo-frontend

This will also install the required dependency @fullstackcraftllc/codevideo-core

Given the following HTML / JSX markup:

<canvas id="canvas" />

Import and call codeToVideo:

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:

git clone https://github.com/codevideo/codevideo-frontend.git

2. Install dependencies:

npm install

3. Run the tests:

npm test

4. Optionally, run the example site locally:

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).