Correct package for npm

[spite]

Open for the taking! Someone that uses npm and wants to fix the package to work correctly.

[aceslowman]

https://github.com/aceslowman/ccapture.js/tree/npm-fix

By adding the appropriate requires and exports, I've managed to get PNG and JPG output in NPM, but still struggling to get gif.js to play well. The main issue is in pointing it to the correct file for the workerPath. From what I can imagine, it would be nice if gif.js was requiring the gif.worker.js instead of having to specify a path to it...

Does anyone have an idea of how that could be accomplished? Getting the correct gif.worker.js file included in gif.js?

[spite]

gif.js accepts workerScript as a parameter, to be able to load the worker script. I chose to expose that option to CCapture so people could put it wherever they wanted, and provide the script in the src folder of the module. But that doesn't work well with bundlers, and it's pretty crummy.

So I see three possiblities:

• as @aceslowman says, figuring out if gif.js can be bundled with its own worker script. This might be possible by altering gif.js to inline the JavaScript
• finding out how other libraries handle main modules and worker dependencies
• ditching gif.js and getting a WebAsm version that doesn't take ages to render GIFs, and include worker support from the start (the one I like the most, but it might take a while to build)

[fhayes301]

Is this still active? I'm running into a similar error with NPM usage.

Specifically, here's my error.

Are there any workarounds for this?

I'm trying to record an animated canvas with React.js (format: webm) and keep running into this error.

I've tried to add the script tags but am having trouble calling the necessary functions to make this run correctly.

[aceslowman]

I have it working with npm here:

https://github.com/aceslowman/ccapture.js/tree/npm-fix

I have a working npm fix up on my forked repo. I haven't been able to get it working again for the non-npm build (nor have I tested webm...), so I haven't submitted a pull request. The main thing was that CCapture.js isn't requiring tar.js, download.js, or gif.js, and those individual files in turn don't have the export set up.

[fhayes301]

@aceslowman Cool. I'd be curious to try your fix in my project - Do you know if there's a way to import your version directly into my react.js project?

[aceslowman]

Yeah! You can just call npm install --save aceslowman/ccapture.js#npm-fix. I hope to find some free time soon to tidy it up and test for non-npm use.

[spite]

CCapture.[min].js doesn't require or import scripts, it assumes they're loaded as regular scripts. This library is not designed to be used as a module, that's the point of this issue.
CCapture.all.min.js does include everything, except the worker script for gif.js.

That being said, I have no idea why webpack can't find BlobBuffer or ArrayBufferDataStream.

[spite]

Actually, it's because of this https://github.com/thenickdude/webm-writer-js/blob/master/src/WebMWriter.js#L659

So may be a solution is not using CCapture.all.min.js, and instead load each individual file, and import https://www.npmjs.com/package/webm-writer

[thomasaull]

I tried this:

import 'webm-writer'
import CCapture from '@/../node_modules/ccapture.js/src/CCapture.js'
import download from '@/../node_modules/ccapture.js/src/download.js' // eslint-disable-line
import '@/../node_modules/ccapture.js/src/gif.js'
import '@/../node_modules/ccapture.js/src/gif.worker.js'
import '@/../node_modules/ccapture.js/src/tar.js'
import '@/../node_modules/ccapture.js/src/Whammy.js'

But as soon as I finish a recording it says:
CCapture.js?7938:923 Uncaught ReferenceError: download is not defined

[bichotll]

For the record. I installed the package locally using git and called CCapture.all.min.js from "vendor".

I as well had problems using webpack and I just decided to take the easiest path 👍

[kingpalethe]

I've posted a bounty for getting CCapture fully working as an NPM package: https://www.bountysource.com/issues/56644632-correct-package-for-npm

[Unsigno]

Hi all, the issue is require and use CCapture as NPM package, but not to be working in a node enviroment ( out of the browser ) , right ?

Some dependences has their own NPM package, do you want to remove the files and keep the references or save your own copy?

Is prefered a conditional usage of module.exports or explicit ( using webpack or similar to prebuild the files ) ?

[Unsigno]

@kingpalethe, I sent a PR #89 and waiting for feedback :)

[throne1986]

when irun my app i get the following error
test.js:67 Uncaught ReferenceError: CCapture is not defined,

here is test,js

