vinproma
vMix Input Progress Monitor App (shortened: vinproma) built with ElectronJS. ElectronJS is a cross-platform framework allowing the app to be built for each Windows, Mac or Linux.
The app allows simple monitoring of realtime progress of the current playing video or audio track. The input in preview can also be to monitored in the HTML view.
You are free to clone the repository to develop your own app based in this code.
Feature summary
- Read progress of current input in program
- HTML view: View progress as a HTML page
- Linear progress or circular
- Light or dark mode
- vMix title mode: Send progress to a vMix title input of your choice
- Multiple types of data to send
- Ability to setup multiple "destinations"
- Ability to enable Delay compensation
Downloads
See the Releases tab for a direct download of the app for Mac and Windows.
App overview
HTML view (Linear or circular)
Project architecture
The project consists of several components. The app is built with Electron, meaning that the app can be compiled for Windows, Mac or Linux.
The Electron frontend (also called "Renderer") serves the purpose of fetching info from a vMix instance, and letting the user see the state of the vMix instance connection and other settings.
A web server lives on the backend side of the Electron app, serving requests from the users on port 8095. The web server includes a web socket server, serving flowing real time TCP/IP data to the connected clients/browsers.
The web server communicates with the Electron frontend app, where practically realtime data from the vMix instances is passed as following:
Electron renderer process → (via IPC) → Electron main process → Web server → (via Web Socket) → Web clients
Known issues
When running in development mode you can experience loss of connection to the vMix instance after some minutes.
Roadmap
- Add XAML template
Project setup
Install dependencies (based on package.json)
yarn
Compiles and hot-reloads for development
yarn electron:serve
Compiles and minifies for production
yarn electron:build
Lints and fixes files
yarn lint
Web frontend assets
Note that in src/web-frontend there is also source code for the compiled assets for the web frontend. You should also install the dependencies for this by running
cd src/web-frontend
yarn
Compiles and hot-reloads for development
yarn watch
There is also a alias for this in the main package.json:
yarn web-assets-watch
And also before building the Electron app, a command to build web frontend assets for production can be run:
yarn web-assets-prod