Tag: video

Sharing ProPresenter lyrics to multiple clients through the web browser in real time using Node.js, socket.io, and Amazon EC2

Posted on by techministryblog

Every year, my church has a “night of worship”, a worship service in the heart of the city at an outdoor stage, where we sing songs for a couple of hours. Because it doesn’t get dark enough to use projectors for lyrics until the service is almost over, in the past we have relied on using small flat screen TVs to try to show some words for people to follow along. Big white letters on a black background, nothing fancy. Of course, it’d be great if we could just rent an LED video wall, but the cost to do that has been too expensive for us to do in the past.

Photo Oct 19, 3 34 24 PM
You can see the screens we rented here. Pretty small (60″) for such a large crowd.

So, I had an idea: What if we could somehow send the lyrics out of ProPresenter to everyone’s phones, in real time, and let them use their own screens to follow along?

I gave myself a couple of limitations:

  • It needed to work in the standard phone browser so there was no barrier of installing a particular app
  • It needed to be real time or as close to it as possible

Awhile back, I started tinkering around with the undocumented ProPresenter API. I say undocumented because it is not officially offered as a way to access ProPresenter data and control it. Some people have done a great job at figuring out how ProPresenter sends data over the network between their apps which allows us to extend the software to meet unique needs. Basically, by using websockets, we can interact with ProPresenter which will return JSON-formatted data reflecting information about songs in the library, playlist, the index of the current song, the current slide and next slide information, etc.

I created a local Node.js project and in just a few hours, I had something ready to alpha test! My approach was to have a web browser open on the local network that could poll and listen to changes from ProPresenter, and then relay that new data to a web server. That web server would then relay those changes to all of the connected clients, much like a chat server would send a message to everyone.

I showed it to my team, but the idea was tabled for awhile because we thought it through and didn’t want people buried in their phones while singing. However, as we got closer to the event, we realized that the two TV screens we rented might not be sufficient, and I was asked to work on this again.

As I was preparing this for production, I discussed briefly with our IT team about setting up an internal server running Node.js that could be accessed on port 80 (the default HTTP port) outside the firewall, but bandwidth, security and performance for hundreds of clients connecting through the Internet all at the same time was a concern. With that in mind, I turned to Amazon EC2.

If you haven’t heard of it, Amazon Elastic Cloud Computing (EC2) is basically virtual servers “in the cloud” (i.e. remotely and accessible from the internet). It’s not too hard to set up, and they even have a free tier available for 12 months, so you can try it out for free! I had never used it before this project, so I actually followed a tutorial to help me get it going.

Screen Shot 2018-10-21 at 6.21.09 AM
This is my EC2 instance. It’s running Ubuntu linux.

Once I had my Linux server set up on Amazon EC2, I assigned an “Elastic IP” (Amazon’s term for a type of static IP), and then I bought a domain name, fglyrics.com, for $12 and tied it to that IP. It was up and online in minutes. I installed Node.js on my new server, copied over my code, and started it running.

About the software:

I call the software Presentation Bridge, because it acts as a “bridge” or connector between the presentation software and all of the clients.

Screen Shot 2018-10-21 at 5.19.59 AM
The initial Bridge page.

When you first load the Bridge page, you have two options: Configuring your ProPresenter connection, and Connecting to a Bridge. In order to connect to ProPresenter, you have to enable the network settings. It relies on both the “remote” and “stage display” controls to get all of the data needed.

ProPresenter 6 Network Settings
You need to enable the network, ProPresenter Remote, and Stage Display App. Be sure to assign a control password. The Network Port is the port we will use in Presentation Bridge. The Stage Display App port is not needed.

When connecting to ProPresenter in Presentation Bridge, you’ll need to supply the local ProPresenter IP address and port, as well as the control password and local library path. This is what allows the Bridge to pull all of the slide images and other information. This is standardized across all of our ProPresenter installs at our church, so it’s always the same path for us. It should be the full, absolute path from the root of your drive.

Screen Shot 2018-10-21 at 6.15.51 AM

When you’ve successfully connected, the gray dot at the top of the ProPresenter config box will turn green. If there’s an error, it will turn red. Status information is displayed in a log area further down the screen.

To connect to a bridge, choose one from the dropdown list. If it is configured to have a control password, you’ll have to enter that in order to connect. Adding bridges and making changes to existing bridges can be managed by clicking the settings wheel. It supports multiple bridges, which I added as a feature since we have multiple auditoriums and may want to use more than one simultaneously.

Screen Shot 2018-10-21 at 6.02.00 AM
This is what the page can look like when connected to both ProPresenter and to a Bridge room.

