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

Posted on October 23, 2018 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.

Network control of window shades using relays, a Raspberry Pi Zero, and Node JS

Posted on October 3, 2018 by techministryblog

At my church, we have a smaller auditorium that has a giant window to let in natural light. We don’t use it much during services because the light can wash out our projection screens, but it’s wonderful to have during the week to let in light. We also like to have it open before services begin and close it right as we get started. It helps to create a nice environment.

Photo Oct 03, 5 08 02 PM.jpg — These are the two big windows. Each one has a motorized shade attached.

These shades came with a very easy to use RF remote. Actually, it came with two remotes. Since we never need or use two, I thought, wouldn’t it be cool to hack one of them and turn it into a network-controlled remote? This would allow us to control the shades from anywhere, not just within the RF range! Plus, I like automation and making things more accessible and efficient and I wanted to try to create something inexpensive rather than just purchasing something already made.

somfy remote — This is the remote we have. We have two shades that we usually open simultaneously, so we have two remotes but don’t need both.

I purchased this USB relay off Amazon:

I figured I could use the relays to electrically “click” the buttons on the remote. So I took the remote apart to see how it looked on the inside. Here is a picture of the remote outside of its shell.

Photo Sep 20, 11 35 45 AM — The first and third buttons are the “up” and “down” controls. The middle button is the “preset level” where the shade can open or close to a preset level, but we don’t use this feature. The very bottom button determines which shade(s) to control.

I knew there was probably a way to use the GPIO pins of a Raspberry Pi and transistors to trigger the button presses, but that’s not my forte. I don’t know a lot about circuity and electronics at that level, but I know how to solder (well, sort of. Don’t look too closely at my work.) So I soldered some wires onto the remote buttons.

Photo Sep 24, 3 52 18 PM

When I touched the wires together, the remote activated! The concept worked, so I hooked it up to the relay to begin the development and testing.

Photo Oct 02, 1 00 27 PM.jpg — Here is the remote, connected to the relay via the NO (normally open) pins. I bought a small electronics project box to fit all the parts in.

I knew I wanted to control the remote using Node JS. It’s a great lightweight platform that runs on multiple operating systems, including Raspberry Pi’s with Linux. I found control software written in C, C++, Python, shell scripts, etc. for the USB Relay that I had bought, but nothing in Node JS. At least, nothing native without using DLLs and that sort of thing.

It’s been a long time since I wrote in C++ and I’ve never used Python, but I can read both languages enough to learn about the control protocol. I wanted to keep mine running with the least amount of dependencies so it could work on multiple operating systems (not just on the Raspberry Pi, for example).

In about an hour, using the Node-HID library, I had a working script in Node JS to turn my 2-relay device on and off. I decided to make the control code for the relay into a separate Node JS module so that it can be used in other projects. If you want to use it, I’ve made it available on Github as well as published it in the NPM registry.

Once I had the control of the relay that I needed, I whipped up a quick Node JS project running express to host a simple web server that would accept a “shades up” and a “shades down” HTTP request and then trigger the appropriate relay.

const USBRelay = require("./USBRelay.js");
const relay = new USBRelay();

//express API variables
const express = require('express');
const app = express();

//http server variables
const http = require('http').Server(app);
const listenPort = 4400;

//routes

app.get("/shades_up", function (req, res) {
   ShadesUp();
   res.send({returnStatus: "shades-up"});
});

app.get("/shades_down", function (req, res) {
   ShadesDown();
   res.send({returnStatus: "shades-down"});
});

http.listen(listenPort, function () {
    console.log("listening on *:" + listenPort);
});

function ShadesUp()
{
    relay.setState(1, true);

    setTimeout(function () {
        relay.setState(1, false);
    }, 1000);
}

function ShadesDown()
{
    relay.setState(2, true);

    setTimeout(function () {
        relay.setState(2, false);
    }, 1000);
}

And by making an HTTP request like:

http://ipaddress:4400/shades_up

I can trigger Relay 1 on my device to turn on for one second, and then turn off, simulating the button press.

Because we use Ross Dashboard as our go-to production interface, I added Up/Down buttons to our FOH custom panels to send those commands to the relay server.

Screen Shot 2018-10-03 at 6.48.16 PM — Even though the remote is easy to use, this works from anywhere on our network!

I then deployed the ShadeController Node JS project to a Raspberry Pi Zero, and put all the parts into my project box. I had our IT department make a DHCP reservation for the Pi so that it would always have the same IP address, making it easier to program around.

Photo Oct 02, 3 24 42 PM — Here is the remote, the USB relay (hot glued to the bottom of the box), and the Pi Zero all in the project box.

So, what does this really gain us, if the remote was already pretty easy to use?

We are no longer limited to RF range of the remote to control the shades. We can control it from anywhere on the network, including our control rooms which are located far away from the receiving end of the RF controller for the shades.
We can use the URLs in the ShadeController program as hooks in other projects to control the shades through automation. Time for the service to start? Just run the appropriate light cue on the light board and it fires a network midi command to a server that then relays the HTTP request needed.

