https://github.com/suppliedorange/greenscreen-subtitles
a website/electron app for displaying subtitles/text on a green-screen
https://github.com/suppliedorange/greenscreen-subtitles
chroma-key chromakey electron green-screen greenscreen obs-studio subtitles
Last synced: about 2 months ago
JSON representation
a website/electron app for displaying subtitles/text on a green-screen
- Host: GitHub
- URL: https://github.com/suppliedorange/greenscreen-subtitles
- Owner: SuppliedOrange
- Created: 2024-03-06T00:24:41.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-18T11:44:53.000Z (10 months ago)
- Last Synced: 2025-03-26T17:53:52.507Z (about 2 months ago)
- Topics: chroma-key, chromakey, electron, green-screen, greenscreen, obs-studio, subtitles
- Language: JavaScript
- Homepage:
- Size: 81.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Branches
### [Electron Branch](https://github.com/SuppliedOrange/greenscreen-subtitles/tree/main): Launches an electron app (for window captures)
^ You are here
### [Website with websockets branch](https://github.com/SuppliedOrange/greenscreen-subtitles/tree/websocket): Initializes as a website with websockets (for browser sources)
# Green Screen Subtitles on Electron
This hosts an electron app on your pc with a green screen and subtitles/any text that be updated via an endpoint.
# My use case:
Backup Links of media resources: [1](https://i.imgur.com/l0cxH8c.gif) [2](https://i.imgur.com/3twdxFe.gif) [3](https://i.imgur.com/rBfbTGR.gif)
I use this on OBS for streaming with a chroma key. My speech is converted to text and is sent to this app.
# How to build:
+ Download the repo, run `npm install` in the directory.
+ Run `npm install electron -g` and install electron globally.
+ Run `electron .` or `npm start` in the directory to start the server.
# How to use:
Send a request to `http://127.0.0.1:4999/update_subtitles` with a post request in the form of
```json
JSON
{ "text": "Your text here" }
```
# Example usage
This is how I do it in python:
```py
import requests
url = 'http://127.0.0.1:4999/update_subtitles'
try:
res = requests.post( url, json={ 'text': text } )
res = res.json()
try:
if res["success"]: print("Finish!")
else: print(res["error"])
except Exception as e: print("Error while reading data recieved from server\n" + str(e))
except requests.ConnectionError: print( "Could not connect to subtitle server. Is the server running?" )
except Exception as e: print("Could not establish connection with subtitle server\n" + str(e))
```
Use `setter.py` included with the repo to have a cli-based interface specifically for this.
+ `setter.py -t "new text"` updates the text with your args
+ `setter.py -u` runs in interactive mode
# OBS
Choose window capture and capture the electron app (should show up as `[electron.exe]: Electron`)
Go to filters and enable chroma key and crop/pad the top by 24.
It should work as intended.
## Notes:
I made this for myself, for my specific use case- which means you may encounter problems. Make an [issue](https://github.com/SuppliedOrange/greenscreen-subtitles/issues/new) if you run into problems along with your device info
You may also simply use text files instead of this method unless you want the freedom to use effects on your texts