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.
Electron framework
Electron facilitates building cross-platform desktop applications using web technologies. Electron apps run on the Chromium engine and are written using JavaScript, HTML, and CSS. This means that developers can write applications using vanilla JavaScript or a framework of their choice.
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
Each BrowserWindow has its own renderer process. Each renderer process is responsible for rendering the application, and contains access to the DOM. Communication with the Daily JavaScript API will take place in the renderer process.
Getting started
To clone and run Daily's Electron demo application, run the following commands in your terminal:
git clone git@github.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
The BrowserWindow which will be used to embed our Daily Prebuilt iframe is instantiated in main.js:
Above, createWindow() creates a BrowserWindow and loads index.html within it. This happens when the Electron is initialized, ensured through use of the app.whenReady() promise.
index.html
daily-js is imported in index.html before our own daily.js script:
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
In daily.js, a Daily Prebuilt iframe 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 iframe:
join(), an instance method on the DailyCall, takes a room URL and joins the video call:
Once the call is joined, you’re officially in a Daily call 🎉
Conclusion
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.