The story behind the Idea
It was always fascinating for me how the two journalists had came with the idea of Liveuamap.com. For everyone who doesn’t what it’s. “Liveuamap is opendata-driven media platform that change the way you receive latest news. Explore a map, messages, pictures and videos from the conflict zones.”
I wanted to make a motion video which can show the spread of power on the ground in Syria and Iraq. The website has given colors to each fraction on the ground, for example the Kurds are yellow, Free Syrian Army (FSA) is green, ISIS black, and Assad, Iraqi gov, the Russian and the Iranians are red.
I have started to search on the internet which is the best method to that. I could make a screenshot for each date and then collect all the screenshot manually to make a video, but that is crazy to do. The website has events from 2015 till today.
I was assured that there exists a way to automate that. After a small research on google I came across the term of “Headless browser”.
Headless browser is “a web browser without a graphical user interface, controlled programmatically. Used for automation, testing, and other purposes.”source
Here a list of components (requirements) of this project:
- Linux (Ubuntu 16.04)
- PhantomJS installed
I am a Linux user, so I have built the whole project on my Linux machine. You could run the project on Windows 10, but you have to do small changes to the project.
It’s really easy to work with PhantomJs. It doesn’t require having advanced skills of JS. It requires only a general knowledge of JS.
We have to install PhantomJS which can be done by downloading the package and making a symlink for the executable file.
Download the file from Bitbucket: sudo wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
Extract the file to
sudo tar xvjf phantomjs-2.1.1-linux-x86_64.tar.bz2 -C /usr/local/share/
Create a symlink: sudo ln -s /usr/local/share/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin/
Verify the installation by running the following command: phantomjs –version
The code of takeScreenshot.js
The code of create.sh
To be continued ….
Here is the Github Repo: https://github.com/peshmerge/liveuamapScrshotMaker