• Stars
    star
    317
  • Rank 132,216 (Top 3 %)
  • Language
    JavaScript
  • License
    GNU General Publi...
  • Created over 4 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Playback video in a frameless electron app for screen-sharing and window capture

This is the Electron Capture app,

Created originally for VDO.Ninja 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 live chat overlays on screen, screen share without user interaction, increase the resolution of Zoom streams, and much much more.

Jump to Downloads Section

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.

More benefits listed here

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

Video Guide for Electron

Settings and Parameters

Parameter Alias Description Example values Notes
--width -w Window width 1280 Value in px
--height -h Window height 720 Value in px
--x X position on screen 1 Left side is 1
--y Y position on screen 1 Top side is 1
--pin -p Pin window on top (Takes no values) Display this window always on top.
--url -u Set a custom link on start https://vdo.ninja/?view=aCustomID You can push and pull with single links or rooms.
--title -t Set a custom window title Guest 1 Handy for use with OBS window capture
--node -n Use advanced features true Enable with true. Allows for screen capture, global hotkeys, prompts and more.
--hwa -a Hardware acceleration false Disable with false
--minimized -min start the app minimized
--css -css Pass a CSS file to insert into newly created windows test.css
--chroma -color Pass a 3 or 4 character HEX value to change the background color of websites 0F0C
  • note: Use the --help command to get the most recent available commands and options. While I try to keep the documenation update to date, I'm not always the best at it.

The default frameless resolution of the capture window is 1280x720. The app automatically accounts for high-DPI displays, so it is always 1:1 pixel-accurate with the specified resolution on even Apple Retina displays.

The optional Command Line arguments can be seen as examples below, along with their default values.

elecap.exe --width 1280 --height 720 --url 'https://vdo.ninja/electron' --title 'my Window name' --x 1 --y 1 --node 1

or for example

./elecap -w 1280 -h 720 -u 'https://vdo.ninja/electron' -t 'my Window name' --x 10 --y 10 -n 1

If running from Windows command prompt, any ampersand "&" characters will need to be escaped with a "^" character, as seen below:

C:\Users\Steve\Desktop>elecap -t feed2 --url https://vdo.ninja/?view=ePz9hnx^&scene^&codec=h264^&room=SOMETHINGTEST123

You can also use it like this, if you are in the same folder as the app itself:

elecap.exe --node true --title feed2 --url "https://vdo.ninja/?view=ePz9hnx&scene&codec=h264&room=SOMETHINGTEST123"

If running from a Windows batch file with the goal of launching multiple instances at a time, try the following:

start elecap.exe -t feed1 -u https://vdo.ninja/?view=2P342n5^&scene^&codec=h264^&room=SOMETHINGTEST123
timeout /T 1
start elecap.exe -t feed2 -u https://vdo.ninja/?view=ePz9hnx^&scene^&codec=h264^&room=SOMETHINGTEST123
timeout /T 1
start elecap.exe -t feed3 -u https://vdo.ninja/?view=12342n5^&scene^&codec=h264^&room=SOMETHINGTEST123
timeout /T 1
start elecap.exe -t feed4 -u https://vdo.ninja/?view=eP543hnx^&scene^&codec=h264^&room=SOMETHINGTEST123
timeout /T 1
start elecap.exe -t feed5 -u https://vdo.ninja/?view=432n5^&scene^&codec=h264^&room=SOMETHINGTEST123
timeout /T 1
start elecap.exe -t feed6 -u https://vdo.ninja/?view=eP654x^&scene^&codec=h264^&room=SOMETHINGTEST123
timeout /T 1
start elecap.exe -t feed7 -u https://vdo.ninja/?view=76542n5^&scene^&codec=h264^&room=SOMETHINGTEST123
timeout /T 1
start elecap.exe -t feed8 -u https://vdo.ninja/?view=gfd9hnx^&scene^&codec=h264^&room=SOMETHINGTEST123
  • Please note, do not use double-quotes, rather single-quotes, if needing to enclose text via the command line.
  • Please also note,the use ot timeout /T 1, as adding a delay between loading apps allows them to load correctly
  • x and y position is available in v1.5.2 and up; x or y values must be greater than 0.

