angular - 如何在 Electron 中创建一个截取整个桌面屏幕截图的后台进程？

Question

我正在使用 angular2 和 electron 创建一个桌面应用程序，它会截取整个桌面的屏幕截图并将其保存在我的 PC 中的给定路径中。截屏的代码写在 app.component.ts 中，但我必须这样做此任务作为 Electron 后台进程。我已经阅读了有关后台进程的信息，但我不确定如何在 Electron 中将其实际实现为后台进程。有人可以帮我解决这个问题吗？这是我的代码:

从'@angular/core'导入{Component, OnInit};
从'electron'导入{desktopCapturer，remote，dialog，ipcRenderer};
从 'fs' 导入 { writeFile};

@Component({
selector: 'app-root',
templateUrl: './app.component.html',

})

export class AppComponent implements OnInit  {

constructor() { }

ngOnInit() {
this.myScreen();

}

myScreen()
{
    let n = <any>navigator;
    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]);
                n.webkitGetUserMedia({
                    audio: false,
                    video: {
                        mandatory: {
                            chromeMediaSource: 'desktop',
                            chromeMediaSourceId: sources[i].id,
                            minWidth: 1280,
                            maxWidth: 1280,
                            minHeight: 720,
                            maxHeight: 720
                        }
                    }
                }, gotStream, getUserMediaError);
                return;
            // }
        }

    });

    function gotStream(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");

            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);
        video.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);
}

Answer 1

有两种运行非阻塞后台任务的方法:

• 使用网络 worker - 这是“最干净”的方法。遗憾的是，工作人员无法访问 Node JS 功能。
• 使用隐藏的浏览器窗口 - 这似乎是一种 hack，但实际上效果很好。您可以通过 Electron 的 RPC 在主应用程序和后台窗口之间进行通信。