`(function() {
"use strict";

var framesPerSecond = 60;
var numFrames = 20; //framesPerSecond * 60 * 2;
var thickness = 100;
var speed = 4;
var frameNum = 0;

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
canvas.width = 1280;
canvas.height = 720;

var progressElem = document.getElementById("progress");
var progressNode = document.createTextNode("");
progressElem.appendChild(progressNode);

function onProgress(progress) {
progressNode.nodeValue = (progress * 100).toFixed(1) + "%";
}

function showVideoLink(url, size) {
size = size ? (" [size: " + (size / 1024 / 1024).toFixed(1) + "meg]") : " [unknown size]";
var a = document.createElement("a");
a.href = url;
var filename = url;
var slashNdx = filename.lastIndexOf("/");
if (slashNdx >= 0) {
filename = filename.substr(slashNdx + 1);
}
a.download = filename;
a.appendChild(document.createTextNode(url + size));
document.body.appendChild(a);
}

var capturer = new CCapture( {
format: 'ffmpegserver',
//workersPath: "3rdparty/",
//format: 'gif',
verbose: false,
framerate: framesPerSecond,
onProgress: onProgress,
//extension: ".mp4",
//codec: "libx264",
} );
capturer.start();

function drawLines(ctx) {
for (var xx = -canvas.width; xx < canvas.width; xx += 2) {
var l = (xx - (-canvas.width)) / (canvas.width * 2);
ctx.beginPath();
ctx.moveTo(xx, -canvas.height);
ctx.lineTo(xx, canvas.height);
ctx.strokeStyle = "hsla(" + ((l * 360 * 24) % 360) + ",100%,50%,0.5)";
ctx.stroke();
}
}

function render(time) {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#FFF";
for (var xx = 0; xx < canvas.width + thickness * 2; xx += thickness * 2) {
  var x = xx - (frameNum * speed % (thickness * 2));
  ctx.fillRect(x, 0, thickness, canvas.height);
}

ctx.save();
ctx.globalCompositeOperation = "difference";

ctx.font = "400px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(frameNum, canvas.width / 2, canvas.height / 2);


ctx.save();
ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
ctx.rotate(frameNum * 0.01);
ctx.translate(canvas.width * 0.25, 0);
drawLines(ctx);
ctx.restore();

ctx.save();
ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
ctx.rotate(frameNum * -0.013);
ctx.translate(canvas.width * 0.37, 0);
drawLines(ctx);
ctx.restore();

ctx.restore();

capturer.capture(canvas);

++frameNum;
if (frameNum === numFrames) {
  capturer.stop();
  capturer.save(showVideoLink);
} else {
  requestAnimationFrame(render);
}

}
requestAnimationFrame(render);
}());

`
what am i doing wrong?

[Unsigno]

Sorry I miss a important point, I was working on Windows and i don't build the standalone file.

So if you are using a node enviroment you need to change the main property in package.json to src/CCapture.js. If you are testing on a browser require all files separately. This fixes are just for testing prupose, you can build the standalgone file using the utils/build.sh script if you are on Linux. I will do it later and update the PR.

[Unsigno]

In the last commit, I included the builded files, should be all good now.

[Unsigno]

Still some one in this issue ??

If there are some bug or you want a full rework as NPM package ( merging modules as dependencies and replacing the build script ) just let me know.

[bichotll]

Seems like the author of the package is not active anymore? :(

[ggcaponetto]

any update on this?

[Unsigno]

I still waiting feedback from @spite with no luck.

[rickithadi]

any updates?

[balumuriraj]

any update on this?

[jonxuxu]

any updates? gonna start an annual tradition here

[Rolands-Laucis]

In the repo there is a file called "download.js" in /src . Downloaded ccapture.js , download.js , webm-writer-0.2.0.js and linked them in the html file. That fixed the error and i was able to download the recording with the .save() function. On Chrome.

[amandaghassaei]

I made some additional changes to the npm-fix branch in my own fork and was able to get it to work (tested in the browser, not node): amandaghassaei@7ada419

I wrote a small wrapper around ccapture to make it easier to bind to hotkeys and take care of any extra weirdness around importing with npm:
https://github.com/amandaghassaei/canvas-capture
this has been working for me for pngs, jpg, gif, and webm.

you can import into your project with npm install canvas-capture

[robertmassman]

Hi Amanda, I was trying to follow your examples for installing 'canvas-capture' but I seem to be running into the NPM issue you mentioned. I received an error message when trying to install with npm prompting me to a log file.

1 info using npm@8.1.0
2 info using node@v16.13.0
...
29 verbose shrinkwrap failed to load node_modules/.package-lock.json out of date, updated: node_modules
...
32 verbose stack Error: An unknown git error occurred
...
38 error code 1
39 error An unknown git error occurred
40 error command git --no-replace-objects ls-remote ssh://git@github.com/amandaghassaei/canvas-capture.git
41 error xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
42 verbose exit 1

Does the above help identify something that is wrong on my side?
Should I be using YARN?

[robertmassman]

Hi Amanda, I was trying to follow your examples for installing 'canvas-capture' but I seem to be running into the NPM issue you mentioned. I received an error message when trying to install with npm prompting me to a log file.

1 info using npm@8.1.0
2 info using node@v16.13.0
...
29 verbose shrinkwrap failed to load node_modules/.package-lock.json out of date, updated: node_modules
...
32 verbose stack Error: An unknown git error occurred
...
38 error code 1
39 error An unknown git error occurred
40 error command git --no-replace-objects ls-remote ssh://git@github.com/amandaghassaei/canvas-capture.git
41 error xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
42 verbose exit 1

Does the above help identify something that is wrong on my side? Should I be using YARN?

Attempting other install ideas. I received a console message giving me a hint that I could install from a folder. So I downloaded a copy of your code and then typed npm install followed by the path to the downloaded folder. that worked. Probably not the best way to do this but it worked. Probably I could have just copied the folder to my projects node folder and then just updated my package.json file

[amandaghassaei]

@robertmassman I just put the package on npm, try: npm install canvas-capture

[chazthetic]

Yeah! You can just call npm install --save aceslowman/ccapture.js#npm-fix. I hope to find some free time soon to tidy it up and test for non-npm use.

This worked for me, thank you. Getting a different error now that CCapture is not a constructor, but at least making progress

[joerenz-andicoy]

Yeah! You can just call npm install --save aceslowman/ccapture.js#npm-fix. I hope to find some free time soon to tidy it up and test for non-npm use.

This worked for me, thank you. Getting a different error now that CCapture is not a constructor, but at least making progress

this didn't work for me

how should I fix it or make it work?