Monitoring Application Built Fully on JavaScript
by Samra Osmanova, Full-Stack Developer
Not long ago, I participated in a project that was both technically demanding and quite sensitive from a privacy perspective. Our team of JavaScript developers was asked to create an in-house monitoring system for a customer service department. The company needed to improve the quality of services while maintaining very strict requirements regarding privacy and data control.
Why Off-the-Shelf Solutions Didn't Work
There are plenty of ready-made monitoring tools, but none met the company's needs. Most were too expensive, lacked certain features, or required cloud storage—which was completely out of the question.
The system had to be self-hosted, with no external data transmission, and allow management to view screen activity and webcam footage when needed.
Just to be clear: All employees involved signed a formal agreement before anything was installed. They were fully informed about what the software does, and the project followed internal compliance and data protection policies.
Initial Idea: A Browser Extension
Our first thought was to build a browser extension. It seemed simple at first, but it quickly proved unworkable. Modern browsers enforce strict privacy rules, especially around access to webcams and screen recording. Each time the app needed access, the user would have to confirm manually—which made the whole concept impractical for our use case.
Also, browser extensions don't launch on startup or run reliably in the background. We needed something more robust.
Moving to a Desktop Application
We decided to develop a desktop application that would run quietly in the background and start automatically when the computer boots up. It needed to handle:
- Screen sharing
- Webcam access
- Communication with the server
- Silent startup, with no user interaction
As JavaScript developers, Electron JS was the obvious choice. It gave us the power of desktop software while still allowing us to work with web technologies.
Technology Stack
🖥 Desktop App (Employee Side)
- Electron JS
- TypeScript
- Electron Forge
- Configured to autostart on system boot
🔌 WebSocket Server
- Node.js
- Express.js
- TypeScript
- Handles all real-time communication
Authentication
We used JWT (JSON Web Tokens) with a shared secret key to manage secure authentication between the desktop app, the WebSocket server, and the receiver application.
WebRTC for Streaming
While WebSocket handles signaling and messaging, the actual media streaming—screen and webcam—is done through WebRTC between the Streamer desktop app and the Receiver app. WebRTC provides low-latency, peer-to-peer communication, which is ideal for handling real-time video and audio without routing it through a central server.
System Overview
- The Electron app and the Receiver app connect to the WebSocket server
- The WebSocket server provides signaling between apps
- The Electron app streams required media to the Receiver app via WebRTC
- Streams are received by the Receiver app for storage and analysis
Reflections
This project took us far beyond regular frontend development. We had to consider system startup behavior, real-time media handling, and low-level application behavior—while still staying within the JavaScript ecosystem.
The most challenging aspect was ensuring the app was stable, silent, and secure—running in the background without user input, and keeping all data within the company's infrastructure.
There's still room for improvement, but the foundation we built with Electron and WebSockets has proven solid and reliable.