Error installing and using in our App

[GoChartingAdmin]

Hi,

When I try the gif format, I get an error:

1. After cature.save(), I get below error:

Uncaught Error: Width and height must be set prior to rendering

When trying webWriter, I get the below errors/issues

1. After capture.start(), I use a setTimeout for 3 seconds before capture.stop() and capture.save(). The setTimeout never gets fired because of the internal clearTimeout in capture.start()

2. Even when I try to stop recording using a button onClick, I get following error when I capture.save()

WebMWriter.js:230 Uncaught TypeError: Cannot read property 'dataOffset' of undefined
    at fileOffsetToSegmentRelative (WebMWriter.js:230)
    at writeCues (WebMWriter.js:500)
    at Object.complete (WebMWriter.js:642)
    at CCWebMEncoder.webpackJsonp.2150.CCWebMEncoder.save (CCapture.js:2

This is caused by the below lines

            function fileOffsetToSegmentRelative(fileOffset) {
                return fileOffset - ebmlSegment.dataOffset;
            }

PS: I am using webm-writer NPM package
import WebMWriter from "webm-writer";

[umeshpatadiya]

I'm also getting same issue, I'm trying to capture video from the canvas.

[acedigibits]

i am also getting the same error. any help on this?

[datermine]

FYI - I kind of solved this (though I'm now having a host of other issues).

My issue was that I assumed CCapture.all[.min].js included all the javascript. It doesn't include the WebM writer (and probably doesn't include other things).

Previously I was just doing:
<script src="CCapture.all.min.js"></script>

...but now I do:

<script src="./node_modules/ccapture.js/src/CCapture.js"></script>
<!-- Include WebM Writer if you want to export WebM -->
<script src="./node_modules/ccapture.js/src/webm-writer-0.2.0.js"></script>
<!-- Include gifjs if you want to export GIF -->
<script src="./node_modules/ccapture.js/src/gif.js"></script>
<!-- Include tar.js if you want to export PNG or JPEG -->
<script src="./node_modules/ccapture.js/src/tar.js"></script>
<!-- Include download.js for easier file download -->
<script src="./node_modules/ccapture.js/src/download.js"></script>

Hope that helps.

Also, maintainers - thank you for making this library, but the documentation is lacking. I think at the very least, the explanation of the various settings needs to be improved. Tell me what kind of data type is required! And what the range of values is!

[deadlocked247]

Still getting this problem when trying to record webm format
It seems like no frames are being saved to export

Uncaught (in promise) TypeError: Cannot read property 'dataOffset' of undefined
    at a (CCapture.js:1)
    at p (CCapture.js:1)
    at Object.complete (CCapture.js:1)
    at s.save (CCapture.js:2)
    at Object.v [as save] (CCapture.js:1)
    at index.js:441

Even with the individual source files loaded separately. I'm using three.js to create the canvas scene.
If anyone has a solution, it would be greatly appreciated!

[datermine]

@deadlocked247 did you see my post? Are you explicitly including the webm writer (and all the other scripts)?

[deadlocked247]

@datermine yea I did, and I added all the scripts but I get the same problem on save.
Are you using three.js as well?
Here is the error

webm-writer-0.2.0.js:664 Uncaught TypeError: Cannot read property 'dataOffset' of undefined
    at fileOffsetToSegmentRelative (webm-writer-0.2.0.js:664)
    at writeCues (webm-writer-0.2.0.js:934)
    at Object.complete (webm-writer-0.2.0.js:1076)
    at CCWebMEncoder.save (CCapture.js:334)
    at Object._save [as save] (CCapture.js:927)

Edit: Figured out my issue, was not related to this at all. Thank you!

[datermine]

Actually, I just decided to write a canvas recorder of my own using MediaSource/MediaRecorder. Found some open source code and made some slight modifications.

This is my CanvasRecorder.js file: https://pastebin.com/raw/U7kwaV5S

...which produced this kind of thing in conjunction with some canvas drawing stuff: https://presentio.us/view/18b3ba

Unfortunately MediaSource/MediaRecorder support for the iPad is non-existent, so I'm back to the drawing board looking at ffmpegserver.js

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder#Browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#Browser_compatibility

[Gurey]

I had the same problem. After two hours a realized that i never used capture.start() ... yey me!

[smaginant]

for me capture.start() breaked all animations inside setup functions in my p5.js sketch

png worked fine when I started to record from chrome console but webm didn't want to get rid of this error even without capture.start() outside setup() callback

I ended up in this blogpost that use media record and no libraries at all to record canvas element. Maybe it will save time for someone

https://medium.com/@amatewasu/how-to-record-a-canvas-element-d4d0826d3591

p.s. another strange thing that it worked well on file:// link but didn't work on localhost server

[EliasHasle]

I had the same problem.

From the documentation:

requestAnimationFrame, setTimeout, etc. won't work as expected after capture is started. Make sure your animation loop is running

This worked for me:

//Init:
var capturer = new CCapture(parameters);
var running = false;
requestAnimationFrame(animate);

function animate() {
    if (!running) {
        capturer.start();
        running = true;
    }

    renderEverything();
    requestAnimationFrame(animate);
    capturer.capture(canvas);
}

Similarly, I have a termination check within animate.

[rajashekhargithubb]

Thanks for saving my time. Yes not calling start will make this error.