If you right-click the application, you'll get a context menu with additional options. Changing resolutions dynamically is an option, for example.

Screen-share, global hotkeys, and user-prompts

screen sharing

Starting with version 1.6.0, to enable screen-share support and some other features, the app needs Node Integration enabled; aka, Elevated Privileges. This will allow remote websites to run node-based code, which is a security concern if visiting untrusted websites.

You can enable Elevated Privileges for the app via the command line with --node 1 or in the app by right-clicking and selecting "Elevate Privileges" from the context-menu. If right-clicking to enable this mode, the app may reload the page afterwards.

A unique feature about the Electron Capture app is that it can auto-select a screen or window when screen-sharing with VDO.Ninja, without user-input. Adding to the VDO.Ninja URL, &ss=1 will select display 1, &ss=2 for the second display, etc. Or specify a window with &ss=window_name_here.

To select Screen 1 automatically on load, for example you can do:

elecap.exe --node 1 --url "https://vdo.ninja/beta/?ss=1&autostart"

or to select Discord automatically

elecap.exe --node 1 --url "https://vdo.ninja/beta/?ss=Discord&autostart"

It's also possible to select audio-only when screen sharing via Electron Capture with VDO.Ninja; you do not need to select a video if you wish to share audio-only.

global hotkeys

Global Hotkeys, such as CTRL+M, are supported. CTRL+M will mute the mic, in the most recently opened window. You can assign a custom global hot-key in VDO.Ninja, and it will be respected by Electron Capture. (VDO.Ninja Settings -> User -> Global Hotkey)

Youtube has a built-in automatic ad-skipper added, and for both Youtube, Twitch, and more, when watching a video, you can full-window the video, allowing for clean video capture. This option is available via the context menu of Electron Capture; just right-click somewhere on the page that is empty and select Clean Video Output.

image

Audio Output

A popular way of outputting audio from the Electron Capture app into OBS is done using a virtual audio cable. Some such cables include:

Mac Audio Options: https://rogueamoeba.com/loopback/ (macOS & non-free, but excellent), and https://existential.audio/blackhole/ (macOS & free) (and more here https://github.com/steveseguin/vdoninja/wiki/FAQ#macaudio)

Windows Audio Option: https://www.vb-audio.com/Cable/ (donationware)

If you intend to have more than a 6 virtual audio cables, you can try VAC instead of VB Cables, as VAC seems to support dozens of virtual audio cables, while VB Cable supports just a few: https://vac.muzychenko.net/

You can also use some advanced URL parameters to output the audio to specific channels. The following link links the parameters and the outcome, based on device/software used: https://docs.google.com/spreadsheets/d/1R-y7xZ2BCn-GzTlwqq63H8lorXecO02DU9Hu4twuhuA/edit?usp=sharing

You can still capture audio via OBS Browser source, appending &novideo to the URL to disable video. Appending &noaudio to the Electron Capture URL would conversely disable audio there, allowing you to capture audio with OBS browser source and video with Electron Capture. The audio/video sync might be slightly off in this setup, but not noticible in most cases.

Changing the audio output device

If you right click the app when on a site, you can change the audio output device for that site. This is useful for setting a Youtube or VDO.Ninja video to output to a virtual audio cable or headphones, rather than playout via the default audio device.

On macOS, this is especially helpful since there is a lack of audio routing controls.

Please note: To use this feature, you will need to elevate the app's privilleges, which can expose the user to security issues on untrusted websites.

Pinning and click-pass thru

