Teleprompter Chat Mirror

Using a teleprompter for reading chat isn’t new, but how about mirroring your webcam underneath it so you can see what you’re doing while looking into the souls of your audience?

I don’t stream regularly these days but when I did, one of the things I liked most about my setup was my teleprompter chat. It went through many iterations; from a simple phone mounted as close to my webcam as possible, to an actual beam splitter teleprompter with a DSLR camera monitor screen replacing the phone. I enjoyed the more intimate feeling of being able to simulate looking at the audience while talking to them, even though this feeling was strictly one-way.

One of the struggles with this setup though was in not being able to monitor my own framing/expressiveness while looking at the teleprompter. While this is certainly a skill that can be honed through enough practice and self-awareness of one’s own body kinetics, I couldn’t ever really get the hang of it. So while the “gazing lovingly into your eyes” aspect of my setup was working fine, I never felt fully confident about how my performance was coming across to the audience.

Not sure why I didn’t think of this solution before, but it’s really very simple. Similar to the concept of a smart mirror, I thought why not just overlay Twitch chat on top of my webcam so I can monitor myself while reading and talking to chat? I mean, duh, right?

So as a proof-of-concept I whipped up some custom CSS that makes chat teleprompter-friendly with a transparent background, slapped it on my face, and tried it out. It solved everything; I could easily read chat despite the small prompter size after enlarging the font and changing the colors to a more contrast-y hue, while seeing myself in real time, able to perfectly frame my gesticulations and adjust facial expressions.

Now yeah, this is a lot of words to say “I look at chat through a mirror” but I feel like even this small adjustment helps me be less distracted, act more natural, and ultimately be more engaging to anyone who might stumble in on the rare night I do stream. Hopefully this can help others too, despite how niche the teleprompter-chat thing still is, years after people were talking about it.

Video #

Requirements #

• OBS Studio
• Teleprompter
• Monitor for Teleprompter

I use a camera monitor plugged directly to my PC, if you plan to use a phone/tablet you will need to find a way to have your device show up as an external monitor on your streaming PC. I’ve also modified my teleprompter to be able to mount the monitor.

Custom CSS for Twitch Chat browser source #

* { background-color: transparent !important ; }
div.stream-chat-header { display: none !important; }
div.chat-line__status { display: none !important; }
.chat-line__message { font-size: 9rem !important; padding: 3rem 2rem !important; }
section.chat-room { background-color: transparent !important; }
div.chat-line__message { background-color: #000 !important; }
span.chat-author__display-name { color: yellow !important; }
span.text-fragment { color: greenyellow !important; line-height: 8rem !important;}
div.chat-input { display: none !important; }

I’m not sure why the catch-all selector for changing the background color of all elements to transparent isn’t affecting new chat messages that come in, but this is easily worked around by using a chroma key filter to filter out #000000 in the browser source.

Hope you found this trick useful! And if you know a solution to getting the chat messages to have transparent backgrounds without needing the chroma key filter, please do let me know.