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.
Is this script still something that should work? I get some errors (most notably the two phantom js includes are non-exists) and I still get an error in the console that kills the process (child_process error). Any help, a zip or a git repo would be awesome! Thanks.
ReplyDelete