Live Stream Break with HTML and ATEM Macros // Show and Tell Ep.11

[@cococamper]

What a nice idea to make an idle screen (or break screen as you said) in a webpage ! I just do it on a simple powerpoint back then.

[@heretorecord]

+Koko Pratama Pudja glad you liked it! PowerPoint will work nicely too! For us it's all about making sure that it's easy to make small tweaks to the text and the benefit of the webpage is that countdown timer (or any other JavaScript thing you want to throw on there)! Thanks for the comment!

[@photojoseph]

Clever way of doing the break screen! I like the 70% opacity method. I have a question about connecting the PC board to the ATEM. It looks like it has HDMI out; is that how you’re connecting it to the ATEM or are you converting to SDI? I’m going to look for other even cheaper solutions; there are so many things you could do with a dedicated computer input on the ATEM; if you could have several inputs populate with Raspberry Pi or other cheap computers that could be handy.

[@heretorecord]

Hey - thanks for the comment! I have indeed connected the PC board right to the hdmi of my switcher. I’ve since built an application which runs on my Mac laptop and (over hdmi) I have the same break screen in my ATEM. The beauty of this method is that I have built a much easier interface for changing details throughout the day (I use this for conferences mainly). Raspberry pi would be a good solution too as it’s just a browser after all!

[@photojoseph]

Here to Record Thanks! I wish I could find a solution that had SDI without adding yet another computer. The ATEM 2 M/E only had one HDMI input. Anyway thanks for the idea!

[@lukebird2916]

If you save that text file with your command in it as a .bat it will automatically run it in the CMD

[@DougPipersr]

John, I love your webinars. Keep them coming dude! I'm having trouble going "backwards" with macro's. I'm using a Stream Deck with the ATEM Mini. I have a three-camera setup and just a few macro's. I'm using a ATEM MIni with a Streamdeck running Companion 1. Intro: static image followed by camera 1 with a key'd green screen 2. Camera 1 green screen with static image behind 3. Camera 2 no green screen 4. Camera 3 no green screen 5. End static image followed by fade to black. The problem is with the macro's I have created that sometimes the key'd greenscreen is there when I don't want it to be. I have to switch back and forth between camera's 1,2 and 3 and I want camera one to always show the keyed green screen, but not any of the others.

[@heretorecord]

It might be worth digging into the Macros XML file to see what is going on. I have another video about that on my channel!

[@DougPipersr]

@@heretorecord I believe its not so much the macro itself but how the ATEM keying sequence works. If the key is "on air", as I understand it, you should toggle it off by lighting the "key1" and hit "auto" to transition it off. However, if macro's are run randomly, the key could be "on air" sometimes and sometimes not. So I believe the issue is how can you leave every macro with the key1 on air all off. My solution is to always hard cut to black, hard cut key1 then I know I'm always leaving the key off. My confusion is related to the "key1". Its not a hard on or off. If its on ....it toggles the key on or off depending on what state it finds the key. It seems like you need an option like "key1 is off" rather than toggle the state. Is this clear at all?

[@risingempireentertainment]

Can you use the panda for lower thirds or playing videos for a live stream?

[@heretorecord]

I found it not to be powerful enough to play out videos that were high paced

[@satinderdhindsa835]

This can be done with your new graphics software if you update it with this feature

[@poucedeleon]

John, This is a great concept, I love it. I recently downloaded your Live Stream Break 2 app. This is a very cool app. Took an hour to get my head wrapped around Google Sheets. It is working great except my logo and pictures are not displaying. Just curious if there is a trick I am missing? All the information from the google sheet populates except images. If I select one of your entries (I am using your template) the picture shows. It says the site for your logo has expired. I am using Google Photos to host my logo and picture. Any ideas or suggestions would be appreciated.

[@heretorecord]

Hey - have you had a look at H2R Graphics which had this function built in? I do not actively maintain the Live Stream Break project these days. But in the meantime is it possible that the url to the image is not the best one to use. Try opening the url in your browser in “incognito” mode to check

[@poucedeleon]

@@heretorecord I have not looked at H2R yet. If it has the same feature as ":Live Stream Break" that would be great. I did figure out the problem. It had to do with how I was posting the link in Google Drive. Fixed and working properly. I will take a look at H2R. Again thank you for a great app.

[@tedz2000]

