Electroncapture
Playback video in a frameless electron app for screen-sharing and window capture
Install / Use
/learn @steveseguin/ElectroncaptureREADME
This is the Electron Capture app,
Created originally for <a href="https://vdo.ninja">VDO.Ninja</a> users, it can provide users a clean way of window capturing websites or as a production-oriented Chrome-alternative with numerous performance tweaks. It can also be used to pin <a href="https://socialstream.ninja">live chat overlays</a> on screen, screen share without user interaction, increase the resolution of Zoom streams, and much much more.
<a href="https://github.com/steveseguin/electroncapture#links-to-downloads-below">Jump to Downloads Section</a>
<img src="https://user-images.githubusercontent.com/2575698/121296394-94292d00-c8be-11eb-908e-638e5616691a.png " alt="" data-canonical-src="https://user-images.githubusercontent.com/2575698/121296394-94292d00-c8be-11eb-908e-638e5616691a.png" style="display:inline-block" height="300" />Why was this made ?
On some systems the OBS Browser Source plugin isn't available or doesn't work all that well, so this tool was made as a viable agnostic alternative. It was originally built to let you cleanly screen-grab just a video stream without the need of the OBS Browser Source plugin. The app was also made to make selecting the output audio playback device easy, outputting audio to something such as a Virtual Audio device: ie) https://vb-audio.com/Cable/ (Windows & macOS; donationware) or VAC (Windows @ https://vac.muzychenko.net/), or Loopback (macOS).
While the OBS Browser source is ever maturing, and issues with video smearing, crashing, and dropped audio are far less common these days, there are still user reports of desync issues and other mishaps with OBS browser sources. As a result, Electron Capture remains the preference for many professional VDO.Ninja users, and over time it has evolved to offer additional solutions for many different use cases in the video production world.
The app can be set to remain on top of other windows, can hide the mouse cursor when possible, provides accurate window sizes options for 1:1 pixel mapping, and supports global system hotkeys (CTRL+M on Windows, for example). It also offers relatively low-CPU usage, command-line launch tools, built-in recording options, and it won't crash if OBS crashes. It may be worth exploring before your next production.
The Electron Capture app uses recent versions of Chromium, and is setup to more resistant to desync, video smearing, and other issues that might exist in the native OBS browser source capture method. If a cutting edge web feature becomes available within browsers, it will also become available to Electron Capture first, making certain experimental features within VDO.Ninja accessible. The app is also optimized to not throttle when the system is stressed, ensuring that production-critical web-oriented code and media does not slow down or stop when its most needed.
For non-VDO.Ninja users, the window-sharing focus of Electron Capture is also useful for Zoom or other users. For example, when screen sharing it into Zoom, the published video will be high-resolution, since Zoom publishes virtual webcam and other camera streams at lower quality compared to screen shares. You can screen share websites without the browser frame, search history, or nav bar from appearing. When doing a Power Point presentation, you can screen share the window via Electron Capture, while also pinning the it in place on top, avoiding having to toggle between multiple windows as you present.
Lastly, since playback is agnostic, you can window-capture the same video multiple times, using one copy in a mixed-down live stream, while using a window-capture to record a clean full-resolution isolated video stream. Both YouTube, Twitch, Facebook, and more are supported in this regard, where a full-window clean output option is available for those sites as well. There's even optimizations for sites like Twitch, letting you easily full-window any video on the page, without overlays or other effects from appearing.
Video guide on how to use Electron Capture
Custom Electron Build (QP20)
- The pipeline now targets the custom binaries published on
steveseguin/electronunder thev36.9.5-qp20tag. Duringnpm installourpostinstallhook (scripts/install-custom-electron.js) replaces the stock Electron bits with the patched archive that clamps QP to 0-20 and enables NVENC. - Requirements: Node.js ≥ 18, git, and network access to GitHub Releases. From PowerShell or WSL run
npm install(ornpm ci) at the repo root; the hook pullselectron-v36.9.5-qp20-${platform}-${arch}.zip(Linux:linux-x64, Windows:win32-x64), unpacks it intonode_modules/electron/dist, and stamps.custom-versionso reinstalls are skipped. - Verify with
node scripts/install-custom-electron.js(re-runs the hook) or by checkingnode_modules/electron/dist/.custom-version—it should read36.9.5-qp20. At runtimenpx electron --versionwill still report the upstream package version, but the bundled bits are the custom build. - Building for Windows uses the same commands as before (
npm run build:win32). The newbuild.electronVersionmetadata keeps the generated installer aligned with the custom runtime. - To fall back to stock Electron set
CUSTOM_ELECTRON_SKIP=1before installing, or deletenode_modules/electron/distand reinstall.
Settings and Parameters
| Parameter | Alias | Description | Example values | Notes | |-------------------|-----------|-------------------------------------------------|-----------------------------------|------------------------------------------------| | --width | -w | The width of the window in pixels. | 1280 | Value in px | | --height | -h | The height of the window in pixels. | 720 | Value in px | | --x | -x | The x-position of the window in pixels. | 100 | Value in px | | --y | -y | The y-position of the window in pixels. | 100 | Value in px | | --url | -u | The URL of the window to load. | "https://vdo.ninja/electron" | | | --title | -t | The default Title for the app Window. | "My App" | Handy for use with OBS window capture | | --pin | -p | Enables always on top. | | | | --hwa | -a | Enables Hardware Acceleration. | | | | --node | -n | Enables node-integration. | | Required for screen capture, global hotkeys, etc. | | --minimized | --min | Starts the window minimized. | | | | --fullscreen | -f | Enables full-screen mode for the first window on its load. | | | | --unclickable | --uc | The page will pass through any mouse clicks or other mouse events. | | | | --savefolder | --sf | Where to save a file on disk. | "/path/to/folder" | | | --mediafoundation | --mf | Enables media foundation video capture. | | | | --disablemediafoundation | --dmf | Disables media foundation video capture; helps capture some webcams. | | | | --chroma | --color | Set background CSS to target hex color. | "FFF" or "0000" | | | --js | -js | Have local JavaScript script be auto-loaded into every page | "script.js" | Path to JavaScript file to inject | | --css | -css | Have local CSS script be auto-loaded into every page | "style.css" | Path to CSS file to inject | | --hidecursor | -hc | Hide the mouse pointer / cursor | | | | --monitor | -m | Monitor index to open on (0-based index) | 0 | Select which monitor to display on | | --disableAdaptiveScaling | --noScaling | Disable WebRTC adaptive scaling (lock resolution + framerate) | | Custom Electron build only (v39.2.7+) | | --lockResolution | --lockRes | Lock WebRTC resolution only (framerate can adapt) | | Custom Electron build only (v39.2.7+) | | --lockFramerate | --lockFps | Lock WebRTC framerate only (resolution can adapt) | | Custom Electron build only (v39.2.7+) | | --hideCursorCapture | --noCursor | Hide cursor in screen capture by default |

