[CLOSED] Struggling with webm export

Community Help
1

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.

Thanks

1 Like
2

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

edit: oups, that’s what you already tried

3

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

4

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:

5

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.

6

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

7

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
8

Thanks ! :pray:

9

Reproduced from an image:

1 Like
10

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:

11

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
12

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

1 Like
13

Issue reported :white_check_mark:

1 Like
14

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

1 Like