As the operator runs ProPresenter, the slides will be displayed on the Bridge screen with the currently selected slide showing a blinking red border, so it is clear which slide is currently being displayed. You can browse the playlists and items in the playlist. You have the option to send the current data from ProPresenter to the server (or turn it off), turn on a logo (configured in Bridge settings, useful if you’re currently not connected to ProPresenter, etc.). I also implemented the NoSleep.js library which will attempt to keep any connected mobile devices awake.

On the viewer/client side, I implemented three types of “listeners”:

  • Text Listener – just gets text data and displays it as big as possible on the screen
  • Image Listener – displays the actual slide image by using a base64 encoding of the slide
  • Stage Display – recreates the current slide/next slide layout
Screen Shot 2018-10-23 at 3.54.23 PM
This is the default “text listener” option, and what we used for our night of worship.
Screen Shot 2018-10-23 at 3.54.01 PM
This is the image listener. It uses a base64 encoded image pulled from ProPresenter at the time it connects. The quality is based on the slider value set in the config options for the ProPresenter connection. It does not include any background or other layers.
Screen Shot 2018-10-23 at 3.54.14 PM
This is the stage display, with the current slide and the next slide, and any notes attached.

All three listeners can be accessed through the browser. The data is relayed from the server using the socket.io library. I tested it on my iOS devices, Android devices, and even my Amazon Fire TV stick on multiple browsers and they all work really well. Across an internet connection, the moment a slide is clicked in ProPresenter, that slide is visible on the listener devices.

We used it during our Night of Worship this year and it worked great! I used a hotspot for the Bridge connection and then everyone connected to the Text Listener using the internet connection on their own phones. It uses very little data since it is just a text stream, which is really nice!

Photo Oct 19, 3 28 26 PM

Photo Oct 19, 7 17 43 PM

Overall, I enjoyed creating this software for our unique need. I plan to extend the functionality down the road as I have time, including attaching “triggers” to specific slides as they are activated, to send RossTalk messages, fire HTTP cues, etc. on the local production network.

If you’d like to try Presentation Bridge out for yourself, the code is freely available on my Github repository. You can also request to demo it using my live site running on Amazon EC2. I wrote the software to support multiple bridges at a time, in case you have multiple meeting spaces or venues that need to run simultaneously. When more than one Bridge is enabled and running, any users that connect are presented with a drop-down list and can select the Bridge they want to join.

0

On-Screen Tally Light for ProPresenter using software

Posted on by techministryblog

I wrote a new piece of software recently that I’m really excited about. It’s called ProTally and it is designed to display video tally markers directly on the screen.

icon_512x512@2x

What’s tally? In broadcast setups, it is often helpful to be able to tell camera operators, computer graphics workers, etc. when their shot is being used on-air or visible on screens. Most broadcast equipment comes with some sort of tally light that, when connected to the right system, lights up to let the operator know.

With today’s broadcast equipment, a lot of this tally information can be communicated directly over the network, in real time using a variety of protocols. One particular protocol is TSL UMD, from Television Systems Limited for Under Monitor Displays. It is supported by a wide variety of broadcast industry equipment and allows the devices to know the tally state of one another.

In church environments where we use computer software like ProPresenter to send CG content to a video switcher, it can be very helpful to have a tally light that the user can see so they don’t accidentally change a graphic while it is live or on the screen. While there are a variety of external tally lights available for this purpose, I wanted to design something that would allow for a green (in preview) or red (in program/on-air) box directly on the screen that the user can easily see while operating the software, without having to purchase additional hardware.

For this project, I used Node JS and the Electron libraries, along with an existing Node JS module that acts as a TSL 3.1 Protocol server. I was able to whip up a demo in just a few short hours. Then it was just a matter of finessing and adding features.

Using ProTally, you can monitor up to 4 Tally Addresses using TSL UMD 3.1 and keep track of their Preview, Program, and Preview+Program states. You can even customize the colors as needed! The boxes can be resized and moved around on the screen and those positions will be saved and recalled the next time the software launches.

Screen Shot 2018-07-11 at 10.31.00 PM

Screen Shot 2018-07-11 at 10.32.26 PM

I decided to add options to allow the user to choose whether they wanted a filled-in box or a transparent box with a color border. It also reads the label data and stores that as it comes in, to give names to the tally addresses. And, because we use two Carbonite switchers at my church, I also wrote in an object array that uses the TSL UMD protocol implementation described by Ross here: http://help.rossvideo.com/carbonite-device/Topics/Devices/UMD/TSL.html

