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.
jsdom can't resolve local paths..either use cdn or load the script inline by reading the file contents and then adding it to the dom via document.createElement
Sample:
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const fs = require("fs");
const script = fs.readFileSync("./node_modules/ccapture.js/build/CCapture.all.min.js", {
encoding: "utf8",
flag: "r",
});
const { window } = new JSDOM(
`<!DOCTYPE html>
<body>
</body>`,
{
runScripts: "dangerously",
resources: "usable",
}
);
var document = window.document;
var scriptEl = document.createElement("script");
scriptEl.textContent = script;
document.head.appendChild(scriptEl);
window.onload = () => {
console.log(window.CCapture);
};