does the latte panda have another purpose other than running that break --- what app do you used to create the break screen, and I take you have it as a input on the atem

[@heretorecord]

It was used just for the break screen indeed and I made a custom app for that.

[@ShirazZiya]

If you use OBS, can you add the break page as a browser source for the same effect?

[@chicAlways1212]

Hey cool stuff!!! How did you calculate the T-bar values? Is it generally random or was there some sort of calculation? I'd like to carry my T-bar to 100%.

[@heretorecord]

Hey! Shoot me a message over on facebook and I'll share the details (bit easier that way) - m.me/heretorecord Cheers!

[@adamgrunseth]

Brilliant idea! This seems like an extremely simple, and affordable solution, for something that might otherwise require expensive, dedicated CG units. I imagine this technique could also be adapted, with the appropriate ATEM macros, to create live score or clock bugs for sportscasts via PiP. I am wondering, however, if it might not be a better solution to set up your ATEM macro to run your break as a couple of downstream keyers- It seems on one keyer you could select your wide shot camera as the fill, then on the other keyer select your Latte Panda output, tweak the keyer settings, and get the same effect. This should allow you to use any of the built in transitions to bring your break screens in and out, instead of having to adjust the fade-in and out step by step via a macro, and free up your preview bus during the breaks. If, for whatever reason, you needed access to a downstream keyer during the break, you could also set up your macro so that your background shot is on an upstream keyer. This way you would still have a DSK available if you needed to key graphics over the break.

[@heretorecord]

Hey - thanks for the comment and I’m glad you found this useful! You are absolutely right and I have since moved this all to a keyer which makes much more sense!

[@TommyReynolds89]

Adam Grunseth Id love to see a tutorial for that dude :)

[@KeckerErt]

The Website is nice and all - but for events i would rather use prepared slides in PowerPoint / Keynote / a PDF. Combined with a smal Presenter Remote this is super easy. BUT of course you wont have that much room for editing Information. Also we would hook it up with teamviewer to control everything from one Device.

[@heretorecord]

I’ve found it best to make things as editable as possible - times changes, speakers cancel etc etc.

[@mayomode]

Hi, do you still using latte panda in your setup? i'm looking for a mini pc for Companion and the Atem tv hd.

[@heretorecord]

I’ve taken it out as I have no need for it anymore. It could work well with companion though but I personally carry a laptop anyway

[@ericdargan]

What software are you running on the ipad?

[@heretorecord]

Touch OSC

[@mariuszpiwnik5018]

Can you give us name of CMS which are you using? Maybe link to website. It is pretty cool. Thx

[@heretorecord]

+Mariusz Piwnik Sure! It's called Squarespace - www.squarespace.com/ - I really love it!!

[@rob-fischer]

Which keyboard with touchpad are you using there??

[@heretorecord]

+Phenomaen it’s the Plexgear WL-touch Wireless Keyboard. It isn’t great but was super cheap when I got it. Plenty of better options out there I’m sure!

[@rob-fischer]

+Here to Record thanks for answering. I am looking for an option that is successfully used. So your choice might not the best at all. But you use it, have experience with it. This is more worth than some Amazon ratings. So do you have any issues with the keyboard? How long last the battery in your use case?

[@rob-fischer]

Ah, and do you have a photo or closeup how you mounted the LattePanda?

[@heretorecord]

+Phenomaen battery is one of the issues. I forget to turn it off and it always needs new batteries when I go to use it again. Other than that I find the keyboard useable. I often only need to hit refresh during a live show and it does that fine.

[@heretorecord]

+Phenomaen no photos on hand but it’s mounted with some small screw and I used some perler beads as stand-offs (not the most professional gear but worked perfectly. You may be able to see it in this video... kzbin.info/www/bejne/gWfKfZKOhpKggJY

[@jonathancharles5852]

What font are you using for the break screen.

[@heretorecord]

I'm using "proxima-nova" for my break screen!

[@EventStreamTeam]

Which xml editor are you using?

[@heretorecord]

I use Atom... atom.io/

[@aliksend]

Just rename "Break Code.txt" to "Break Code.bat" and you will able to run it using doubleclick. Also you can setup system to run this script just after boot automatically.

[@heretorecord]

+Alik Send great tip! Thanks :)

[@AmauryJacquot]

there must be a way to hide that mouse cursor...

[@heretorecord]

I’m certain there is!