Welcome to the new Daily Docs. Please let us know what you think.

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.git
npm 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 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 🎉

Daily Prebuilt in an Electron applicatoin

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.