ckerr/index.html

## index.html
<html>
    <head>
    </head>
    <body>
        <script>
            async function waitReady(video) {
                return new Promise(accept => {
                    const callback = () => {
                        video.removeEventListener('canplay', callback)
                        accept()
                    }

                    video.addEventListener('canplay', callback)
                })
            }

            function sleep(timeout) {
                return new Promise(accept => setTimeout(accept, timeout))
            }

            async function main() {
                const video  = document.createElement('video')
                const canvas = document.createElement('canvas')
                const ctx    = canvas.getContext("2d")
                const stream = await navigator.mediaDevices.getUserMedia({ video:true })

                if(stream.getVideoTracks().length != 0) {
                    video.srcObject = stream
                    video.play()
                    await waitReady(video)

                    canvas.width = video.videoWidth
                    canvas.height = video.videoHeight
                    document.body.appendChild(canvas)

                    while(true) {
                        ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
                        await sleep(100)
                    }
                }
            }

            main()
        </script>
    </body>
</html>

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

async function main()
{
    await app.whenReady()

    app.on('window-all-closed', () => {
            app.quit()
    })

    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })
    win.loadFile('index.html')
}

main()

## package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^11.2.3"
  }
}

## preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.
	<html>
	<head>
	</head>
	<body>
	<script>
	async function waitReady(video) {
	return new Promise(accept => {
	const callback = () => {
	video.removeEventListener('canplay', callback)
	accept()
	}

	video.addEventListener('canplay', callback)
	})
	}

	function sleep(timeout) {
	return new Promise(accept => setTimeout(accept, timeout))
	}

	async function main() {
	const video = document.createElement('video')
	const canvas = document.createElement('canvas')
	const ctx = canvas.getContext("2d")
	const stream = await navigator.mediaDevices.getUserMedia({ video:true })

	if(stream.getVideoTracks().length != 0) {
	video.srcObject = stream
	video.play()
	await waitReady(video)

	canvas.width = video.videoWidth
	canvas.height = video.videoHeight
	document.body.appendChild(canvas)

	while(true) {
	ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
	await sleep(100)
	}
	}
	}

	main()
	</script>
	</body>
	</html>
	const { app, BrowserWindow } = require('electron')

	async function main()
	{
	await app.whenReady()

	app.on('window-all-closed', () => {
	app.quit()
	})

	const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true
	}
	})
	win.loadFile('index.html')
	}

	main()
	{
	"name": "electron-quick-start",
	"version": "1.0.0",
	"description": "A minimal Electron application",
	"main": "main.js",
	"scripts": {
	"start": "electron ."
	},
	"repository": "https://github.com/electron/electron-quick-start",
	"keywords": [
	"Electron",
	"quick",
	"start",
	"tutorial",
	"demo"
	],
	"author": "GitHub",
	"license": "CC0-1.0",
	"devDependencies": {
	"electron": "^11.2.3"
	}
	}
	// All of the Node.js APIs are available in the preload process.
	// It has the same sandbox as a Chrome extension.
	window.addEventListener('DOMContentLoaded', () => {
	const replaceText = (selector, text) => {
	const element = document.getElementById(selector)
	if (element) element.innerText = text
	}

	for (const type of ['chrome', 'node', 'electron']) {
	replaceText(`${type}-version`, process.versions[type])
	}
	})
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// No Node.js APIs are available in this process because
	// `nodeIntegration` is turned off. Use `preload.js` to
	// selectively enable features needed in the rendering
	// process.