Integrating Daily Prebuilt with Electron
Daily developers can easily integrate video calls into desktop applications using Electron and daily-js.
This guide will walk you through a very basic integration of Daily Prebuilt into an Electron demo application.
The basics of an Electron application
Electron utilizes a multi-process architecture. Apps built with Electron consist of a "main" process and one or more "renderer" processes.
The main process
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.
The renderer process
To clone and run Daily's Electron demo application, run the following commands in your terminal:
git clone email@example.com:daily-demos/electron-prebuilt.gitnpm i && npm start
Daily Prebuilt Electron application structure
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.
Creating an Electron
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
The Content Security Policy will need to allow data from the Daily domain to be loaded into an iframe, as well allow for the importing of
daily-js from unpkg:
Creating the Daily Prebuilt iframe
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.