Get desktop screenshot using through node webkit
Posted By : Vivek Joshi | 28-Oct-2017
These are the following steps and code to get screenshot using node webkit desktop application.
Step 1:- First you have to create an html file.
<html>
<head>
<title>Screenshot capture</title>
</head>
<body>
<div class="" ng-controller="TrackerController as trackerCtrl">
<section>
<video id="camFeed" width="1366" height="768" autoplay style="display:inharit"></video>
<canvas id="photo" width="1366" height="768" style="display:none"></canvas>
</section>
</div>
</body>
</html>
Through this code you have to html content to view desktop screen and using this DOM object you can get screenshot image at any time.
Step2:- In this step we are using AngularJS to implement the getting screenshot code
Step3:- Create a Controller to initialize screen and get screenshot image
(function() {
'use strict';
angular
.module('ScreenshotAPP')
.controller('TrackerController', TrackerController);
TrackerController.$inject = ['screenshotService'];
function TrackerController(screenshotService) {
var gui = require('nw.gui');
var appWindow = gui.Window.get();
var _pollingIntervalID;
screenShotService.initialize(); //function call for initialized get desktop screen and display it to our html <video> tag
function getScreenshot(){
_pollingIntervalID = setInterval(function () {
screenShotService.getScreenshot();
}, 10000);
}
} // ending tracker controller
getScreenshot();
})();
In TrackerController we are using screenshotService service which well use to Initialise desktop screen with our <video> tag and can get screenshot any time
Step 4:- Create a Service to Initialize desktop screen and get screenshot
(function(){
'use strict';
angular
.module('productivityDesktop')
.service('ScreenShotService',ScreenShotService);
ScreenShotService.inject = ['$rootScope','$http','$timeout'];
function ScreenShotService($rootScope,$http,$timeout) {
var gui = require('nw.gui');
var fs = require("fs");
var screens = gui.Screen.screens;
function initializeScreenshotService() {
if(!_isInitialized){
try{
gui.Screen.chooseDesktopMedia(
["window","screen"], function(streamId) {
var vid_constraint = {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: streamId,
maxWidth: 1920,
maxHeight: 1080,
},
optional:[]
};
navigator.webkitGetUserMedia({audio:false,video: vid_constraint},
function(stream){
var videoObj = document.querySelector('video')
videoObj.src = URL.createObjectURL(stream)
},
function(error){
console.log('failure',error);
});
});
}catch(err){
console.log("error is......... ",err);
}
}
}
} // Ending screenShotService
function getScreenshot() {
var timestamp = new Date().getTime();
var screenshotName = "Image-" + timestamp;
var screenShotFormData = getScreen(screenshotName);
}
function getScreen(screenshotName ) {
var canvasElement = document.getElementById('photo');
var videoElement = document.getElementById('camFeed');
canvasElement.getContext('2d').drawImage(videoElement, 0, 0, 1366, 768);
var d = canvasElement.toDataURL("image/png");
var image = d.split(",");
var imageData = image[1];
var imageName = screenshotName + '.png';
var screenshotDirPath = "./tmp/screenShots";
var imagePath = screenshotDirPath + '/' + screenshotName + '.png';
fs.writeFile(imagePath,imageData, 'base64', function (err) {
if (err == null) {
console.log("Image saved in ",screenshotDirPath);
}else{
console.log("Error in saving image",err);
}
});
}
})();
After Using this steps the image will be saved at tmp folder of your computer under screenShots folder It get screenshot every 10 second as per you define in the controller.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vivek Joshi
Vivek is Web App Developer in Java Technology and also working on NodeJS.