Allow screen capture

[atdrago]

It would be nice to be able to create a screenshot of the user's screen, rather than just the contents of the BrowserWindow.

[zcbenz]

You can use getUserMedia.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

[atdrago]

Hi @zcbenz. Thanks for the response!

getUserMedia is used to capture either audio or video from some input device, like a webcam or microphone. This is not what I'm trying to accomplish.

What I'd like to do is take a screen grab of the elements on the user's screen, for example, allowing them to draw a rectangle of the area they'd like to capture, then save that picture to the Desktop. (In other words, this: https://support.apple.com/en-us/HT201361)

I was able to accomplish this on Mac OS X using the screencapture command line utility:

var exec = require('child_process').exec;

exec('screencapture -R10,10,500,500 test.jpg', function (err, stdout, stderr) {
    // work with the image within the app
});

But it would be nice to be able to accomplish this in a cross-platform way, as a method that is part of app. BrowserWindow.capturePage([rect, ]callback) can capture the contents of a page, and so it would make sense that app would have something similar built in to capture the user's screen.

[zcbenz]

You can specify screen as input.
https://html5-demos.appspot.com/static/getusermedia/screenshare.html

[atdrago]

Sorry to bring this up again, but getUserMedia() no longer works in Chrome 37+. The flag has been removed. See here: https://groups.google.com/forum/#!msg/discuss-webrtc/TPQVKZnsF5g/Hlpy8kqaLnEJ

Think this is a possibility to get add in as a new API?

[hokein]

@atdrago
The enable-usermedia-screen-capturing is removed in chrome://flags and is remaind in the command-line switches.
So it still works on Electron, you need to specify the flag via app.commandLine.appendSwitch('enable-usermedia-screen-capturing');. And the destopCapture API is tracked in #1380.

[andruhon]

A simplified snippet function taking a screenshot, for the reference,
returns PNG blob into the callback:

function takeScreenShot (callback) {
    let screenConstraints = {
        mandatory: {
            chromeMediaSource: "screen",
            maxHeight: 1080,
            maxWidth: 1920,
            minAspectRatio: 1.77
        },
        optional: []
    };

    let session = {
        audio: false,
        video: screenConstraints
    };

    let streaming = false;
    let canvas = document.createElement("canvas");
    let video = document.createElement("video");
    document.body.appendChild(canvas);
    document.body.appendChild(video);
    let width = screen.width;
    let height = 0;

    video.addEventListener("canplay", function(){
        if (!streaming) {
            height = video.videoHeight / (video.videoWidth / width);

            if (isNaN(height)) {
                height = width / (4 / 3);
            }

            video.setAttribute("width", width.toString());
            video.setAttribute("height", height.toString());
            canvas.setAttribute("width", width.toString());
            canvas.setAttribute("height", height.toString());
            streaming = true;

            let context = canvas.getContext("2d");
            if (width && height) {
                canvas.width = width;
                canvas.height = height;
                context.drawImage(video, 0, 0, width, height);

                canvas["toBlob"](function (data) {
                    video.pause();
                    video.src = "";
                    document.body.removeChild(video);
                    document.body.removeChild(canvas);
                    callback(data);
                });
            }
        }
    }, false);

    navigator["webkitGetUserMedia"](session, function (stream) {
        video.src = window["webkitURL"].createObjectURL(stream);
        video.play();
    }, function () {
        console.error("Can't take a screenshot");
    });
}

[mixalbl4-127]

You can use this library: https://github.com/mixalbl4-127/user-media-screenshot