Overall, this was a fairly inexpensive project.

Raspberry Pi Zero W ($10): https://www.raspberrypi.org/products/raspberry-pi-zero-w/
USB Relay ($12): https://www.amazon.com/KNACRO-SRD-05VDC-SL-C-Module-control-intelligent/dp/B071XHF67G
Project Box ($8): https://www.amazon.com/gp/product/B0002BSRIO/

I ended up spending a little bit more because I bought a Raspberry Pi Zero W kit with a case and some other adapters that I didn’t already have, like a mini HDMI to HDMI connector, but if I end up buying another Zero, I’ll take the Pi case out of this project box and use it. I also bought a pack of project boxes for about $8 that were way too small and didn’t fit my parts, but I plan to use them for some other projects down the road.

I hope this gives you some ideas on ways you could automate or more efficiently control your non-networked equipment through the use of relays! I certainly learned a lot during this process and am looking forward to implementing it in other areas.

ProTally 1.3.0 available with support for OBS Studio

Posted on September 19, 2018September 19, 2018 by techministryblog

If you’ve been looking for ProTally support for OBS Studio, here it is!

On your computer running OBS, you’ll need to download and configure the OBS Websockets to be able to connect.

Screen Shot 2018-09-19 at 4.07.51 PM

Tally address fields are based on sources available in your OBS scenes.

Download the latest release here: https://github.com/josephdadams/ProTally/releases/tag/v1.3.0

I hope this is helpful to you!

ProTally 1.2.0 with Blackmagic ATEM support available

Posted on September 15, 2018 by techministryblog

I spent some time this past week writing and testing support for ProTally with Blackmagic ATEM switchers. I didn’t have one to develop with, and after posting on a discussion group about the software, a new friend sent me a unit to work on. Thanks again, Kyle!

Version 1.2.0 now supports:

Blackmagic ATEM switchers – it will auto discover any ATEM switchers on the network, or you can manually type in an IP Address as well
Ross Carbonite Black, Carbonite Black Solo, and Graphite switchers

And I now have a Windows release build in addition to a MacOS release build!

Screen Shot 2018-09-15 at 12.12.47 AM

It runs in the tray on Windows as well.

New tray icon!

Screen Shot 2018-09-15 at 12.13.51 AM

Screen Shot 2018-09-15 at 12.14.08 AM — It now supports more device types!

You can download the binaries for free here: https://github.com/josephdadams/ProTally/releases/tag/v1.2.0

If the software is beneficial to you, drop me a line and let me know!

Using Dropbox to keep ProPresenter Libraries in sync

Posted on September 6, 2018September 6, 2018 by techministryblog

Dropbox is an excellent tool for production use. We use it for everything, from weekly temporary files just for a particular weekend service, to long term resources that need to be available on a regular basis. It’s great because the files automatically sync to all the devices, and it allows us to collaborate with a lot of people/contributors. The files are stored locally on each device/computer, so they are quickly accessible.

We also like syncing our ProPresenter Libraries in Dropbox, and I thought I would share that method with you. If you haven’t heard of ProPresenter, it is an media presentation software package from a company called Renewed Vision that is designed specifically to make live production easier. In my opinion, it’s the best lyric presenting software out there.

ProPresenter maintains its own internal library/folder system of all of your presentations (songs), background videos, images, etc. This allows you to easily search and re-use songs week to week. The software auto-saves changes when you make them, which is great.

Screen Shot 2018-09-06 at 3.10.53 PM

But what do you do when you have multiple ProPresenter computers in multiple venues and rooms across the campus or ministry? This is where a syncing method comes in very handy.

ProPresenter has two built in options for sync, “local sync” and “cloud sync”. The local sync option is free and you can set it up yourself to sync to a local drive or network share. The cloud sync option uses Renewed Vision servers and costs a small monthly fee.

However, we don’t use either of these options. I tried the local sync option and never got it to reliably work like I expected, and the cloud sync was not something we were interested in paying for at the time.

We use Dropbox instead. We have a shared Dropbox account logged into all production devices. Each computer using ProPresenter is set up with its own library folder in the Dropbox account. This allows that computer to make all the changes it needs while those library files are in use.

As changes are made, they are automatically synced to Dropbox and back down to the other devices, into that same folder name/structure. Essentially, every computer has a full backup of all the other computers’ ProPresenter libraries, accurate to within the last time it synced, typically within a couple of minutes at most.

Screen Shot 2018-09-06 at 3.08.47 PM

We have found this to be very helpful, because a volunteer running ProPresenter in one Auditorium can fix or redesign a slide, and the volunteer running ProPresenter in another Auditorium can simply pull up that file on their computer and copy it into their local library.

To sync over mass changes, we create a ProPresenter bundle file of presentations and save it to Dropbox. The other computers see the bundle file almost immediately and they can then be imported to get any new changes needed.

We have been using this workflow for over a year now and it has been great for us. Do you use ProPresenter and Dropbox together? If not, give this a try. Or, if you have a great syncing method that works well for your team, share it! I’d love to hear how you are using technology well to help the church be more efficient.