Screen Shot 2018-07-11 at 10.31.31 PM
The software stores the label names of the devices as they are read in the tally data over time, so as the software runs longer, this drop down list becomes mnemonicly helpful.

Due to some limitations of the Electron framework, I had to make the windows appear “always on top” of other windows, to ensure they would be visible while clicking around in ProPresenter (or ProVideoServer or whatever software being used). This can be a little annoying if you’re using the computer for another task and don’t want to see the tally boxes, so to help with that, I added a “Hide All Boxes” option that can be used rather than quitting the software.

Screen Shot 2018-07-11 at 10.30.45 PM

Here is ProTally in action:

 

Screen Shot 2018-07-11 at 10.35.13 PM
This is a transparent window with a border sitting on the output window of ProPresenter.

 

 

Screen Shot 2018-07-11 at 10.33.51 PM
This is a filled-in box.

 

This solves a problem for a lot of people who want on-screen tally for ProPresenter, ProVideoServer, or whatever software they may be using. You can even use it to monitor general inputs like cameras, etc. Just assign the tally address, position the box, and you’re set!

I will have this available in my GitHub repository soon. Feel free to check it out and if you use it, let me know how you like it! I plan to add more features to it as I have time.

1

Using Ross Dashboard for Production Control

Posted on by techministryblog

At my church, we rely heavily on Ross products for our video systems. We have two Carbonite switcher panels/frames and several OpenGear frames with cards doing things from audio embedding/de-embedding, video up/down/cross conversion, fiber conversion, etc. The Ross framework makes all that possible.

A great product that Ross makes is their Dashboard software. It’s free, cross-platform, and with the community forums available, you have a lot of power at your fingertips to control all of your equipment. I would highly recommend it even if you don’t use other Ross products.

With Dashboard, you can create your own custom panels to do whatever you need. It does require some programming knowledge if you really want to have full control to design and create your own workflows, but if you’re up for learning, there are plenty of resources available to help you along the way. It uses Java and JavaScript technologies.

screen-shot-2018-04-18-at-1-29-37-pm-e1524072685120.png
Here’s a screenshot of some code in one of my panels.

In ministry, it’s always great when we can create simpler systems where volunteers can succeed, which is why tools like this are so valuable. I started creating my own custom panels in Dashboard about 4 years ago. The first one I created was a panel to control and arm our Aja Ki Pro recorder so we could easily record the sermon video for later editing. The first version wasn’t too fancy, it basically just allowed you to enter a custom clip name and start/stop recording, but it suited our needs.

Screen Shot 2018-04-15 at 6.49.20 PM

I later wrote a full transport control version that allowed you to cue up or delete clips, rewind, fast forward, etc. I’ve made both versions of this custom panel available and there are churches, new stations, and government agencies all over the country using both version of these panels. This is all possible because Aja created a RESTful API that can be used to access their KiPro devices, and through Dashboard, we can take advantage of that.

Screen Shot 2018-04-15 at 6.49.53 PM.png

If you’d like a copy of this panel to use in your church, let me know. I would be happy to send it to you!

I’ve also created custom panels to turn on/off projectors and do simple operations on the video switchers (by firing custom controls through Dashboard), and over time this developed into the complex but flexible system we use today. Now we have a “master production control” custom panel that is always open in DashBoard on one of the production machines.

Screen Shot 2018-04-15 at 6.54.36 PM.png

Then, each production machine has Dashboard installed and is running one of the remote panels I’ve created.

Here is an example of one of the remote panels, used primarily for turning projectors on and off in one of the auditoriums and controlling screens we use in those rooms. I tend to customize these panels for their application, only giving them the command options necessary for that area.

Screen Shot 2018-04-15 at 6.56.02 PM

This master control panel is where all of the code lies that does the actual work, whether it is turning a projector on, executing a custom control on a video switcher, setting a PTZ camera preset, etc. This is great because now anytime I make a performance improvement, add a new feature, etc., I only have to add it to the master control panel, and the remote clients will get that benefit when they execute the command.

The remote panel simply sends a web HTTP request to the master panel at a specific address and port, which triggers the corresponding button on the master panel.

Screen Shot 2018-04-15 at 6.55.46 PM

The master control panel then keeps track of the remote listeners and sends updates as commands are executed. Right now, I primarily use this to update an activity log on each remote client, or to update the state of a button if needed, but the flexibility is there to do what I want, and all of the clients can stay up to date no matter who pressed a button from any particular machine.

I hope this gives you a few ideas for your tech ministry on ways to simplify equipment and production control! If you need help along the way, drop me a line. Happy coding!

1