Desktop screen capture in web application

I need to capture deskop screen in my web application( core php and javascript). I want to know is it possible to capture desktop screen in javascript or any framework of javascript if possible please suggest me some code example, api or demo.
I am googling so much but not found any appliable solution
Thanks in advance

Do you mean the browser window ?!
– Hyyan Abo Fakher
Jun 29 at 11:46

Have you maybe tried googling for "js screenshot"?
– Luca
Jun 29 at 11:49

@Luca, I tried it more and more, JS Screenshot just capture screenshot from the browser or electron face not all the desktop.
– AmerllicA
Jun 29 at 11:53

JS Screenshot

Possible duplicate of How to capture screenshot of parts of the client "desktop" using HTML/JavaScript ?
– Matthew Knight
Jun 29 at 11:56

Maybe this might help. c-sharpcorner.com/article/…
– Richard Housham
Jun 29 at 12:18

3 Answers
3

It is not possible at all, because PHP is server side and does not related to client desktop, and absolutely JavaScript run in browser or electron environment which both of them are separated from OS environment, the JavaScript code are run in closed environment so it is impossible.

PHP

JavaScript

electron

OS

JavaScript

Thanx for answering...but I need to implement it. any suggestion to do it beyond javascript or using any third party api
– kalyani
Jun 29 at 13:08

JavaScript has full access to the document object model, so at least in theory, it could capture what's on its own web page (but not anything outside the browser window) and there's a library to do that: http://html2canvas.hertzen.com/ (I haven't tried it.)

Thanx for the answering but I need to capture desktop screen not browser tab
– kalyani
Jun 29 at 13:09

It's not useful for the question purpose, Although, the question desire is not possible
– AmerllicA
Jun 29 at 13:46

An electron application can make use of the desktopCapturer API to take a screenshot of the screen.

A demonstration (with code) is available in the Electron API Demos application. You can download the latest release for your operating system or build it yourself.

Renderer process:

const electron = require('electron')
const desktopCapturer = electron.desktopCapturer
const electronScreen = electron.screen
const shell = electron.shell

const fs = require('fs')
const os = require('os')
const path = require('path')

const screenshot = document.getElementById('screen-shot')
const screenshotMsg = document.getElementById('screenshot-path')

screenshot.addEventListener('click', function (event) {
screenshotMsg.textContent = 'Gathering screens...'
const thumbSize = determineScreenShotSize()
let options = { types: ['screen'], thumbnailSize: thumbSize }

desktopCapturer.getSources(options, function (error, sources) {
if (error) return console.log(error)

sources.forEach(function (source) {
if (source.name === 'Entire screen' || source.name === 'Screen 1') {
const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')

fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
if (error) return console.log(error)
shell.openExternal('file://' + screenshotPath)
const message = `Saved screenshot to: ${screenshotPath}`
screenshotMsg.textContent = message
})
}
})
})
})

function determineScreenShotSize () {
const screenSize = electronScreen.getPrimaryDisplay().workAreaSize
const maxDimension = Math.max(screenSize.width, screenSize.height)
return {
width: maxDimension * window.devicePixelRatio,
height: maxDimension * window.devicePixelRatio
}
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.