How to create a background process in electron which will take screenshots of the entire desktop?


#1

I am new with electron and angular2. Currently I am creating a desktop application with electron and angular2 which takes screenshots of the entire desktop. I


#2

Hello there, I will try and answer your question in 2 parts:

1: Creating a backgrouond process with electron can be achieved by instanciating an invisible BrowserWindow that will contain and run your angular2 renderer process.

2: make use of the desktopCapturer API to capture the screen.


#3

Thank you very much for your answer. I have use the desktopCapturer API and I can take screenshots of the entire desktop. The code for this is written in the appComponent.ts but I want to take this code to electron which will run as background process and will not interrupt any other process.

Here is my Code:

import { Component, OnInit } from ‘@angular/core’;
import { desktopCapturer, remote, dialog, ipcRenderer } from ‘electron’;
import { writeFile} from ‘fs’;

@Component({
selector: ‘page1’,
templateUrl: ‘./app.component.html’,

})
export class AppComponent implements OnInit {

constructor() { }

ngOnInit() {
this.myScreen();

}

myScreen()
{

    let n = <any>navigator;
    let myvid = <HTMLInputElement>document.getElementById('kk');
    electron.desktopCapturer.getSources({ types: ['window', 'screen'], thumbnailSize: { width: 100, height: 50 } }, (error, sources) => {
        console.log(sources);
        if (error) throw error;
        for (let i = 0; i < sources.length; ++i) {
            console.log(sources[i]);
            // addImage(sources[i].thumbnail)
            // if (sources[i].name == "Entire screen") {
                n.webkitGetUserMedia({
                    audio: false,
                    video: {
                        mandatory: {
                            chromeMediaSource: 'desktop',
                            chromeMediaSourceId: sources[i].id,
                            minWidth: 1280,
                            maxWidth: 1280,
                            minHeight: 720,
                            maxHeight: 720
                        }
                    }
                }, gotStream, getUserMediaError);
                return;
            // }
        }

    });

    //var timeId= setInterval(gotStream,2000);


    function gotStream(stream) {
      
        // myvid.src = URL.createObjectURL(stream);
        var randomnumber=Math.floor(Math.random()*11)
        console.log("Stream");
        var video = document.createElement('video');

        video.addEventListener('loadedmetadata', function () {
            var canvas = document.createElement('canvas');
            canvas.width = this.videoWidth;
            canvas.height = this.videoHeight;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0);
            
            var dot=".";
            console.log("helo1");
            console.warn("helo1")
            var url = canvas.toDataURL('image/jpeg', 1.0);
            var ext = url.split(';')[0].match(/jpeg|png|gif/)[0];
            var data1 = url.replace(/^data:image\/\w+;base64,/, "");
            console.warn("inside loader");
           // var buf = new Buffer(data1, 'base64');
            fs.writeFile('C:/Users/user/Downloads/image'+randomnumber+dot+ext,data1,'base64',function (err) {
                console.warn("fs");
                if (err) {
                    alert("An error ocurred creating the file " + err.message)
                }
            });
          
           }, false);

        video.src = URL.createObjectURL(stream);
        console.warn("after video src");
        video.play();
        console.warn("after play");
      


  }

    function addImage(image) {
        const snap = document.createElement("img");
        snap.src = image.toDataURL();
        document.body.appendChild(snap);
    }

    function getUserMediaError(e) {
        console.log('getUserMediaError');
    }

     var timeId= setInterval(this.myScreen,3000);
}

}