I've been working on a Coronavirus video demo for Shotstack over the last week which we have released as an open source project on Github.
Using the daily feed of Coronavirus cases and deaths from Our World in Data you can generate a video for each country affected by the COVID-19 pandemic showing the increase in cases per day. It is quite a dramatic way to see the exponential growth of the virus.
Here is an example of a video generated for the United States from March 28th:
You can see a few more on our YouTube playlist.
How To Create Videos
The project is written in Node JS and is available on Github. The script has been set up as a cli tool to be run using npm (or Yarn) commands.
The first step is to checkout the repo from: (https://github.com/shotstack/coronavirus-data-video-demo).
The project is dependant on the Shotstack video editing API so a key is required. You can sign up for a free key via the web site at https://shotstack.io.
Follow the instructions in the readme file which will show you how to install dependencies, set up your .env file with your API key and the available commands.
The main commands are:
npm run dataset
This will download the latest CSV file from Our World In Data, who in turn source the data from the European Centre for Disease Prevention and Control (ECDC). The data is updated daily.
npm run list
This will display the list of countries with data available in the CSV file.
npm run generate -- --country 'United States'
Using the country of your choice, as displayed using the npm run list command you can queue a video for rendering by the API.
The script will poll the API every 5 seconds and after around 20 seconds a video URL will be returned which is the video file that can be downloaded or played in your browser.
How It Works
The Shotstack video editing API is a cloud based video editor that lets you automate the editing of videos using code. It uses JSON to specify how a video should be composed - how clips should be trimmed and sequenced along with the media type such as video, image, SVG, audio, text and even HTML.
The JSON edit specification is posted to the API which invokes a rendering engine that combines all the assets, saves the final video and returns the URL to an mp4 file. A Node SDK is also available which provides validated methods for the available features, authentication and API requests.
Using the fast-csv package the script first loops through the CSV file and groups the data by country.
The country data is then filtered based on the users selection and sent to a generateVideo method which loops through the data and every 2 frames (0.08 seconds) increments a counter with the number of cases, deaths and the date.
The data is passed to the Shotstack SDK to create frames and along with text, a background video and a soundtrack the edit is automatically composed.
Finally the complete edit JSON data is posted to the API to be rendered.
This process can be repeated for any country the user chooses and in theory all countries and data in CSV file could be automatically queued and rendered at once each day.
Open Source and Copyright
While the Coronavirus pandemic is a bleak situation I hope this is a useful demonstration of what our API is capable of. I am not sure how practical these videos are but I invite you to clone and experiment with the project (it is free to get started), get creative and hope you can build something that is more impactful.
The code is released under the MIT license and all assets used are CC0 which means they can be used anywhere without acknowledging the user or paying royalties or fees. You can of course use your own assets.
Building a GUI
Over the next few weeks we intend to build a front end web interface that would allow a user to create a video by choosing a country from a drop-down list. Please comment below if you think that would be useful or if you have a better idea.
Top comments (9)
I can see someone making a similar thing running
ffmpegas a video editing APIIndeed,
ffmpegis a core part of our stack working behind the scenes.i used to do this kind of thing in visual programming frameworks like Apple's Quartz Composer (which lives on as Facebook Origami in some ways, including some of the original QC engineers). interested to see how I can do easily in JS / Node.
Vuo 2 has a free basic version of Editor (macOS only so far) which I'll try and make this in and post in a few days for those who are a bit code shy like me.
Nice! but this platform shotstack.io is payed, you can make somethings similar unsing ffpmeg.
Yes you could make this with ffmpeg, we use ffmpeg in our backend as part of our system. Our platform makes it easier to work with and handles all scaling issues. The free account lets independent developers explore the platform and then you can pay if you have a commercial use case.
Nice one will create a video for it.it would be very helpful.
Please do, if you need any help give me a shout.
Sometime JavaScript surprises me
I am trying to incorporate this into our android app. Do you know of any devs who specialize in this and could help?