Tutorial: How to control OBS via OpenLP custom stage view

2

Comments

  • edited May 2021


    Hi,

    Recently downloaded it stage view and testing with OpenLP 2.4.6; it's really functionaly.

    I just had to change some lines and yeah it's working with OpenLP 2.9.2 + obs. You need only configure all as fiveofsix says and uncompress the attached file on your stage path.

    Enjoy.

    - - - - - - - - Update attahed file - - - - - - -

    My apologies, previous file is wrong, use last updated.

  • @michaelbishop yes I posted the update to the OpenLP custom view that works with the 2.9.x Beta version. It does use a websocket to talk to OpenLP. I did not complete the conversion to API version 2 for OpenLP, but have tested the custom stage view over several Worship services, and continue to use it.

  • @NorfolkGreg If it is working, leave it alone! When you upgrade to the next version of OpenLP, you may have to change a port number, but until then you should not have to change ports.

  • @michaelbishop OpenLP 2.9.2 still supports the old API so your script should still work. I'd recommend updating to use websockets but it's not necessary. There are a few posts around on the form if your looking for examples. There is also some documentation on how to use the websockets API here: https://gitlab.com/openlp/wiki/-/wikis/Documentation/websockets

  • Thanks @JohnM and @ninjakiwi - I will play around with it a bit more and see I can update it

  • Need help as I have not been able get control of OBS from openlp.

    I am running on a windows 10 machine. Both Openlp 2.4.6 and OBS 27.0.1 (64 bit) are installed on the same computer. OBS-websocket 4.9.1 is installed.

    As per instructions above, I have a scene with a browser source named 'lyrics'.

    When I look at OBS log, I'm not getting any connection from Openlp.

    What could be wrong?

  • @BillC With OpenLP version 2.4.6 you need to use the original files from this discussion. Start by setting up the OpenLP OBS stage. Make sure you can launch OpenLP and open the stage view in a browser. As you move through a service in OpenLP the stage view should change and update right along the with the live output from OpenLP. Once the stage view is operating, then we can look at the OBS part of the process.

  • JohnM, thanks for your quick response.

    The custom stage view is working.

  • @BillC The next step is to install the OBS websocket. As I remember it there are two basic methods. How did you install the OBS websocket? And be sure to enable the websock alerts. The alerts tell you every time OBS receives a change scene command from OpenLP.


    One more question. How do you want to use OpenLP to control OBS? By default, the stage view will tell OBS to change to a song scene when the lyrics property of a service item is set to yes...like when the service item is a song. If this is all you want, it should work correctly provided you have the scene named correctly. As an example if you have a scene in OBS that is named 'alter' you can put "scenechange:altar" into the notes of a service item and it will change to that scene when the first slide of the service item is displayed on the live screen.

  • I installed the obs-websocket using the windows installer from the obs-websocket github releases page.

    I don't understand how to enable websocket alerts. Is it a matter of setting the checkbox on the websockets server dialog?

    I intend to use the websocket to automatically change scene when moving to an openlp item have a not that defines what scene obs should show. Also to show lower third lyrics for songs.

  • @BillC On the menu you put in your last message, check the box next to "Enable System Tray Alerts" This will give you a message every time OBS gets told to change screens....normally very often! Once you know OpenLP and OBS are talking you will want to uncheck this box, but leave it on for the moment.

    At this point I would put a few items in the service in OpenLP and add notes to each item. The note is a simple message to OBS, 'scenechange:Bible' would be the message to change to a scene in OBS that is titled "Bible".

    Next open the stage view in a web browser. With OpenLP open and OBS open and the web browser with the OBS stage view, double click on the first service item in OpenLP. OBS should see a message and move to the scene in the notes for the first item. Move through the service double clicking on other items and each time it should move to the scene in the notes for that item.

  • JohnM, I don't see any evidence that Openlp and OBS are communicating. The OBS stage view shows the items, but song lyrics start at top of view, not lower 1/3. I looked at the obs log and there are no inputs coming from Openlp. My javascript knowledge is almost zero. I found on the obs-websocket how to communicate to OBS using python. I was able to make a quick python program to change a scene in OBS, that worked fine. Thus I am confident the obs-websocket is installed correctly.

    Next step?

  • @BillC Ok it does sound like something is wrong with your OpenLP stage view setup. The URL in the browser for the stage view should look like http://xxx.xxx.xxx.xxx:4316/stage/obs. Most of it can be found by going into settings and looking at the remote page. The xxx is just a placeholder for whatever you IP address is.

    Assuming you are trying to look at the right stage view, the next step is to look at the OBS directory under the Data/stages directory. Open OpenLP and use the "Tools" menu to open the data folder. Now open the stages directory and open the OBS directory. There should be 4 files in this directory.

    1. obs-websocket.js
    2. stage.css
    3. stage.js
    4. stage.html

    Open the stage.js file with notepad. Scroll all the way to the last 2 lines. They should be:

    setIntrerval("OpenLP.pollServer();", 500);

    OpenLP.pollServer();

    If the last 2 lines are not like the above, you have the wrong set of files. There are 2 versions. One works on OpenLP version 2.4.6 and the other works for version 2.9.x, but they are not interchangeable!

  • JohnM, the last 2 lines of stage.js are as you state.

    Just to give you a bit more info, the four files you mention are in a folder as follows:

    I do not understand the contents of stage .html, it uses the "stage" where I would expect "stages" to match the file folder.

    <head>

     <meta charset="utf-8" />

     <title>${stage_title}</title>

     <link rel="stylesheet" href="/stage/obs/stage.css" />

     <link rel="shortcut icon" type="image/x-icon" href="/files/images/favicon.ico">

     <script type="text/javascript" src="/files/jquery.min.js"></script>

     <script type="text/javascript" src="/stage/obs/stage.js"></script>

     <script type="text/javascript" src="/stage/obs/obs-websocket.js"></script>

    </head>

    <body>

    <div id="currentslide"></div>

    </body>

    </html>


    As I've been trying to think of possible causes, it occurred to me that it has been some time since you installed the obs-websocket and likely you have an earlier version. Do you think it likely that something in the later version of obs-websocket or the obs-websocket.js has changed and that is what is causing my installation to not function correctly?


    JohnM, I really appreciate the guidance and the time you have spent helping me.

  • @BillC Your stage.html is the same as the one I use. The use of stage in the path is correct.

    Open the obs-websocket.js file in notepad. On the right of the second line, mine says it is v4.0.2 . If yours is the same we can assume it is the correct version.

    Lets verify you are seeing the obs stage view. Go into settings on OpenLP and open the Remote page. Double click on the link for the stage view. It should look something like this...assuming you are displaying something to the live screen.

    If you saw something like the above we can assume the custom stages are working.

    Now click on the URL and add /obs to the URL and press enter. Do you see something like this?

    If not here is a copy of my OBS stage view directory.


    You should be able to extract this to your stages directory....you may need to rename your current obs directory before extracting this one.

  • JohnM, you are certainly a patient man.

    This time I can report progress.

    The obs stage view now "looks" correct, have song lyrics at lower 1/3.

    I used an item with a note for "scenechange" that is now working.

    Still I am not seeing the lyrics on OBS,

    I'm going back to reread instructions from fiveofsix.

  • JohM, At last I can see the lyrics at lower 1/3 in OBS.

    Just one issue now. when I look at the lyric, openlp stage view obs in a browser, Firefox or Edge, the lyrics are white text on a grey background, while in OBS they are white on black.

    How to correct as I prefer the grey backgound?

  • @BillC I am afraid you have gone beyond my knowledge. I know you can modify the colors in the .css file in the obs directory, but I think the issue is with OBS because the browsers show the right colors. OBS does have it's own default colors, right click on the web page capture for the scene you are on and there is an item on the menu that might help.

    Myself I would spend some time making wild color changes in the .css file to see if you get any changes in OBS. If nothing changes, then you may need to talk to the OBS community to see if this is something they know about.

  • JohnM, I just figured it out. To change the background color of the lyrics edit line 37 of stage.css.

    The function rgba sets the color and transparency of the text.

    Examples: rgba(0,0,0,.5) makes a slightly dark background that is transparent to show any image below.

    rgba(100,100,100,1) makes a medium grey opaque background

    rgba(255,0,0,1) makes a bright red opaque background.

    I was initially stumped because to see the changes in OBS you must close and restart it.

    I was making changes but did not see OBS reflect those changes.

    You have been a great help. Since it is Saturday, I'll wait a week before implementing the custom stage view.

  • Hi all, I've been reading through this thread and trying to figure out how to make this work for our church. I've got all this stuff installed, and trying to figure out the architecture theory.


    I want to be able to make OBS change the active scene automatically when an OpenLP slide is changed.


    I have the advanced scene switcher plugin running, with various scenes and cameras running through a sequence based on time. For instance: scene 1 is a ptz camera input for our pastor. Scene 2 is a split input with that camera and a openlp browser input for slides. The scene switcher runs automatically, 3 mins on pastor only and 1 min on pastor/slides. I want to have the switcher be interrupted and switch to a slide scene when a slide is changed, if its on a scene with just the pastor.


    Any thoughts on this or if its even been done? I've got the openlp dock switching slides from obs-openlp, but i want it the other direction. The browser input scene works fine for showing slides.


    Help!!

  • The advanced scene switcher dev commented and showed me how to fix the above question with macros in the plug in itself:


    https://obsproject.com/forum/threads/advanced-scene-switcher.48264/post-547683

  • Huge thanks to @fiveofsix for creating this!

    Additionally: huge thanks to @JohnM for providing the OBS.zip

    I don't know what I did wrong. I don't know what you did right. All I know is that after spending quite some time fiddling with settings: using that zip fixed it for me. Thanks!!!

  • edited June 2022

    Hi I've got it almost totally working, including switching to a mirror scene when viewing slides and switching to lyrics when viewing songs.

    But I can't get OBS to switch scenes when I click "blank screen" in OpenLP, it doesn't change scenes until I change a slide:

       // If OpenLP is showing custom text slides, then switch to "Lyrics"

       if(OpenLP.currentPlugin == 'custom slides') {

        OpenLP.obsHandler.send('SetCurrentScene', {'scene-name': 'Lyrics'});

       }

       // If OpenLP is blank, then switch to "Camera Only"

       if(OpenLP.currentlyShowing == 'blank') {

        OpenLP.obsHandler.send('SetCurrentScene', {'scene-name': 'Camera'});

       }

    Clicking "blank" doesn't take affect until I change a slide. Is there any way to fix this?

    Attached is my stage.js file (zipped up).

Sign In or Register to comment.