CODEWITHSUNDEEP
javascripthtml5-canvasmp4
Johan Sundman
Johan Sundman

Reputation: 175

HTML Canvas frames to mp4

Saving the content of an html canvas can be done by calling the element's toDataURL() method, this will save it as an png file encoded in base64. Would it be possible to somehow merge multiple of these base64 png images into a base64 mp4 video? It dosn't really have to be mp4, as long as it's a video.

Upvotes: 1

Views: 2359

Answers (2)

Woodii
Woodii

Reputation: 1

try this mp4-muxer

It's been too long since this question was asked, but hopefully it will help someone who needs it

demo

Let me update the answer: as of today in 2024, if there are still any crazy demands to decode raw H.264 frames, the VideoDecoder can now do that (codec = avc1.42001E). Here’s an article on Chrome's best practices that I hope will help you.

Upvotes: 0

BdR
BdR

Reputation: 3058

Good question, you could potentially use pixi.js or BabylonJS or something like that to create cool title sequences or data animations.

There's no build-in support for mpeg or mp4 output in HTML5 and JavaScript, as far as I know. However there is this library ccapture.js on github, though I haven't tried it yet. The description says that it doesn't render the ouput in realtime so this means you can even do more complex/cpu-heavy animations without skipped frames.

Upvotes: 1

Related Questions