4

I have a whiteboard/hand sketching app written with D3.js svg path elements. These elements are grouped into scenes with their own mp3 audio.

Multiple scenes with their animated svg paths are played according to a timeline, with the audio running perfectly.

So the end result is like a whiteboard animated movie. This works well within the app. How can i record the whole animation as a mp4 file?

I would like to run this entirely on the client side. I have looked at ffmpeg but prefer not to do a desktop install for this web app.

I looked into using chrome tab extension but it only works on chrome browser.

What other options do I have?

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
Jin Ng
  • 146
  • 5
  • Are you asking how *you* can do it or are you looking for a *general* solution that will work for everybody in every browser without installing any additional software? The latter won't work. – Lars Kotthoff Aug 08 '15 at 20:58
  • I'm happy for any ideas in general. This is a HTML5 app but it requires a solution that will work on Windows and Mac. I have got the recording working with tab extension but it is a bit tedious and will only work with Chrome and Firefox browsers. I have also looked at FFMPEG port to JS but thats not too stable yet. Anyone have any experience with the FFMPEG port to JS? – Jin Ng Aug 08 '15 at 21:23
  • This seems the most promising to date.. Anyone have experience with this? https://github.com/muaz-khan/WebRTC-Experiment/tree/master/ffmpeg – Jin Ng Aug 08 '15 at 21:29
  • Any update on your process Jin? I'm trying to do something very similar. I have some pretty neat D3 path animations and now I want to move these over to After Effects for further editing. I am trying to find out the smoothest workflow here. At the moment I just run a screen capturing app but that's too fiddly/resource heavy and leaves too much room for human error (ie - having to draw a selection box each time I want to record). – rlsaj Sep 11 '15 at 06:55
  • Hi Risaj, sorry nothing yet. Been busy with other stuff. Have you looked at the FFMPEG port to JS?. Please keep me posted too. Thanks – Jin Ng Sep 13 '15 at 02:43
  • @JinNg Did you ever find a solution? I just posted: https://stackoverflow.com/questions/59726775/capturing-data-stream-of-a-js-leaflet-animation-as-mp4 – zadrozny Jan 14 '20 at 03:01

0 Answers0