I'm trying to load CCapture in Node.js instead of having to run a headless browser to record canvas stream. I keep getting window.CCapture is not a constructor error.
CCapture Library Link - https://github.com/spite/ccapture.js
Here is my code
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM(`<!DOCTYPE html><body>
<script src='./node_modules/ccapture.js/build/CCapture.all.min.js'></script>
<canvas id="canvas" width="200" height="100"></canvas>
</body>`,
// We need these options to allow JSDOM to require CCapture from node_modules
{ runScripts: "dangerously", resources: "usable" });
const document = window.document;
window.onload = () => {
console.log("Onload >>>>>>");
const canvas = document.getElementById("canvas");
//const canvas = createCanvas(200, 200)
const ctx = canvas.getContext("2d");
var colors = ["red", "blue", "yellow", "orange", "black", "white", "green"];
function draw (){
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
draw();
var capturer = new window.CCapture( {
format: 'ffmpegserver',
framerate: 60,
verbose: true,
name: "foobar", // videos will be named foobar-#.mp4, untitled if not set.
extension: ".mp4", // extension for file. default = ".mp4"
codec: "mpeg4", // this is an valid ffmpeg codec "mpeg4", "libx264", "flv1", etc...
// if not set ffmpeg guesses based on extension.
} );
console.log("Capture>>>>>", capturer);
};
window.CCapture
returns undefined, which means the script wasn't loaded successfully.
That's because you can't import local scripts in such a way in JSDOM. One way to solve it is just to load the script via a CDN inside the JSDOM constructor argument instead of linking to a local file.