How to record a canvas to video
You can use HTML canvas
to produce videos!
The following function,
given a canvas and a video length in milliseconds,
serves a video.webm
to the viewer for download:
function recordCanvas(canvas, videoLength) {
const recordedChunks = [];
const mediaRecorder = new MediaRecorder(
canvas.captureStream(25), {mimeType: 'video/webm; codecs=vp9'});
mediaRecorder.ondataavailable =
event => recordedChunks.push(event.data);
mediaRecorder.onstop = () => {
const url = URL.createObjectURL(
new Blob(recordedChunks, {type: "video/webm"}));
const anchor = document.createElement("a");
anchor.href = url;
anchor.download = "video.webm";
anchor.click();
window.URL.revokeObjectURL(url);
}
mediaRecorder.start();
window.setTimeout(() => {mediaRecorder.stop();}, 3000);
}
Here’s an example of usage. I’ve set up the following canvas to show a silly animation of a square wandering around the canvas at random. To record a 3-second snippet of the canvas and download it as a video, click here: .
I just released Vidrio,
a free app for macOS and Windows to make your screen-sharing awesomely holographic.
Vidrio shows your webcam video on your screen, just like a mirror.
Then you just share or record your screen with Zoom, QuickTime, or any other app.
Vidrio makes your presentations effortlessly engaging, showing your gestures, gazes, and expressions.
#1 on Product Hunt.
Available for macOS and Windows.
With Vidrio
With generic competitor
More by Jim
- Your syntax highlighter is wrong
- Granddad died today
- The Three Ts of Time, Thought and Typing: measuring cost on the web
- I hate telephones
- The sorry state of OpenSSL usability
- The dots do matter: how to scam a Gmail user
- My parents are Flat-Earthers
- How Hacker News stays interesting
- Project C-43: the lost origins of asymmetric crypto
- The hacker hype cycle
- The inception bar: a new phishing method
- Time is running out to catch COVID-19
- A probabilistic pub quiz for nerds
- Smear phishing: a new Android vulnerability
Tagged #programming, #web. All content copyright James Fisher 2020. This post is not associated with my employer. Found an error? Edit this page.