Hello Observable community ,
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
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
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 @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
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:
Reproduced from an image:
I tried it on WebM test / Lionel Radisson / Observable and it seems I’m not getting space as well but it works with WebMWriter
OK found, the issue: I was trying to export video with quality of 1, reducing it to 0.99 make it work
Thanks for your leads !
OK, thanks for the workaround. It’s definitely a bug, it would be good to report it.