├── .DS_Store
├── .gitignore
├── camera.html
├── camera.js
├── cameraPreload.js
├── index.html
├── index.js
├── main.js
├── package-lock.json
├── package.json
└── preload.js
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitfumes/electronjs-crash-course/147d632e81a8bdf4fc662f6ed1606080f60a5208/.DS_Store
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | out/
--------------------------------------------------------------------------------
/camera.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
11 | Window 2
12 |
13 |
14 |
15 | Camera Access
16 |
17 | ![]()
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/camera.js:
--------------------------------------------------------------------------------
1 | const video = document.getElementById("camera");
2 | const captureButton = document.getElementById("capture-image");
3 | const imageTag = document.getElementById("image");
4 |
5 | captureButton.addEventListener("click", () => {
6 | const canvas = document.createElement("canvas");
7 | canvas.width = video.videoWidth;
8 | canvas.height = video.videoHeight;
9 | canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
10 | const dataURL = canvas.toDataURL();
11 | window.electronAPI.sendImage(dataURL);
12 |
13 | new Notification("Image Captured", {
14 | body: "Image is successfully captured from live video.",
15 | });
16 | });
17 |
18 | navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
19 | video.srcObject = stream;
20 | });
21 |
--------------------------------------------------------------------------------
/cameraPreload.js:
--------------------------------------------------------------------------------
1 | const { contextBridge, ipcRenderer } = require("electron");
2 |
3 | contextBridge.exposeInMainWorld("electronAPI", {
4 | sendImage: (data) => ipcRenderer.send("set-image", data),
5 | });
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
11 | Hello World!
12 |
13 |
14 |
15 | Hello World! from Sarthak
16 | We are using Node.js ,
17 | Chromium ,
18 | and Electron .
19 |
20 | ![]()
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const imageTag = document.getElementById("imageTag");
2 |
3 | window.electronAPI.getImage((event, data) => {
4 | imageTag.src = data;
5 | window.electronAPI.closeWindow2();
6 | });
7 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const { app, BrowserWindow, Menu, shell, ipcMain } = require("electron");
2 | const path = require("path");
3 |
4 | const menuItems = [
5 | {
6 | label: "Menu",
7 | submenu: [
8 | {
9 | label: "About",
10 | },
11 | ],
12 | },
13 | {
14 | label: "File",
15 | submenu: [
16 | {
17 | label: "Open Camera",
18 | click: async () => {
19 | const win2 = new BrowserWindow({
20 | height: 500,
21 | width: 800,
22 | show: false,
23 | webPreferences: {
24 | preload: path.join(__dirname, "cameraPreload.js"),
25 | },
26 | });
27 |
28 | ipcMain.on("close-window-2", () => win2.close());
29 |
30 | // win2.webContents.openDevTools();
31 | win2.loadFile("camera.html");
32 | win2.once("ready-to-show", () => win2.show());
33 | },
34 | },
35 | {
36 | label: "Learn More",
37 | click: async () => {
38 | await shell.openExternal("https://bitfumes.com");
39 | },
40 | },
41 | {
42 | type: "separator",
43 | },
44 | {
45 | label: "Exit",
46 | click: () => app.quit(),
47 | },
48 | ],
49 | },
50 | {
51 | label: "Window",
52 | submenu: [
53 | {
54 | role: "Minimize",
55 | },
56 | {
57 | role: "close",
58 | },
59 | ],
60 | },
61 | ];
62 |
63 | const menu = Menu.buildFromTemplate(menuItems);
64 | Menu.setApplicationMenu(menu);
65 |
66 | const createWindow = () => {
67 | const win = new BrowserWindow({
68 | height: 500,
69 | width: 800,
70 | webPreferences: {
71 | preload: path.join(__dirname, "preload.js"),
72 | },
73 | });
74 |
75 | ipcMain.on("set-image", (event, data) => {
76 | win.webContents.send("get-image", data);
77 | });
78 |
79 | // win.webContents.openDevTools();
80 | win.loadFile("index.html");
81 | };
82 |
83 | app.whenReady().then(() => {
84 | createWindow();
85 |
86 | app.on("activate", () => {
87 | if (BrowserWindow.getAllWindows().length === 0) createWindow();
88 | });
89 | });
90 |
91 | app.on("window-all-closed", () => {
92 | if (process.platform !== "darwin") app.quit();
93 | });
94 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "electron-app",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "main.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "electron-forge start",
9 | "package": "electron-forge package",
10 | "make": "electron-forge make"
11 | },
12 | "keywords": [],
13 | "author": "",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "@electron-forge/cli": "^6.0.0-beta.63",
17 | "@electron-forge/maker-deb": "^6.0.0-beta.63",
18 | "@electron-forge/maker-rpm": "^6.0.0-beta.63",
19 | "@electron-forge/maker-squirrel": "^6.0.0-beta.63",
20 | "@electron-forge/maker-zip": "^6.0.0-beta.63",
21 | "electron": "^18.2.0"
22 | },
23 | "dependencies": {
24 | "electron-squirrel-startup": "^1.0.0"
25 | },
26 | "config": {
27 | "forge": {
28 | "packagerConfig": {},
29 | "makers": [
30 | {
31 | "name": "@electron-forge/maker-squirrel",
32 | "config": {
33 | "name": "electron_app"
34 | }
35 | },
36 | {
37 | "name": "@electron-forge/maker-zip",
38 | "platforms": [
39 | "darwin"
40 | ]
41 | },
42 | {
43 | "name": "@electron-forge/maker-deb",
44 | "config": {}
45 | },
46 | {
47 | "name": "@electron-forge/maker-rpm",
48 | "config": {}
49 | }
50 | ]
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/preload.js:
--------------------------------------------------------------------------------
1 | window.addEventListener("DOMContentLoaded", () => {
2 | const replaceText = (selector, text) => {
3 | const element = document.getElementById(selector);
4 | if (element) element.innerText = text;
5 | };
6 |
7 | for (const dependency of ["chrome", "node", "electron"]) {
8 | replaceText(`${dependency}-version`, process.versions[dependency]);
9 | }
10 | });
11 |
12 | const { contextBridge, ipcRenderer } = require("electron");
13 |
14 | contextBridge.exposeInMainWorld("electronAPI", {
15 | getImage: (callback) => ipcRenderer.on("get-image", callback),
16 | closeWindow2: () => ipcRenderer.send("close-window-2"),
17 | });
18 |
--------------------------------------------------------------------------------