Advanced customization of custom stage displays

LukeTacyn · July 2020

Hey all, long time OpenLP user, huge fan and first-time poster on the forums here. My church and I are currently looking to start live streaming our services from church, and are looking for ways to integrate OpenLP in our broadcasts. Currently, I have set up a custom stage view, and have plugged that URL into a browser source in our streaming software (OBS for those interested).

So far everything is working great, however, the only thing I am missing is the ability to add song footer info and Bible references in a custom stage view. Has anybody been able to do this yet? I have searched around and I have not found anything

My hacked-together solution at the moment is to also grab a browser source of the main display (:4316/main) and just crop out the song lyrics, so I am left with just the footer. Then I simply overlay it on top of my custom stage view in OBS. The reason this is not ideal is that I can't easily tweak the main display without it messing up what appears on the projectors for those physically in the church.

It works, but if I can get the stage display working properly it opens up so many possibilities on how we can customize the look and feel of our live streams.

I am quite handy with HTML and CSS (and know a little bit about JS) so I can probably custom code something, but I have no idea where I should even be starting. Does anyone have a solution for this, or can point me in the right direction?

Thanks all!

Dorhero · July 2020

I'm not sure I'm following exactly what you're trying to do, but I use OBS to display onto the projectors for those attending. I would think you should also be able to use "Display Capture" or "Window Capture" to get Openlp into a scene. The response time is pretty fast.

I found that using browser source has lag that is unacceptable for streaming.

I'm currently using two computers to do this but we were doing it with only one before our main media computer died. OBS allows me to combine a scene from Openlp along with a camera for lower thirds and PIP.

You might want to research Chroma Key in OBS as that might get you closer to a solution.

I'm not sure how that could help you, but I'd be happy to help you figure out how to get it done.

God bless!

LukeTacyn · July 2020

Thanks for replying, I appreciate your input! OpenLP offers a good amount of options in the theme creator wizard, and the formatting tags unlocks a lot of possibilities, but customizing stage views is something that has to be done in custom code. While OBS does allow a lot of customization, I don't think it'll work for what I am trying to do.

Image: https://forums.openlp.org/uploads/editor/0d/9757fttgb8w1.jpg

I have attached an image of what I have so far, which may explain better what I am trying to achieve. Really I just want more control of what OpenLP outputs by using HTML and CSS. Building a custom stage view allows this. The only thing a custom stage view does not display are things you would normally find in the footer, such as the bible reference or song title & copyright info. Is there any code that exists to do this? Do I need to dive into the API and javascript to retrieve this data?

I know what I am asking is not straight forward and simple, but I think if we can solve this it will create a ton of possibilities and options for those looking for customized live stream layouts, helping those who are hard of sight would allow custom views for each role in running a service.

If anyone has done anything similar or knows where I should start looking I would really appreciate a heads up about it!

Thanks again all!

fiveofsix · July 2020

As far as I understand it, OpenLP does not pass this kind of meta-information to the stages view. All the information about the current song is sent to an api handler at

http://localhost:4316/api/controller/live/text

If you want to display the information you need, I think you have to dig into the python code of the application itself. The point where I would start, is a script inside the application in the plugins/remotes folder. On the Mac the full path is:

/Applications/OpenLP.app/Contents/MacOS/plugins/remotes/lib/httprouter.py

There in the lines 545-550 you find the routine that passes the text over to the server.

if current_item.is_text():
  if frame['verseTag']:
    item['tag'] = str(frame['verseTag'])
  else:
    item['tag'] = str(index + 1)
  item['text'] = str(frame['text'])
  item['html'] = str(frame['html'])

You would have to find out, if “current_item” has all the song information stored somewhere, and then include that information in the variable “data” (see line 539). Then – I hope – OpenLP would pass the information over to the API and you could read it out via JavaScript.

Unfortunately I have never done anything in Python, so I can’t really help from here.

PS. While you’re there, have a look at the lines 30-106. There you have all the API handlers listed. So if you would want to program your own control interface, that’s where to find the information.

JohnM · July 2020

@LukeTacyn I ran into this issue sometime back and decided to take a different path. I put OBS with NDI support on both computers. I open OBS on the OpenLP computer and do a screen capture of the output screen of OpenLP. Don't tell it to stream anything....NDI outputs 2 streams by default. Then on the second computer I create a NDI capture inside OBS. Now I can overlay the NDI screen capture of the OpenLP output screen when needed. This is a workaround and may not help in your situation....

LukeTacyn · July 2020

@fiveofsix thanks for that, it got very complicated very quickly! I have never touched Python before, so I'll have a look and see how quickly I get overwhelmed with it.

@JohnM That's a really good hack, and would possibly solve another problem we may run into. I'll 100% test this and see how it works. My only worry is the PC handling OpenLP (and powering the projector) is an older PC, I'll have to see how it handles running OBS and hosting OpenLP as normal.

At the moment I have a bit of a solution, but it's still not the perfect solution. I can place the copyright info inside notes for each song. This would have to be done manually for each song added to the service. I can then call that in HTML (and style it in CSS) by using: "<div id="notes"></div>"

I'll spend the next few days trying out the NDI solution John offered, and take a look at if I can pull anything out of the API to get a bit more advanced with my solution. Thanks again for all your suggestions!

JohnM · July 2020

@LukeTacyn ; NDI has a free tool kit that uses even less resources, but I never got it to capture the output screen to my satisfaction.....OBS with NDI is more stable...good luck

johnverz · August 2021

I got this idea from fiveofsix.

You have to edit the said file httprouter.py in /Applications/OpenLP.app/Contents/MacOS/plugins/remotes/lib/httprouter.py.

If you are using the 2.4 version, it's in line 579.

Just add these code:

and then when you access the api (your-IP/api/controller/live/text) you'll get another item on the json array which is the title:

fiveofsix · August 2021

That’s awesome! I have to try it out.

fiveofsix · August 2021

@johnverz Sadly it doesn’t work for me. It doesn’t seem to update the script. Whatever I change in the httprouter.py file, OpenLP does not interpret it. Do I have to tell it to explicitely look for changes in the scripts?

Advanced customization of custom stage displays

Comments