1

I have build html5 canvas which has several images and animation sliding effect on those images.

I am looking to export those whole animation as video

I have tried some solution which say to capture images as frame from canvas and then using some server software like ffemge create stream That create video file not as per requirement

Also i am looking to have it in browser itself but i have not found any solution which work in browser.

James Z
  • 12,209
  • 10
  • 24
  • 44
Pankaj Badukale
  • 1,991
  • 2
  • 18
  • 32

1 Answers1

1

You cannot go directly from a <canvas> element to a video format like .mp4.

The HTML5 <canvas> tag only has support for output of static image files, such as PNG, via the canvas.toDataURL() method or canvas.toBlob() method. The latter link has an example of saving the result to disk.

You would need to take the intermediate steps you mentioned to capture a sequence of still images as frames, and then use those to create the video file via (as you said) something like ffmpeg, or video editing software that allows you to create a file from an image sequence.

If this is a one-off situation and not something you need to repeat often, your easiest option is to use screen-capture software (Quicktime on Mac, something like Camtasia or some other option on Windows). Select only the canvas area to record only the part of the screen you want, trim the start/end points as necessary, and save the result as whatever video format you need.

Alternatively, take screenshots or export the necessary frames as PNGs and redo the transitions in iMovie or something. HTML isn't generally the right tool for video editing.

mc01
  • 3,750
  • 19
  • 24