This is a video showcasing the setup I have for streaming live-coding sessions.

A 1080p version of this video is available here

In this video I cover three main areas:

What I want to achieve and why?

You've no doubt seen plenty of live-streamed videos with a screen capture taking up much of the screen and a small disconnected head in the bottom corner of the presenter talking away. My goal in this setup is to make my session much more engaging. One of the main advantages of streaming live-coding is the audience gets to not only see what you produce but how you go about it. What are your thought processes? What mistakes you make. How you go about solving a problem.

Also, as a developer presenting, I have to speak my mind out loud for the audience as I go along, and this helps me to reflect on my own understanding. Similar in fashion to "rubber duck" debugging.

In this setup, I try to achieve a much more engaging format by orienting the camera, the screen, and myself in such a way that my eye line follows the code. It is much more engaging for the audience that my eyes actually look towards the line of code I'm working on and talking about. It gives them a much better feeling of actually being there with me, looking over my shoulder as I'm coding.

I want to try and replicate a feeling a bit like the big transparent lightboards you see. These have a presenter behind a glass panel drawing on the panel with fluorescent markers and a camera on the other side. However, they require physically a lot of space and setup so not suitable to do in a home-office environment.

Physical Setup

I have my camera (Logitech c920) mounted at eye-level to the side of my monitor in such a way that the geometry of my eyes, the screen, and the camera produce the effect that I am looking sideways slightly, towards the code.

I have some home-made light panels that I use and have a pipe-frame on my desk that my monitor, lights, and cameras are all mounted to. This idea was taken from another developer advocate, Cassie. This means that I can raise my sit-stand desk to standing and everything goes up with it and is still at eye level.

I have an external USB microphone (AKG Perception 120) mounted on an arm that I can position just out of shot.

OBS Setup

I use OBS - Open Broadcaster Software to do my streaming. It allows you to create scenes with multiple input sources, such as screen capture and webcam feeds.

I have two monitors, the built-in screen on my Macbook and an external 1080p monitor above it. I arrange my screens such that what I am presenting (a terminal, a web browser, slides, etc) are all arranged on the lower screen and each full screen on a separate space. I can then use four fingers to swipe on the touchpad to move between them.

I have OBS and anything I don't want the audience to see on the top screen. So that includes my Slack workspaces, email, the Twitch channel management page, etc.

When presenting I am looking at the top screen, at the OBS preview which means my head is up and I'm not just looking down with the audience just seeing the top of my head. It also means I see the preview of the effect of myself behind the code when I point at the code, which means I can accurately look and point at the parts I'm talking about.

Anyway, enjoy the video and I hope it gives you some ideas on making your streaming more engaging.