Skip to content

Instantly share code, notes, and snippets.

@terry2010
Last active June 24, 2022 06:37
Show Gist options
  • Save terry2010/4226c9e061fc6ca0feb9c57da04910e0 to your computer and use it in GitHub Desktop.
Save terry2010/4226c9e061fc6ca0feb9c57da04910e0 to your computer and use it in GitHub Desktop.
electron-mainWindow-capture
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<video style="display:none;" height="900"></video>
<canvas id="screenshot-canvas" style="display:none"></canvas>
<img id="screenshot-img" style="display:none"/>
</body>
</html>
// Access information about media sources that can be used to capture audio
// and video from the desktop using the navigator.mediaDevices.getUserMedia API.
//
// For more info, see:
// https://electronjs.org/docs/api/desktop-capturer
const { app, BrowserWindow,desktopCapturer ,screen } = require('electron')
const path = require('path')
let mainWindow
app.whenReady().then(() => {
mainWindow = new BrowserWindow({
height: 600,
width: 600,
webPreferences: {
nodeIntegration: false, // default in Electron >= 5
contextIsolation: true, // default in Electron >= 12
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
mainWindow.webContents.openDevTools({ mode: 'detach' })
setTimeout(startCapture,1000)
})
function startCapture () {
let allDisp = screen.getAllDisplays()
desktopCapturer.getSources({ types: ['screen'] }).then(async sources => {
for (const source of sources) {
allDisp.forEach((sc,k)=>{
if(source.display_id == sc.id) {
mainWindow.webContents.send('SET_SOURCE', source.id,sc.scaleFactor,sc.size)
}
})
}
})
}
{
"name": "deserted-motion-diagnose-g6mmj",
"productName": "deserted-motion-diagnose-g6mmj",
"description": "My Electron application description",
"keywords": [],
"main": "./main.js",
"version": "1.0.0",
"author": "terry",
"scripts": {
"start": "electron ."
},
"dependencies": {},
"devDependencies": {
"electron": "17.0.0"
}
}
const { ipcRenderer } = require('electron')
ipcRenderer.on('SET_SOURCE', async (event, sourceId,scaleFactor,size) => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sourceId,
minWidth: 1280,
maxWidth: 10000,
minHeight: 720,
maxHeight: 4000
}
}
})
handleStream(stream,scaleFactor,size)
} catch (e) {
handleError(e)
}
})
function handleStream (stream,scaleFactor,size) {
const video = document.querySelector('video')
video.srcObject = stream
video.onloadedmetadata = function(e)
{
video.play()
console.log('video.size',this.videoWidth,this.videoHeight)
var canvas = document.getElementById('screenshot-canvas')
canvas.width = this.videoWidth
canvas.height = this.videoHeight
var ctx = canvas.getContext('2d')
ctx.drawImage(video,0,0,canvas.width,canvas.height)
video.remove()
document.getElementById('screenshot-img').src = canvas.toDataURL("image/png")
document.getElementById('screenshot-img').style.display = "block"
console.log('screen-size,scaleFactor',size,scaleFactor)
console.log('screenshot-img:size:',
canvas.width,
canvas.height)
}
}
function handleError (e) {
console.log(e)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment