Live Stream Break Screen V2

We covered in a previous video how we show schedule information to our audience during a live stream break, and in this video, we take things a step further by pulling information from a Google spreadsheet.

What you’ll need

To make this work you will need a few things, here’s what we use.

• Mini PC. We use the Latte Panda Mini PC as it fits nicely in our case.
• Keyboard and mouse You’ll use this to hit refresh on the browser from time to time. The nice thing about the Latte Panda is that it runs Arduino code so you could set up a button to do this for you instead.
• Some sort of mixer. We use the ATEM Television Studio HD for our live productions.

The code

We’ve based this heavily on the excellent jsfiddleby use theumer so all credit for the original code goes to them. From there, we’ve made our own tweaks and adjustments to get things the way we want it. Feel free to take a look at…

• Our final fiddle
• Our sample Google Sheet

You’ll see some big changes from the initial one as we’ve built in timer functionality so that the schedule can be updated as a conference day happens.

The sheet

The sheet will basically contain all the information that you want to feed into the break screen, in our case we care most about the 

The mini pc

You’ll just need to point a full-screen browser to whatever page you publish your code to. That’s why it’s a good idea to get an inexpensive Mini PC for this build.

The ATEM mixer

We like to use the t-bar to do an 80% fade of the break screen over a wide shot of the venue. This looks great and gives the viewers a peek at what is going on in the venue.