A workable OBS presentation setup with Quarto

03 Mar, 2024

I've been making videos recently in a style roughly akin to a loom video. I wanted the content to be a little more prepared but didn't have the time for extensive editing.

I ended up landed on a setup using Quarto to create a revealjs presentation. I then setup OBS to use a web view and move through the slides in speaker view.

I add the following to the top of each file. Rendering outputs a presenter view (used for speaker view) and a consumer view (used in OBS). I'll walk through each setting below.

---
title: 'Title of the Presentation'
format:
  revealjs:
    menu: false
    theme: dark
    center: true
    multiplex: true
    height: 720
    width: 1280
---

<style>

.reveal pre.sourceCode code {
	max-height: 900px;
}

.reveal div.sourceCode {
  border: none;
}

</style>

• Menu: I turn this off to remove the small hamburger menu for presentations.
• Theme: Personal preference with this one.
• Center: Another personal preference but it feels less jumpy in videos.
• Multiplex: Setting to enable the presenter and consumer view.
• Height/Width: Used to keep this mostly visible on a smaller video.
• Custom CSS: Code scrolls by default which isn't helpful for videos, I also removed the border around boxes of code because I didn't like the way it looked.

With regard to OBS settings, I have a full screen web view which points to the local exported file. I also have a small camera overlay in the bottom right corner. I hit record, switch to the speaker notes and walk through the presentation.

On balance this is a nice mix of quality for the viewer and effort to put together new content.