Pages Menu
TwitterRssFacebook

Posted by on Dec 3, 2020 in Everything Else | 1 comment

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

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!

1 Comment

  1. Thank you Tom & Happy Christmas!

Post a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.