Video bubbles UI using Electronjs

After today's release of Houseparty's Mac app showing a new approach for video conversations UI based on bubbles I was wondering if it would be possible to build a similar user experience using Electron framework and web technologies.

It was easy to find that Electron has support for transparent and frameless windows so I decided to give it a try and figure out if it would be technically possible to build something similar to that.

To build the app I used the electron quick-start and only edited two files:

HTML File

First I modified the HTML file to add video capturing from the camera using the standard getUserMedia API and showed your local video stream in 3 <video> elements.  To make rounded bubbles you can use standard CSS attributes:

Note the style "webkit-app-region: drag" to make the window draggable from anywhere.

main.js File

You have to update the main.js file to create the main window as a frameless and transparent window:

const mainWindow = new BrowserWindow({ frame: false, transparent: true });

With those 2 tiny changes I was able to have something similar to the bubbles video experience created by Houseparty.

So I successfully built 0.01 % of the new Houseparty Mac app using Electron!  Enjoy it!