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.
/cdn.vox-cdn.com/uploads/chorus_asset/file/11464595/Verge.png)
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <style> | |
| video { | |
| margin: 2px; | |
| border-radius: 200px; | |
| object-fit: cover; | |
| border-width: 0ps; | |
| } | |
| </style> | |
| </head> | |
| <body style="-webkit-app-region: drag"> | |
| <video id="video0" width="80" height="80" autoplay></video> | |
| <video id="video1" width="80" height="80" autoplay></video> | |
| <video id="video2" width="80" height="80" autoplay></video> | |
| <script> | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(stream => { | |
| document.getElementById("video0").srcObject = stream; | |
| document.getElementById("video1").srcObject = stream; | |
| document.getElementById("video2").srcObject = stream; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
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 });
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!
No hay comentarios:
Publicar un comentario