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.

About Author

Author Image
Vivek Joshi

Vivek is Web App Developer in Java Technology and also working on NodeJS.

Request for Proposal

Name is required

Comment is required

Sending message..