Creating Video or GIF or time lapse from an array of image URLs

Question

I have got a list of image url form an api endpoint, and i wish to generate a video with these images in javascript.

after the video is created i'd display it on the page, im using react btw.


images = [

    "https://some-bucket.s3.amazonaws.com/demo/0173.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0126.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0160.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0184.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0177.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0166.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0174.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0167.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0187.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0197.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0190.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0192.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0189.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0188.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0182.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0198.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0196.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0163.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0117.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0199.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0191.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0148.jpg",
    "https://some-bucket.s3.amazonaws.com/demo/0132.jpg"
    
]

There's quite a few ways of converting a list of images to a gif on github. If you just want to show it 'like a video' using JS just step through them showing one after the other, perhaps fading between them - depends on what the images are. — A Haworth, Feb 21 '21 at 17:53
Maybe [this](https://stackoverflow.com/questions/28717016/html5-generating-video-from-images) can help you — Doan Van Thang, Feb 21 '21 at 18:49
@AHaworth i tried using that but there is a lot of flashing, because there is a loading time in between switching pictures — Divyansh Khandelwal, Feb 23 '21 at 05:50
Are you waiting for the window onload event before starting. — A Haworth, Feb 23 '21 at 09:01
If your page depends on images (or anything else that is bulky) to be loaded then it is usual to get it to wait for that stuff to be loaded. Lookup for example the window onload event. — A Haworth, Feb 24 '21 at 14:15

MSSNG · Answer 1 · 2021-02-23T15:26:20.590

I think what you might be looking for is the Transloadit /video/merge robot. For example, this template here will take all of the files uploaded and then convert them into an animated gif in order to be exported to an Amazon S3 bucket.

    {
      "steps": {
        ":original": {
          "robot": "/upload/handle"
        },
        "animated": {
          "robot": "/video/merge",
          "use": {
            "steps": [
              {
                "name": ":original",
                "as": "image"
              }
            ]
          },
          "result": true,
          "duration": 7.8,
          "framerate": "10",
          "ffmpeg_stack": "v4.3.1",
          "ffmpeg": {
            "f": "gif",
            "pix_fmt": "rgb24"
          },
          "resize_strategy": "pad"
        },
        "exported": {
          "use": [
            ":original",
            "animated"
          ],
          "robot": "/s3/store",
          "credentials": "YOUR_AWS_CREDENTIALS",
          "url_prefix": "https://demos.transloadit.com/"
        }
      }
    }

While, transloadit doesn't have native react integration, it can be used through uppy's robodog service. Here's a small React snippet that will take an array of files, run it through a specified template, and then output an array of results, using the template from before.

    import Uppy from '@uppy/core'
    import { Dashboard } from '@uppy/react'
    import { Transloadit } from '@uppy/transloadit'
    import '@uppy/core/dist/style.css'
    import '@uppy/dashboard/dist/style.css'
    const url_list = ["www.link1.com/image.png", "www.link2.com/image.png", "www.link3.com/image.png"]
    const uppy = new Uppy()
        .use(Transloadit, {
            params: {
          "auth": {
            "key": "YOUR_TRANSLOADIT_AUTH_KEY"
          }
          "steps": {
            "imported": {
              "robot": "/http/import",
              "url": url_list
            },
            "animated": {
              "robot": "/video/merge",
              "use": {
                "steps": [
                  {
                    "name": "imported",
                    "as": "image"
                  }
                ]
              },
              "result": true,
              "duration": 7.8,
              "framerate": "10",
              "ffmpeg_stack": "v4.3.1",
              "ffmpeg": {
                "f": "gif",
                "pix_fmt": "rgb24"
              },
              "resize_strategy": "pad"
            },
            "exported": {
              "use": [
                "imported",
                "animated"
              ],
              "robot": "/s3/store",
              "credentials": "YOUR_AWS_CREDENTIALS",
              "url_prefix": "https://demos.transloadit.com/"
            }
          }
        }
      });
    uppy.on("complete", (result) => {
        console.log("Upload complete! We've uploaded these files: ", result.successful)
    })
    export default function Home() {
      return (
        <div className="container">
          <Dashboard
            uppy={uppy}
          />    
        </div>
      )
    }

Creating Video or GIF or time lapse from an array of image URLs

1 Answers1