SuppliedOrange / greenscreen-subtitles

an electron app for displaying subtitles/text on a green-screen

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 2 3

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 . 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
{ "text": "Your text here" }

Example usage

This is how I do it in python:

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 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