You can pin the app on top of other apps via the right-click menu, and when enabled, you can then also enable "click thru" mode also via the context-menu, so no mouse input is captured. The app acts a bit like it is invisible, turning it into a bit of HUD for other applications and games.

If using socialstream or vdo.ninja, you can append &transparent to those URLs to make the background transparent. You can also use custom CSS to make web pages shown semi-transparent, so you can still see underneath.

Once "click thru" mode is enabled, you can re-enable click-capture by just selecting the app via the task bar, as bringing the app into focus will disable the click-thru mode.

Syphon Output

While there is no native Syphon or NDI output option yet available, one user has mentioned a solution for some users: http://www.sigmasix.ch/syphoner/

Automation Workflows with VDO.Ninja

You can see a quick start / cheat sheet guide for example uses of the app with VDO.Ninja here: https://github.com/steveseguin/vdo.ninja/blob/quickstart/automation/cheatsheet_obsn_automation.md

Notes on Using and Closing the App

For Windows users:

  • Right click to bring up the context menu, which allows you to close the app. You can also press ALT-F4 in many cases.

  • You can disable hardware-assisted rendering by passing '-a 0' to the command line when lauching; this can help hide the windows mouse cursor with some setups when using BitBlt capture mode.

  • You can use the Win+Tab key combo on Windows 10 machines to create a secondary desktop and load the Electron Capture into that. In this way, you can hide your electron capture windows, yet still have them be available to OBS for window-capture. This is a great option for window-capturing without on computers with limited desktop screen space.

