Installation and System Setup
Download nodejs installer from http://nodejs.org/download/After installation open the command prompt and type
C:\>node --version //prints the version number C:\>npm -version //npm is a NodeJS package manager. it's used to install node programs.The next step would be to install all the dependencies for the project, -g flag is to install the module globally.
C:\>npm install -g socket.io C:\>npm install -g phantomjs C:\>npm install -g node-static C:\>npm ls //lists out all the modules installed
The project contains 3 pieces,
nodejs_example1.js - is the server code that defines how the server talks to the client.
nodejs_example1.html - is the html page loaded in the client browser.
phantomjs_example1.js - contains the phantomjs code to take the screenshot
nodejs_example1.js
var http = require('http')
, io = require('socket.io')
, fs = require('fs')
, os = require('os')
, path = require('path')
, childProcess = require('child_process')
, phantomjs = require('phantomjs');
var server = http.createServer(onCreateHandler);
var socket = io.listen(server);
server.listen(8090);
var sessionid;
function onCreateHandler(req, res) {
fs.readFile(__dirname + '/nodejs_example1.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading nodejs_example1.html');
}
res.writeHead(200);
res.end(data);
});
}
socket.on('connection', function (socket) {
sessionid = genRandNum();
socket.emit('session id', { id: sessionid});
socket.on('capture screen event', function (id, url) {
if(sessionid == id){
captureScreenShot(url);
}else{
console.log("Invalid Session ID");
}
});
});
function captureScreenShot(data){
var binPath = phantomjs.path;
output = os.arch() + os.platform() + "_" + Math.round(os.uptime()) + '.png';
var childArgs = [
path.join(__dirname, 'phantomjs_example1.js'),
data,
output]
console.log(childArgs);
childProcess.execFile(binPath, childArgs, function(err, stdout, stderr) {
// handle results
})
}
function genRandNum() {
return Math.floor((Math.random()*10)+1); //Return a random number between 1 and 10
}
nodejs_example1.html<html>
<head>
<script type="text/javascript" src="http://localhost:8090/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://localhost:8090/phantomjs/phantomjs.js"></script>
<script type="text/javascript" src="http://localhost:8090/phantom/phantom.js"></script>
<script>
var socket = io.connect('http://localhost');
var sessionid = 0;
socket.on('session id', function (data) {
sessionid = data.id;
});
function captureScreenShot(){
socket.emit('capture screen event', sessionid, document.getElementById("inputurl").value );
}
</script>
</head>
<body>
url for screenshots <input type="text" id="inputurl" value="https://www.google.com/"><br>
<input type="submit" value="Get Screen Shot" onclick="captureScreenShot()">
</body>
</html>
phantomjs_example1.js
var system = require('system');
var page = require('webpage').create();
address = system.args[1];
output = system.args[2];
//debug_address = 'https://www.google.com/';
//debug_output = 'hello.png';
page.open(address, function (status) {
console.log(address);
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
To Run the code, (note all three files must be in the same folder)
start your server as follows,C:\>node nodejs_example1.js
Open the bowser and load the following page "http://localhost:8090/", Click on the "Get ScreenShot" button, the screenshot gets stored in your local folder.
The next blog would be about sending the screenshot to the server.
