I recently took ownership of becoming the organiser for my local PowerShell user group – PowerShell Southampton. With everything going on in the world re the pandemic, I realised I won’t be arranging in-person meetups any time soon.
I got stuck in and learnt ways I could produce a virtual event: looked at the tech available and weighed up the features, pros/cons etc with how I wanted it to look and what I wanted the user experience to be for all involved (organiser, speaker and audience).
The research was short-lived. I quickly landed on using OBS Studio and pushing the stream to YouTube. OBS Studio seems like the de facto choice for screen recording and streaming. After some hours tinkering, reading and doing my owns streams to Twitch (archived to my YouTube channel), I was more than happy with what it offered.
The first event is this Wednesday and I got seriously carried away this weekend with styling some “starting soon” or “be right back” animations. Below is what I’ve ended up with and I’ll quickly walkthrough how to use it if you wanted to do something similar.
As you can see in both scenes there is only 1 single browse source. This immediately makes my OBS setup super simple and easily to recreate if I ever need to.
There’s just two resources needed to get rolling with this, and they’re both in a Gist:
The browser source in OBS points to
http://127.0.0.1/pssouthampton/index.php?message=We'll be right back, sorry for the interruption!. Pass a difference value to the message parameter in the query string of the URL to change the scrolling text.
index.php hugely depends on the browser’s size (or OBS’s canvas size) being 1920×1080. You’ll also notice that if you opened
index.php in a browser, the positioning of some items might look different. I assume that’s either because the display scaling of my 4k display set to 175%, or the browser engine in OBS is different in some way.
Accompanying that is a PowerShell script
New-PSSouthamptonVirtualSession.ps1. This is the only thing I intend to use before each new event. I pass parameters for session title, speaker’s name and Twitter handle, and it does the rest:
- Updates/creates properties.json with said properties, which
- Downloads the speaker’s Twitter profile and specifies its filename
- Starts XAMPP’s Apache if not already running
This workflow makes life very easy moving forward: no need to fiddle with OBS sources and positioning them, or manipulating images in some editor. At most I’ll likely only need to fiddle with the session title’s text size and positioning in the CSS of
index.php if it gets particularly lengthy.
Here’s a quick demo of using the
New-PSSouthamptonVirtualSession.ps1 and how easily it changes