ProTally Release Build is here!

Posted on August 31, 2018 by techministryblog

Awhile back, I wrote about the on-screen tally software I recently developed. We needed a way for our CG operators to know when their source was on-air or about to be on-air. I won’t rehash the definitions or inner-workings again, so if you didn’t read that first post, I recommend you read that before this.

I had hoped to give a release build much sooner but lost time waiting on some other people to test it in their environments. We’ve been running it in our environments for almost 2 months now with no issues, so I finally gave it some final polishing and bug squashing to get it ready for release. The interface has changed some, and for now, you can choose between a generic TSL 3.1 device or, specifically, a Ross Carbonite. (Not a Carbonite Black, Solo, or any of the other models.) Why specifically that model? Because I have two of them, and that’s what I know and use!

Screen Shot 2018-08-30 at 4.12.01 PM — Here is an example of it being used with ProPresenter as a border box.

Screen Shot 2018-08-30 at 4.13.11 PM — Here is an example of the filled-in box version, as some people may prefer that instead.

Screen Shot 2018-08-30 at 9.37.21 PM — Here is what it could look like in ProVideoServer.

I hope to add support for the Blackmagic ATEM protocol soon. I need to connect with someone who has one, so if that’s you and you’re interested in testing with me, drop me a line!

If you’d like to download either the source code or a release build for the Mac platform, I’ve made both available on my Github repository here:https://github.com/josephdadams/ProTally/

And this should go without saying, but even though I’ve made software to augment your use of software like Renewed Vision’s ProPresenter and other products, it is in no way associated with any company or product. This is distributed under the MIT license and is available for anyone to use without cost.

Tally ho!

Controlling ProPresenter from a Ross Carbonite

Posted on August 26, 2018August 26, 2018 by techministryblog

I had someone send me an email recently asking how they could set up their Ross Carbonite to control ProPresenter, advancing slides and playlists through a custom control. After writing it out for them, I thought I would share this step-by-step tutorial.

It does require a Communications module license in ProPresenter. If you don’t own one, you can purchase it from RenewedVision.

First of all, in ProPresenter, you need to set up the Communications module to be a RossTalk Device (not a Controller).

Go to Preferences, and choose the Communications module from the menu at the top.
Click “Add Device” at the bottom and choose “RossTalk” from the list.
Under Behavior, choose “Device”. If you wanted to control your Ross Carbonite from ProPresenter, you would choose “Controller”.
Type in the IP address for the Carbonite and the port you wish to use. The default RossTalk port is 7788. I would recommend limiting the traffic to the single network interface that is connected to the same network as your Carbonite.
When you are done creating the device, click Connect.
If ProPresenter has connected successfully to the Carbonite, the button will turn green.

Next, you will want to create a new Device on your Ross Carbonite switcher to connect to the ProPresenter computer.

On the Carbonite, hit Menu, then choose System > Next > Next > Device Config.
If you don’t see Add (new), scroll the far left knob (device select) until that option appears.
Turn the far left knob to choose the slot you want to assign it to. For this example, I chose Slot 1.
Turn the middle knob to select Type: RossTalk.
Hit Next.
Use the far left knob to change the subtype of the server to xpression_1.0.
Hit Next.
Turn the knobs to enter in the IP address of ProPresenter computer.
Hit Next.
Turn the far right knob to set the Port if you didn’t use the default of 7788.
Tap the far left knob to save the device.
Tap the far left knob again to confirm the new device settings.
Now Hit Menu, then choose Config > Input (the far left knob).
Turn the far left knob to scroll through the inputs until you find the input for your ProPresenter computer. In my example, my ProPresenter input is labeled GFX.
Hit Next twice until you see the Device option. It should be unassigned.
Tap the center knob to enter the Device assign settings.
Turn the far left knob to select the Device Slot you set up earlier in Step 3. I chose Slot 1.
Tap the far left knob to add the device, then tap again to confirm.
Now any time you bring that ProPresenter input up in Preview or Program on the switcher, it should automatically bring the device settings up on the menu screen of the Carbonite.
If you tap the far right knob (NEXT), it will advance to the right in ProPresenter, going to the next slide. If you turn the far left knob (UP/DWN) to the left or right, it will advance up or down in the playlist.
If you hit the NEXT button beside the Menu button on the Carbonite, you can see other options for the device. You can clear the various ProPresenter layers, etc.For your reference, those are:
- Layer 0: Clear All
- Layer 1: Clear Live Video
- Layer 2: Clear Background
- Layer 3: Clear Slide
- Layer 4: Clear Props

Now you need to record a Custom Control in order to create a macro for this.

Hit CC, and then select a blank bank/button.
Hit record.
You’ll need to then put the ProPresenter video input in Preview, to bring up the device settings.
Tap the far right knob for “Next”, which will advance the slide.
Then stop recording.
You can edit the CC to remove the step of putting ProPresenter in Preview, as that was only for recording purposes.

I hope this helps!

Tech Ministry