Create video from images on the client side in Ionic

Ionic Framework ionic-v3
1

I have searched the forum as well as Google and have not found an obvious solution. I would like to take several images and combine them into a video. I found a way to create an animated GIF which is almost good enough but I would like to have the option of adding background music. I found a way to do this on the server side but it uses ffmpeg so it is not a pure JS solution. Aside from writing a special native plugin for iOS and Android to do this, does anyone have any thoughts or a library that I’m missing? I know I can generate the video on the server and transfer back to the client, but I would like to avoid the additional bandwidth if possible since that could add up over time with many users building videos on the server.

Any thoughts greatly appreciated.

2

I found
http://techslides.com/convert-images-to-video-with-javascript

But I would rather use a native plugin for that (speed) [if you can find one]

3

Have you had a look at: https://github.com/jbavari/cordova-plugin-video-editor

Or if you want a pure JavaScript solution: https://github.com/kripken/emscripten

4

Thanks for the suggestions. For now, I was unable to find a good, quick solution for the client side so I instead decided to implement a microservice to do this for me on the server for now. I was able to get a very nice solution using the server side approach and it didn’t suck up any more of my time. I will try to come back to it later but for now, with my current user volume, the server side solution will be just fine. For anyone interested, here is what I did:

  • Server is Node.js and takes a simple POST request with the info to build my “slideshow”.
  • Ionic app sends POST to server to build the slideshow.
  • The server returns an image back to the client to store in the user’s photos.

For the server that does all the work, it uses several NPM packages:

  • phantom - Headless HTML “browser” that processes my HTML that describes the slides. HTML made building the slides very easy and phantom.js handles CSS, Javascript, and anything else you want to throw at it. It has a render() method that takes the processed HTML page and renders it to a PNG file. You can specify the page dimensions so it makes a beautiful slide as a single PNG.
  • png-file-stream - This is used by phantom to render to a PNG.
  • gifencoder - This module takes the PNGs and combines them into a single animated GIF. The library allows you to specify the duration for each slide, image quality, loop count, etc.

So, with just a few lines of code (used the sample code from each module’s NPM page easily), I was able to process my HTML slides and render an animated GIF slideshow from them.

I tried this from Ionic, but the phantom module didn’t work and I didn’t have time to mess with it anymore so I’m going to go with the server solution for now.

2 Likes
5

Hi @myfitstatus, did you find any solution to create a video from the app itself?

6

No, I was never able to come up with a solution within the app so I ended up creating a server call where I sent the info to my server, the server built the video for me, the app then downloaded the video from the server, and then stored it on the mobile device. End result was the same but I had the server do the work.

7

I need slide video maker from image and soundtrack.
if you can help this problem, i can provide cost for your help.
thank.

8

Any solution here? I want to combine pairs of (image, audio clip) into a single video. Any thoughts? Thanks!