Making a virtual credits sequence for your video calls with OBS and CodePen

#codepen #obs #html #css

I saw Scott Hanselman make this tweet the other day about adding credits at the end of meetings:

I love this idea and decided to make one myself!

The Code

First, I went over to CodePen and threw together an array of text to scroll. I used a list of blog posts that I've written on the Netlify Blog.



let posts = [
  "An Incredibly Serious Discussion about Next.js at Reactathon",
  "Enabling AMP in your Next.js projects",
  "Adding Babel presets and plugins in Next.js",
  "React Children: The misunderstood prop",
  "Query an API at both build time and runtime with Next.js",
  "How to turn off telemetry in Next.js",
  "Add Web Monetization to your sites with Snippet Injection",
  "Logging in Next.js",
  ...
]

From there, I made a small function to add each of these into a <div>, which I add into an existing container on my page.



(() => {
  posts.map((p) => {
    document.querySelector('.container').innerHTML += `<div>${p}</div>`
  })
})()

In the CSS, I made the background limegreen and did some animations to scroll it. I also added a custom font and stuff, this part you can just do to your heart's desire.

Here's the final Pen for you to try out:

Feel free to fork this if you'd like to customize it!

OBS

OBS (Open Broadcaster Software) is a free program that works across operating systems that we can use for making a "virtual camera".

Download OBS, and make a new Scene. There's a Scenes panel in the bottom right of the app:

Click the + sign in the bottom left corner of and name it whatever you'd like. As you can see, I named mine "Scene", because I am not clever.

In the panel next to Scenes, there's a Sources panel. We're going to add two Sources to our Scene by clicking that + sign again.

First, add a Video Capture Device, and choose your webcam.

Then, add a Browser, and put in your CodePen's URL. I personally used my Pen in Live View, but you can also use Full Page View.

Yours will probably still have the green background. Let's remove that! In the Sources panel, right click on your Browser and click "Filters".

Under Effect Filters, click the + and add a Color Key filter. Make the Key Color Type Green, and adjust the levels until all of the green is transparent on your Pen in the preview, like so:

Close this window when you're happy with it, and now it's time for the final adjustments.

Inside of the main preview window in OBS, you can drag around your camera and text until you're happy with it. For example, I made my browser slightly wider than the preview itself, so that the scrollbar wouldn't appear in the frame.

And you're done! Click "Start Virtual Camera" on the bottom right so that you can use it in other applications:

Use it!

Now whenever you're in a Zoom, a Google Meet, a conference, livestreaming, or anything else, you can choose this virtual camera that you've made instead of your normal webcam!