deermichel/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <button id='show'>show aux window</button>
  <button id='hide'>hide aux window</button>
  <video></video>
  <script>
    require('./renderer.js')
  </script>
</body>
</html>

## main.js
const { app, BrowserWindow, ipcMain } = require('electron');

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    height: 720,
    width: 1280,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  // hide playback window to avoid 'mirror effect'
  mainWindow.setContentProtection(true);

  const auxWindow = new BrowserWindow({
    height: 300,
    width: 300,
  });
  auxWindow.setContentProtection(true);
  ipcMain.on('show', () => auxWindow.show());
  ipcMain.on('hide', () => auxWindow.hide());

  // workaround
  // auxWindow.setOpacity(1.0);

  mainWindow.loadFile('index.html');
});

## package.json
{
  "name": "outstanding-nature-handle-xy293",
  "productName": "outstanding-nature-handle-xy293",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "mhanselmann",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "15.1.1"
  }
}

## preload.js
// Empty

## renderer.js
const { desktopCapturer, ipcRenderer } = require('electron');

desktopCapturer.getSources({ types: ['screen'] }).then(async (devices) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: devices[0].id,
        minWidth: 1280,
        maxWidth: 1280,
        minHeight: 720,
        maxHeight: 720,
      },
    },
  });
  handleStream(stream);
});

const handleStream = (stream) => {
  const video = document.querySelector('video');
  video.srcObject = stream;
  video.onloadedmetadata = (e) => video.play();
};

document.getElementById('show').addEventListener('click', () => {
  ipcRenderer.send('show');
});

document.getElementById('hide').addEventListener('click', () => {
  ipcRenderer.send('hide');
});

## styles.css
/* Empty */
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Document</title>
	</head>
	<body>
	<button id='show'>show aux window</button>
	<button id='hide'>hide aux window</button>
	<video></video>
	<script>
	require('./renderer.js')
	</script>
	</body>
	</html>
	const { app, BrowserWindow, ipcMain } = require('electron');

	app.whenReady().then(() => {
	const mainWindow = new BrowserWindow({
	height: 720,
	width: 1280,
	webPreferences: {
	nodeIntegration: true,
	contextIsolation: false,
	},
	});

	// hide playback window to avoid 'mirror effect'
	mainWindow.setContentProtection(true);

	const auxWindow = new BrowserWindow({
	height: 300,
	width: 300,
	});
	auxWindow.setContentProtection(true);
	ipcMain.on('show', () => auxWindow.show());
	ipcMain.on('hide', () => auxWindow.hide());

	// workaround
	// auxWindow.setOpacity(1.0);

	mainWindow.loadFile('index.html');
	});
	{
	"name": "outstanding-nature-handle-xy293",
	"productName": "outstanding-nature-handle-xy293",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "mhanselmann",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "15.1.1"
	}
	}
	const { desktopCapturer, ipcRenderer } = require('electron');

	desktopCapturer.getSources({ types: ['screen'] }).then(async (devices) => {
	const stream = await navigator.mediaDevices.getUserMedia({
	audio: false,
	video: {
	mandatory: {
	chromeMediaSource: 'desktop',
	chromeMediaSourceId: devices[0].id,
	minWidth: 1280,
	maxWidth: 1280,
	minHeight: 720,
	maxHeight: 720,
	},
	},
	});
	handleStream(stream);
	});

	const handleStream = (stream) => {
	const video = document.querySelector('video');
	video.srcObject = stream;
	video.onloadedmetadata = (e) => video.play();
	};

	document.getElementById('show').addEventListener('click', () => {
	ipcRenderer.send('show');
	});

	document.getElementById('hide').addEventListener('click', () => {
	ipcRenderer.send('hide');
	});