Taking screenshots of Liveuamap.com on Linux using PhantomJS2 min read

In

,

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.

LiveUaMap.com

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.

Time range Liveuamap

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

I could use headless chrome, but it was a bit of headache with removing elements from the page before the making the screenshot. I have finally decided to use a Javascript (JS) library for that purpose.

The project

Here a list of components (requirements) of this project:

  1. Linux (Ubuntu 16.04)
  2. PhantomJS installed

Linux

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.

PhantomJS

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. source
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

https://gist.github.com/peshmerge/a38f2a05057b6903df1b30fec8c60f3c

The code of create.sh

https://gist.github.com/peshmerge/8889306b7aa27de3480e965baab8f95e

To be continued ….

Here is the Github Repo: https://github.com/peshmerge/liveuamapScrshotMaker

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.