DEV Community

Rachel Simone Weil
Rachel Simone Weil

Posted on

Use this OBS workflow to seamlessly integrate "live" demos into pre-recorded tech talks

Clip from a pre-recorded tech talk using the method outlined in this article

Spoiler: This tech talk at Smashing Conf was recorded in one take with no editing software. And that "live" demo isn't actually live.

As developer meetups and conferences have been moving to online-only offerings over the past year and a half, the way I prepare for technical presentations and demos has changed. Mistakes and flubs feel more weighty when recorded, so it's easy to get lost in recording multiple takes, over-rehearsing, and editing things just so. The time put into creating video content can really add up!

Below, I share the process I've created for making technical demo videos in OBS Studio. By preparing OBS with premade "cuts" using a Scene Collection and a little pre-recorded trickery, you can create a technical video with polish while eliminating the need to edit the video after recording. Really!

Summary

Edit: I described the approach pretty succinctly on Twitter:

Read below for the full step-by-step.

Tutorial

These steps assume you already have the (free and cross-platform) OBS Studio installed. Some previous experience with this software is helpful.

  1. In OBS Studio > Settings > Output, choose your preferred video output format. You might want to test a sample recording to ensure the file format and quality are OK.

  2. Write presentation notes or a script and create any slides you might want to show. If you're using presentation software to create them, export your slides as individual images.

  3. Pre-record your "live" screen demos. (Cheating, I know! But none of this is going to be live in the end, anyway.) You can use OBS, Game Bar (Windows 10), or QuickTime (OSX) depending on your scenario and preference. If you have multiple demos, record each as a separate video to eliminate capturing unneeded setup steps, window switching, etc. Don't include any audio commentary at this stage.

  4. From the Scene Collection pane in OBS, add two template scenes using the (+) button:

    • A scene with a microphone input and a small inset webcam source in the corner, and
    • A scene with the same microphone input and the same webcam source, but with the webcam expanded to take up the entire screen area.
      Switching between inset scene and full-screen scene in OBS
      The inset view, the fullscreen view. (That's a Monster in My Pocket figurine from my childhood, in case you were wondering.)
  5. Make copies of the inset scene so that every slide or demo video has its own duplicate of that scene. Rename the scenes as you go with descriptive names. Then, make copies of the fullscreen webcam scene and place them before and after every video scene as shown below.

    Adding slides to Sources panel
    At the left is an example of a Scene Collection prepared by duplicating scene templates. Images and videos are added to each scene by dragging them into the Sources panel.

  6. Drag and drop the relevant slide image or video into the Sources panel for that scene. Make sure each image and video are sized to take up the full screen dimensions. If the OBS screen size or ratio needs to be adjusted, you can do this in OBS Studio > Settings > Video. But when possible, it's better to keep things high-resolution and in 16:9 and export your content accordingly.

  7. For each video, double-click on the source file to open source properties, and make sure "Loop" and "Show nothing when playback ends" are unchecked. Make sure "Restart playback" is checked. These settings will ensure that the video starts from the beginning when the scene is activated, and that when the video is complete, it will freeze on the last frame.

    Screenshot of Settings panel for a video
    Settings for video sources

  8. Lastly, record your demo by clicking "Start Recording," navigating through on your scenes in order as you talk over the prepared slides and demos. When done, choose "Stop recording."

By recording the presentation in this way, you don't have to drive live demos, switch in and out of your presentation, and try to talk at the same time, because you'll simply be narrating over the scenes you've prepared. This makes it easy to reference a script or speaker notes, too. And with OBS's built in crossfades, you get a nice result without having to use additional editing software.

From the viewer's perspective, the switch between camera inset and fullscreen camera will look like a cut between "Camera 1" and "Camera 2" like you might see in professional recordings. But in fact, it's just little ol' you, sneakily bridging different demos together by interspersing them with a brief fullscreen webcam feed. Since you'll keep talking as the scenes change, the result will look very natural without pauses between content.

Now that you know how it was done, take a look at the clip again. (Or, view the full talk here.)

Clip from a pre-recorded tech talk using the method outlined in this article
The screenshare is an imported video that I'm talking over as if it's happening in real time.


I hope this gives you some ideas for ways to use OBS to record tech talks. If you end up trying it out, let me know in the comments!

Top comments (0)