For Mac users:

  • You can hover your mouse cursor over the top-left corner of the app to show the close button.

  • Also note, the top portion of the app is draggable, so you can move it around to place it accordingly. It is also resizable.

  • Multiple versions of the app can run on macOS; just make a copy of the file with a different name to open up a new window.

  • Desktop audio capture with screen share is not supported by Electron (https://www.electronjs.org/docs/latest/api/desktop-capturer#caveats)

  • You need to enable Screen Capture support in the macOS security preferences for the app to enable desktop capture support on macOS 10.15 Catalina or higher. Yuo also need to enable elevated privillges in the Electron Capture app itself.

  • If capturing the window with OBS, you can use either DISPLAY CAPTURE with a WINDOW CROP -or- WINDOW CAPTURE

--- WINDOW CAPTURE will have a video delay of up to ~800ms, but Windows can be stacked without issue

--- DISPLAY CAPTURE will have no delay, but the windows cannot be stacked, which could be a problem if you only have one screen

Links to downloads below.

You can find the newest release builds of the app here: https://github.com/steveseguin/electroncapture/releases or see below.

Please note that the Electron Capture app does not auto-update to newer versions of Chromium. This can become a security issue if it is left to become out of date. It's also recommended to not use the Electron Capture app with websites and remote VDO.Ninja peers that you do not trust.

Windows Version

There are two versions for Windows. An installer for x64 systems. There's also a portable version, which is larger in size, but supports x64 and x86 (32-bit) systems. The portable version requires no install and is easier to use from the command-line or from a batch file.

New release here: https://github.com/steveseguin/electroncapture/releases/

If you have problems, try a different version or contact me on Discord.

Mac Version

If on version of Electron doesn't work for you all that well, try a different version. There may be some issues with rounded edges depending on you macOS version and the Electron version used.

Linux Version

There are two pre-build versions of Electron Capture available currently. One built for PopOS and another for Raspbian. Those builds are here: https://github.com/steveseguin/electroncapture/releases/tag/2.5.0

For most Linux users though, we're recommending Linux users build it themselves. Details below

Getting the correct nodejs/npm versions can be hard on linux, but using snap can help there.

sudo apt-get update
sudo apt-get install snapd -y
sudo snap install node --classic --channel=16

Next, close the shell and open a new one, to ensure the installation is completed.

To get the actual app source code and to build a distributable version, see below

git clone https://github.com/steveseguin/electroncapture
cd electroncapture
npm install
npm run build:linux

The file you need to run will be in the dist folder.

Building for the Raspberry Pi

If you want to compile on Raspberry Pi, it's possible, but keep in mind the GPU may not work without also patching Electron.js to support the GPU. Currently you'll need to run it without hardware-acceleration disabled, which is rather disappointing. Contributions that can help fix this are welcomed.

Anyways, this is all much like with the Linux install, but we also need to install fpm before trying to build the app.

sudo apt-get update
sudo apt-get install snapd -y
sudo apt-get remove nodejs -y
sudo snap install node --classic --channel=14

 ## close the current terminal shell and open a new one here ##

sudo apt install ruby ruby-dev -y
sudo gem install fpm 

We also need to build the app using build:rpi instead of build:linux, as we need to target ARM versus x64.

git clone https://github.com/steveseguin/electroncapture
cd electroncapture
npm install
npm run build:rpi

You should get a .deb file in the dist file with this option. If you install the deb file, it should appear in the Raspbian start menu, under Other -> ElectronCapture

This will probably file if you do not disable the GPU / hardware-acceration within the Electron Capture app first, but who knows -- maybe you can get it working?

Building from source on Windows

You'll also need nodejs and npm installed.

If on Windows, you can find the NPM/Nodejs install files here: https://nodejs.org/en/download/current/

and then to get the source code for Electron Capture,

git clone https://github.com/steveseguin/electroncapture.git
cd electroncapture

To just run the app from source without building, you can:

npm install
npm start

If you get an error about node versions, you can install the required version with something like this:

npm install -g [email protected]
npm install
npm run build:win32

Building the app from source on macOS :

The basic idea is is to first install node, npm, and git. Then to clone and build the folder:

git clone https://github.com/steveseguin/electroncapture.git
cd electroncapture
npm install -g [email protected]
npm install
npm run build:darwin

If you need to sign the build, for distribution, you can then try:

npm install
export appleId={[email protected]}
export appleIdPassword={app-specific-password-here}
sudo -E npm run build:darwin

Trouble-shooting -- if can't hide cursor when window capturing using OBS:

Change the capture method in OBS to "BitBlt"and uncheck the Capture Cursor. Also make sure OBS runs in compatibility mode for win 7, so you don't get a black screen

image

image

Adding &nocursor to VDO.Ninja will hide the cursor in that browser window, but that often isn't enough. If the above fails, make sure you are window capturing with OBS using the same display adapter for both OBS and the Electron window.

Lastly, if that still doesn't help, you can try Windows + Tab (on windows), and host the Electron Capture app on the secondary windows desktop. Window+Tab back to the main one and select the window then. You may need to toggle between the two desktops after selecting the window to capture, to get it to show in OBS, but it is one way of hiding the mouse.

You can also drag the Electron Capture far off screen, so the cursor can't approach it really.

Issues with dependencies when compiling

Sometimes a dependency won't update to the value stated in the package.json.

This option might be able to update the package.json to the newest version of dependencies automatically,

npx npm-check-updates -u
npm install

Seems to work with newer npm versions

Thank you

"Electron capture is one process that unstable atoms can use to become more stable. " - https://education.jlab.org/glossary/electroncapture.html

More Repositories

1

vdo.ninja

VDO.Ninja is a powerful tool that lets you bring remote video feeds into OBS or other studio software via WebRTC.
HTML
2,755
star
2

social_stream

Consolidate your live social messaging streams and much more
JavaScript
535
star
3

raspberry_ninja

Publish or capture VDO.Ninja streams with Python (Raspberry Pi, Linux, Mac, Windows WSL)
Python
138
star
4

color-grading

Automatic LUT creator for OBS using Color Reference Cards for Calibration
Jupyter Notebook
93
star
5

captionninja

Closed-captioning transcription tool for OBS that generates text overlays using real-time ML.
HTML
87
star
6

chromicam

Turns a website into a Virtual Camera output
Python
24
star
7

websocket_server

A general purpose broadcasting web-socket server, written in node.js. Compatible with v17.3-ninja
JavaScript
22
star
8

Companion-Ninja

Sample web app that allows for remote control of VDO.Ninja using a http or websocket API. Provided API designed to be Companion compatible.
HTML
22
star
9

offline_deployment

VDO.Ninja offline deployment script
JavaScript
22
star
10

chromicast

Python-based WebRTC to NDI tool
Python
19
star
11

vdon_flutter

Mobile app designed to publish in legacy mode to VDO.Ninja; based on the flutter sample app
Makefile
19
star
12

free-wireless-hdmi

Turn your wifi-enabled Camera into a wireless webcam for youtube, etc.
Python
16
star
13

discordbot

The Discord bot for VDO.Ninja
Python
10
star
14

digital-greenscreen

Just some sample prototype green screen code using Tensorflow lite
JavaScript
9
star
15

remote_ninja

Remote control for OBS using a dash of the VDO.Ninja special sauce
HTML
8
star
16

s10capture

Electron Capture app for S10
JavaScript
8
star
17

invite.cam

Code for obfuscating web links; no cookies or API servers needed
JavaScript
7
star
18

versus

Simplified low-latency stream ingestion and monitoring
HTML
7
star
19

ndininja

Chromium to NDI adapter
Python
5
star
20

whip

A VDO.Ninja-specific WHIP/WHEP API and integration wrapper
JavaScript
4
star
21

cryo

A Chromium-derived browser tweaked and tested for stable streaming performance.
JavaScript
4
star
22

powerpoint_remote

Remotely control PowerPoint slides with the power of VDO.Ninja, Autohokey, and MIDI.
AutoHotkey
3
star
23

pink-noise-generator

Plays full-spectrum pink noise in the browser. Simple.
HTML
3
star
24

problems-with-webRTC

A collection of issues limiting webRTC's adoption
3
star
25

BluBerry-Backup

Turn a Google Photos takeout dump into image galleries ready for burning to Bluray BD-R discs!๐Ÿ–ผ๏ธโžก๏ธ๐Ÿ’ฟ
Python
3
star
26

web3_vdoninja_sample

A web3 version of VDO Ninja
JavaScript
3
star
27

comms.cam

Communication web app for multi-group voice chat
HTML
3
star
28

2DOF-PI-WebRTC-Camera

IoT camera for multiple consumers using Azure IoT, IoTCentral, WebRTC and vdo.ninja
Python
2
star
29

Simple-Wordpress-Hubspot-Form-Submission-Plugin

Free Wordpress and HubSpot plugin for contact creation via Form Submission
CSS
2
star
30

guides.vdo.ninja

Guides page for VDO.Ninja
SCSS
2
star
31

hide-cursor

Autohotkey v2 script to toggle the mouse cursor on and off in Windows
AutoHotkey
2
star
32

nginx

deployment script for nginx, rtmp, lua, ssl ; onto ubuntu 16.04
XSLT
2
star
33

windows-security-analyzer

PowerShell
2
star
34

skindeep.ai

1
star
35

ooblex

Ooblex Public Resources
JavaScript
1
star
36

remove-ads

remove or ad adds to a website; get a short link and share
Hack
1
star
37

gps-pet-tracker

a GPS + Ardunio + Radio transmitter for local tracking of my cat
C++
1
star
38

sex-on-meals

A dating site based around events rather than profiles
PHP
1
star
39

tokencount

Counts the number of tokens in text/code
HTML
1
star
40

iMessage2Slack

Forward iMessages from OSX to Slack
Python
1
star
41

patenator

Terminating Patents with Open Ideas
PHP
1
star
42

fair-competition-platform-markets-act

Fair Competition in Platform Markets Act 2024
1
star
43

code_cleaner

removes comments and blank lines from javascript/python code
HTML
1
star