Feature Request: Chroma Key Stage View

Ferman

Hey everyone!
I have been working with OBS a lot for live streaming and though of something that could be an amazing featured that is apart of the Browser Stage view. Right now you have Main stage view http://localhost:4316/main which is super cool. My idea would be to have http://localhost:4316/chroma where it takes the text within OpenLP and removes the default theme background and makes it green. That way I can run a chroma key filter to remove the background and have the Song words and speaking notes displayed over my videos.

tgc

If you know your way around JavaScript and CSS you could try creating a custom stage view: http://manual.openlp.org/stage_view.html#custom-stage-views
Feel free to share the result :-)

Ferman

Oh wow! I didn't see that. I will definitely give it a shot and report back!

Ferman

Wow that was the easiest thing in the world. Attached is a quick and dirty version. Here is a screenshot as well.

Ferman

The next thing I want to do is see if I can create stage view that will show images and videos playing in the web browser so I can switch OBS to just show a full screen of the slide itself playing.

tgc

Unfortunately it is not currently possible to access the video from the stage view. I also don't think images are available...
This might change in the next version where the remote API has been rewritten...

Ferman

The main view shows all slides as images which means everything except videos will show up. In OBS I can easily add the main view as a browser source in a different OBS scene that will just show the active slides. And then if I want to show a video I just do a screen capture of the projector itself as another scene.

This will allow me to have a scene that a camera showing the live services with an overlay of text from Custom Slides, Bible verses, and songs. I then have a scene that is just the main view showing the full themed slide which lets images work as well. I guess I could remove that scene of the main view since I would plan on capturing the screen of the projector anyways and use that as my second scene to show any images/videos in my recording.

OpenLP fits all of my needs now.

mhalbrook

Never realized it was that easy to make  a new stage view.  I presume if I create one,it doesn't overwrite in updates like if I modify the CSS?  That's the one thing that I have to do when I upgrade in the past.  Also thanks for sharing your Chroma setup, nice to see people give back in Open Source projects  

Ferman

@mhalbrook since it is a custom stage view, updates should not effect it. I am more than happy to share it! This solution is a HUGE benefit to OpenLP and churches trying to record sermons.

I am trying to convince them to create something like this by default for the 3.0 release.

newidea

Hey guys,

I'm glad to found this topic. If I blank a song, the chroma view doesn't blank. How to solve this?

Luke

davehillegass

You can try something like this in yourt stage.js file.  The bold sections are what is important.  I cleaned mine up a bit in the view I display into OBS.

window.OpenLP = {

  loadService: function (event) {

    $.getJSON(

      "/api/service/list",

      function (data, status) {

        OpenLP.itemFooter = "";

        for (idx in data.results.items) {

          idx = parseInt(idx, 10);

          if (data.results.items[idx]["selected"]) {

              OpenLP.itemFooter = data.results.items[idx]["title"];

  if("" != data.results.items[idx]["notes"])

OpenLP.itemFooter += " - " + data.results.items[idx]["notes"];

            break;

          }

        }

        OpenLP.updateSlide();

      }

    );

  },

  loadSlides: function (event) {

    $.getJSON(

      "/api/controller/live/text",

      function (data, status) {

        OpenLP.currentSlides = data.results.slides;

        OpenLP.currentSlide = 0;

        $.each(data.results.slides, function(idx, slide) {

          if (slide["selected"])

            OpenLP.currentSlide = idx;

        })

        OpenLP.loadService();

      }

    );

  },

  updateSlide: function() {

  if (OpenLP.currentTheme || OpenLP.currentBlank)

  $("#currentslide").html("");

  else {

// Show the current slide if displayed

var slide = OpenLP.currentSlides[OpenLP.currentSlide];

var text = "";

text += slide["text"];

// Show the Song or Scripture Title

//text += "<br /><div id='itemFooter'>" + OpenLP.itemFooter + "</div>";

text = text.replace(/\n/g, "<br />");

$("#currentslide").html(text);

text = "";

  }

  },

  pollServer: function () {

    $.getJSON(

      "/api/poll",

      function (data, status) {

        if (OpenLP.currentItem != data.results.item ||

            OpenLP.currentService != data.results.service) {

          OpenLP.currentItem = data.results.item;

          OpenLP.currentService = data.results.service;

  OpenLP.currentTheme = data.results.theme;

  OpenLP.currentBlank = data.results.blank;

          OpenLP.loadSlides();

        }

        else if (OpenLP.currentSlide != data.results.slide) {

          OpenLP.currentSlide = parseInt(data.results.slide, 10);

          OpenLP.updateSlide();

        }

else if (OpenLP.currentTheme != data.results.theme  ||

OpenLP.currentBlank != data.results.blank) {

  OpenLP.currentTheme = data.results.theme;

  OpenLP.currentBlank = data.results.blank;

  OpenLP.updateSlide();

}

      }

    );

  }

}

$.ajaxSetup({ cache: false });

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

OpenLP.pollServer();

newidea

Yeah, thanks a lot!

Now, it's perfect for OBS.

Luke

Ferman

@davehillegass that's super awesome!!! We definitely need to get this pushed into production.

newidea

How can I remove the text, when I show pdfs, jpgs, pptx, video files?

I want to use this view only for song texts.

Kavode

Thought someone could use our solution to this problem.  We use openlp and a custom stage view to import lyrics into Vmix.  We took Ferman's orginal files and changed the CSS file to this

#currentslide {

width: 900px;

height: 260px;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

vertical-align: middle;

border: 4px solid white;

background: rgba(0, 0, 0, 0.35);

font-size: 35pt;

color: white;

padding: 25px;

position: absolute;

left: 50%;

bottom: 0px;

-webkit-transform: translateX(-50%);

transform: translateX(-50%)

}

This give us a nice outlined text box with a semi transparent background and white text all centered on the bottom of the screen.

  

Ferman

@Kavode this looks soooo good!