Skip to content

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

Notifications You must be signed in to change notification settings

SuppliedOrange/greenscreen-subtitles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Branches

Electron Branch: Launches an electron app (for window captures)

^ You are here

Website with websockets branch: 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:

ezgif-7-0bbbd241f6 NVIDIA_Share_gji0puXL50 image

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 . 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
{ "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. image

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published