Search code examples
javascriptnode.jsjsdom

window.CCapture is not a constructor in Node.js


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);
   
  };

Solution

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