async function takeScreenshotStream() {
// see: [https://developer.mozilla.org/en-US/docs/Web/API/Window/screen](https://developer.mozilla.org/en-US/docs/Web/API/Window/screen)
const width = screen.width * (window.devicePixelRatio || 1)
const height = screen.height * (window.devicePixelRatio || 1)
const errors = []
let stream
try {
// for electron js
stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'screen',
minWidth : width,
maxWidth : width,
minHeight : height,
maxHeight : height,
},
},
})
} catch (ex) {
errors.push(ex)
}
if (errors.length) {
console.debug(...errors)
}
return stream
}
async function takeScreenshotCanvas() {
const stream = await takeScreenshotStream()
if (!stream) {
return null
}
// from: [https://stackoverflow.com/a/57665309/5221762](https://stackoverflow.com/a/57665309/5221762)
const video = document.createElement('video')
const result = await new Promise((resolve, reject) => {
video.onloadedmetadata = () => {
video.play()
video.pause()
// from: [https://github.com/kasprownik/electron-screencapture/blob/master/index.js](https://github.com/kasprownik/electron-screencapture/blob/master/index.js)
const canvas = document.createElement('canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
const context = canvas.getContext('2d')
// see: [https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement)
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
resolve(canvas)
}
video.srcObject = stream
})
stream.getTracks().forEach(function (track) {
track.stop()
})
return result
}
// from: [https://stackoverflow.com/a/46182044/5221762](https://stackoverflow.com/a/46182044/5221762)
function getPngBlob(canvas) {
return new Promise((resolve, reject) => {
// docs: [https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)
canvas.toBlob(blob => resolve(blob), 'image/png', 1)
})
}
async function takeScreenshotPngBlob() {
const canvas = await takeScreenshotCanvas()
if (!canvas) {
return null
}
return getPngBlob(canvas)
}
takeScreenshotPngBlob().then(r=>{
let url = URL.createObjectURL(r);
let tempLink = document.createElement('a');
tempLink.setAttribute('href', url);
tempLink.setAttribute('download', 'Screenshot.png');
tempLink.click();
})
