electrobooth

ElectroBooth is a "Photo Booth" / "Selfie Booth" application written in Electron.JS. It works on Windows, macOS and Linux and supports all cameras that work with modern video conferencing applications.

You can for example set it up at an event where users can take selfies and have them emailed to them. It will show a live video preview and, after pressing Enter, will start a countdown before taking a picture. Users can then enter their email address and will get their photo via email.

The email message can be customized and optionally, an additional file can be attached to every email - for example when you want to sent the users additional information about your event or your company.

ElectroBooth stores all messages it sends and it does support an Offline mode where messages are only stored and can be sent later - so you can use it at events where you do not have an internet connection.

Photos are stored locally in a configurable directory and email addresses are stored locally inside an SQLite file.

Usage

• Complete the Settings when prompted (File -> Settings)
• Double click to enter / exit full screen mode
• Press ENTER to start the countdown
• View saved messages and images by going to Messages -> Show Messages
  • you can also send / delete messages from there.

Settings

Open the Settings window through the File -> Settings or ElectroBooth -> Settings Menu

Tab	Setting	Description
Photo	Countdown	How many seconds to countdown before taking a photo
Photo	Camera	Select which camera to use (if multiple are connected)
Photo	Mirror Preview	Mirror the preview picture?
Photo	Mirror Photo	Mirror the actual photo?
Email	Sender	(Name + ) Email address of sender (Name <mail@example.com> format)
Email	Subject	Email subject
Email	Body	Email body (plaintext only)
Email	Attachment	(optional) file attachment
SMTP	Offline	Whether to directly send the messages or only store them
SMTP	Hostname	Hostname of SMTP Server
SMTP	Port	Port of SMTP Server (465 for SMTP with TLS)
SMTP	Username	Username for SMTP Server
SMTP	Password	Password for SMTP Server
Storage	Directory	The directory where pictures and messages are stored

---

Developer Guide

ElectroBooth is written in TypeScript for Electron and uses React for the user interface. I am also using it as a real-world test project for my Electron Interprocess Communication library eimer.js.

To modify the source code, you need node and npm and a source code editor of your choice. You can then install all necessary dependencies and start a dev version of the app with the following commands:

npm ci
npm run rebuild
npm run dev

Note that npm run rebuild is necessary to rebuild better-sqlite3 for your OS.

Build

Use the following commands to produce installer packages (like a setup.exe).

npm ci
npm run package
npm run make

Directory Structure

📂build/                   build scripts and electron-forge config
📂src/
+--📂backend/              backend (main process) code
+--📂frontend/             frontend (renderer process) code
|  +--📂main/              main window         
|  +--📂message/           messages window
|  +--📂settings/          settings window
|  +--📂shared             code used by all windows
+--📂preload/              electron preload script
+--📂shared/               code used by backend and frontend
   +--📂i18n/              internationalization code
      +--📂translations/   translations of the user interface

Troubleshooting

Duplicate "Full Screen" entries in "Window" Menu on macOS

• This is a known bug in Electron.

electron fails to start on recent linux (SIGTRAP)

> npx electron .
[38807:1127/223219.005425:FATAL:setuid_sandbox_host.cc(163)] The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that node_modules/electron/dist/chrome-sandbox is owned by root and has mode 4755.
node_modules/electron/dist/electron exited with signal SIGTRAP

sudo chown root:$(whoami) node_modules/electron/dist/chrome-sandbox
sudo chmod 4755 node_modules/electron/dist/chrome-sandbox

npm run dev fails with SyntaxError

An unhandled rejection has occurred inside Forge: SyntaxError: Cannot use 'import.meta' outside a module Run npm ci and npm run rebuild before running npm run dev

electron-forge + vite + swc + typeorm Errors

• The build setup uses vite + swc to compile and build workers
• This is problematic with TypeORM: https://typeorm.io/docs/help/faq/#how-to-use-webpack-for-the-backend
• It leads to errors like

  A JavaScript error occured in the main process

  Uncaught Exception:

  Error: Could not resolve "@google-cloud/spanner" imported by "typeorm". Is it installed?

• the "solution" is to list the dependency in question (in this case, "@google-cloud/spanner") as external in the rollup options of the vite.***.config.ts file of the bundle

  export default defineConfig({
      plugins: [swc(...)],
      esbuild: false,
      build: {
          rollupOptions: {
              external: ["@google-cloud/spanner"],
              input: '...', 
          },
      },
  });

  • see build/vite.database-worker.config.ts for an example

Authors

• Jan Hapke

License

MIT