Thread by @gkoberger

I've recently been doing a bunch of live conference talks via Zoom, and thought it would be fun to go all-out on hacking together a teleprompter that…

🕹 controls the slides,
📽 camera angles,
🚀 demos
🚦 and lights
📝 all via Dropbox Paper

Here’s how I built it ⬇️🧵⬇️

I missed out on a trip to 🇦🇺 Australia due to COVID… but at least I don’t have to memorize my talk now!

Teleprompters are just tilted glass, with an iPad below it. The glass reflects the iPad, but the camera can still record clearly through it. I bought mine on Amazon for $164.

For the iPad version, let's give it a black background with big white text, and flip it using CSS:

transform: scaleX(-1);

I promise it gets more interesting than this!

Most iPad teleprompter apps require you to set a pace, but I wanted more control.

I wrote my talk as a markdown file and loaded the site on both the iPad and my computer.

Then, I used Socket.IO to sync them together when I press ⬅️ or ➡️.

Okay! So at this point, we have a working teleprompter that we can update and control ourselves from a separate laptop.

I found a foot pedal online for controlling it, too. Look, no hands!

I wanted it to be easy to edit + control my talks so I used Dropbox Paper as the backend. You just give the teleprompter a Paper URL, and it keeps everything in sync.

How cool would it be to swap cameras or slides as simply as typing "[camera:left]"!? But more on that in a bit…

So, the real reason I did this was I wanted to build a complex talk with a lot of moving parts… without spending the whole speech fiddling with controls.

If I can automate the teleprompter, I figure I can automate everything… slides, lights, cameras and more.

Everything is already realtime, using Socket.IO. I wanted to make controlling different parts of the talk as easy as typing "[slide:2]" in Paper.

So, whenever the teleprompter hits that syntax it broadcasts it, and any device can listen for commands!

The obvious place to start is with slides. I always write my slides in HTML/JS so I have more control over animations.

I wired these up to stay synced with the teleprompter, so I don’t have to think about them as I talk.

Next, cameras! I have 3 webcams set up and want to switch between them.

I use Ecamm Live to combine feeds into a single virtual camera on Zoom.

But it’s a bit distracting while giving a talk to successfully click around the ECamm UI. Sooo let’s automate it!

This part is tricky. How do we control macOS software with no exposed API… from an external site?

I eventually found a solution: AppleScript! We can listen for commands from a local Node app connected to Socket, and run a script that clicks the menu options behind the scenes.

My talk's about how to improve API docs. I thought it would be cool to give people a link to crappy docs and have them try to make a real(!) API call.

Then, as I talk about how to improve docs, I wanted the site they’re looking at to slowly improve right in front of them.

So, as I talked about things like code snippets and playgrounds and interactive logs and showing API keys… I toggled those features on, in realtime on everyone’s computer, with a simple "[feature:code]" or "[feature:logs]" right in my teleprompter script!

Lastly… a bit of panache. I thought it’d be cool if everything turned red when I talked about errors, and green when we "fix" it.

I used Philips Hue lights + smart plugs to control the lights locally via Node calling CLI commands. Now we have a dash of color when we need it!

And THAT is the most roundabout, inefficient way to avoid having to simply memorize your talk.