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.
View a React example of codeToVideo in action on the example site.
Install this package:
npm install --save @fullstackcraftllc/codevideo-frontendThis 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!
- Clone this repository:
git clone https://github.com/codevideo/codevideo-frontend.git- Install dependencies:
npm install- Run the tests:
npm test- Optionally, run the example site locally:
cd example
npm install
npm startDeploys 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.
This package can only be published when logged in as the @fullstackcraftllc user (really a note for Chris to himself more than anything).