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 👍