Integrating Daily Prebuilt with Electron
Electron utilizes a multi-process architecture. Apps built with Electron consist of a "main" process and one or more "renderer" processes.
The main process runs in a Node.js environment. It contains the entry point of an Electron application and constructs one or more
BrowserWindows in which contents will be loaded. The main process does not have access to the DOM.
The main process also controls the Electron application's lifecycle and grants access to several APIs to interact with the native OS.
To clone and run Daily's Electron demo application, run the following commands in your terminal:
git clone firstname.lastname@example.org:daily-demos/electron-prebuilt.gitnpm i && npm start
The Daily Prebuilt Electron application will consist of the following source files:
main.js- Entry point for the main process.
index.html- Entry point for the renderer process.
daily.js- The script where the Daily Prebuilt iframe will be created, running in the renderer process.
BrowserWindow which will be used to embed our Daily Prebuilt iframe is instantiated in
createWindow() creates a
BrowserWindow and loads
index.html within it. This happens when the Electron is initialized, ensured through use of the
daily-js is imported in
index.html before our own
callFrame is created using
createFrame(). It is set to take up (almost) 100% of the application space, with 1rem subtracted from the width and height to avoid clipping of the callframe:
join(), an instance method on the
DailyIFrame, takes a room URL and joins the video call:
Once the call is joined, you’re officially in a Daily call 🎉
With this guide, you have the core building blocks of integrating a Daily video call into your Electron desktop application. Please don’t hesitate to reach out if you have any questions.