How to: use OBS to create a Christmas Countdown and Snow Scene on your next video call

I was on a call this morning, and someone had a Christmas background. I’m not a HUGE fan of overt festivities (don’t get me wrong, I like it all, but we’re not the first house in the street to have the lights up, if you know what I mean), but we started talking about having a countdown to Christmas as part of the video background.

I like a technical challenge, so after the call I started thinking about how you could do that. I love the flexibility that OBS gives you (if you don’t know about it, read Scott’s post first), and I thought I’d see what could be done.

Here’s the result:

Here’s how you can do the same. I’m going to assume you’ve already downloaded and installed OBS and set it up for “normal use”.

Add the Snow

The snow is its own video, overlaid on top of the webcam feed. OBS allows for green-screening using a chroma keying – that just means that you tell it what colour to remove from the video and it will make that part transparent.

First, you need some snow with a transparent background. I used this one. Download it and store it somewhere.

Now, set up a new Scene in OBS, containing your webcam feed, and then add a new Source. Choose “Media Source”. This will play a video. In the Properties screen choose the location of the video and set it to Loop:

You should now have two video feeds in your scene – one is your webcam, and the other is the snow. Lay them out so that the snow is on top and completely fills the scene. You won’t be able to see your webcam feed now, but we’ll fix that next.

Right click on the Media Source source (it’ll be called “Media Source” unless you gave it a good name) and choose Filters. Add a new Effect Filter (left-bottom pane) and choose Chroma Key:

Mess around with the settings until you can see the white snow, and no green. The ones in the screenshot work for me.

You should now find that your snow is nicely overlaid on your webcam:

Add the Countdown

The countdown is dynamic – no manual updating of text fields. It works because OBS is able to render content from a webpage. I’ve made a really simple webpage that builds off the great work done by this GitHub project, and just shows the number of days until Christmas. It’s at  https://tomorgan.github.io/OBS-DaysToChristmas/index.html and you can use it too.

In your scene, add a new Source and choose Browser. Set the URL to: https://tomorgan.github.io/OBS-DaysToChristmas/index.html, set the Width to 1000 and Height to 800. You can play around with the Custom CSS to make something that’s right for you. Here’s what I used:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; font-family: Segoe UI;

font:80px Copperplate Gothic Light, sans-serif;; color: white  }

And, that’s it! There are loads of different things you could do with this, but hopefully it’s given you some ideas for how you can make your video feed a bit more festive this year!

Written by Tom Morgan

Tom is a Microsoft Teams Platform developer and Microsoft MVP who has been blogging for over a decade. Find out more.

---

Buy the book: Building and Developing Apps & Bots for Microsoft Teams. Now available to purchase online with free updates.

Related posts:

Snow Forecast for the UK: Stay at Home, Stay Safe, Stay Productive Merry Christmas Everybody! Lync: Programmatically switching video device during a call Weekly Update 4 April 2020: Teams API Throttling, Video Call Upgrade, Mapping External Users to Maps, Working from Quarantine Weekly Update 03 November 2018: A Day in the life of a Teams user, Farewell Win10S App, Call Park for Teams, Surface Video