[CLOSED] Struggling with webm export

Hello Observable community :wave:,

While I’ve been using Observable for a few months doing graphics and tools, this is my first post here, therefore I’m limited to 2 links so I rewrote this message with all links in the concerned notebook:

I recently started a new tool called Beesandbombs utility to export looping gifs from p5js using gif.js based on gif artist Dave White’s template. And it works pretty well :upside_down_face:
untitled (16)

BUT, and that’s why I’m here, I’d like to add support for webm export using webm-writer-js to improve quality of exports.
I did a quick and successfull proof of concept to export p5js sketches in webm format that can be consulted here: WebM test / Lionel Radisson / Observable
But am now desperately struggling to implement it successfully within my tool :confused:

I already took a look at MediaRecorder API, or canvasRecorder by @mourner but these are not suitable since dependant on the framerate while the rendering can be really slow for some sketches.
I also tried CCapture, but it does not seem to work correctly with p5js in Observable.
Not sure if domcap by @zzzev would work…

Well, I’m trying but would really appreciate some help.


1 Like

You might try WebMWriter. See https://observablehq.com/@severo/load-process-and-export-video.

edit: oups, that’s what you already tried

The error occurs here: https://github.com/thenickdude/webm-writer-js/blob/7945d3c6ce1b77ac50daabae50d39677d20daf32/src/WebMWriter.js#L77, since there is no space after VP8 in the generated binary, as shown in the screenshot

Capture d’écran de 2020-05-14 11-16-01

I imagine you would have more luck asking here: https://github.com/thenickdude/webm-writer-js/issues

Thanks @severo for your quick answer !
Was not sure if this was related to WebMWriter since it is working on WebM test / Lionel Radisson / Observable but not in Observable. Thought this was related to the way the canvas object is manipulated in my tool :neutral_face:

You’re right, it also works in https://observablehq.com/@severo/load-process-and-export-video. Something particular in your canvas is leading to the error, but I imagine the problem should be managed at WebMWriter’s level and that it should accept any canvas as an input.

Thanks, will create an issue on WebMWriter’s repo.
Could you tell me how you looked at the generated binary ?

Applying the WebMWriter’s code in the developer’s tools console:

window.atob(sketch.canvas.toDataURL('image/webp', 1).substring("data:image\/webp;base64,".length))
1 Like

Thanks ! :pray:

Reproduced from an image:

1 Like

I tried it on WebM test / Lionel Radisson / Observable and it seems I’m not getting space as well but it works with WebMWriter :thinking:

OK found, the issue: I was trying to export video with quality of 1, reducing it to 0.99 make it work :tada:
Thanks for your leads !

1 Like

OK, thanks for the workaround. It’s definitely a bug, it would be good to report it.

1 Like

Issue reported :white_check_mark:

1 Like

and fixed upstream in webm-writer v0.2.5 with https://github.com/thenickdude/webm-writer-js/commit/9a605cb214582bd5a5e20163ca4c057e52a80834

1 Like