Setup Eleventy Project for Creating Twitch Scenes

Create Twitch Scene Templates and Style

Embed Twitch Chat in Scenes Using ComfyJS

Respond to Twitch Chat Commands With Scene Elements and ComfyJS

Setup Custom Twitch Scenes in OBS

Develop Custom Twitch Scenes and Setup in OBS

See how to include our custom Twitch scenes in [OBS](https://obsproject.com/download), including adding and positioning video and display capture areas. This step includes having our Twitch scenes project running in the background.

https://app.egghead.io/api/v1/lessons/egghead-setup-custom-twitch-scenes-in-obs/subtitles

Instructor: [0:00] With our scenes ready to go, it's time to set them up in a streaming software. For this lesson, we're going to be using OBS, which is an open-source software. You can download that from obsproject.com/download. The initial setup of OBS is not included in this lesson.

[0:18] Before we launch OBS and get ready for our stream, I have terminal open with our project. I'm going to run our start command here. The reason I'm going to be using terminal is to prevent accidentally closing a VS Code window that is running our scenes. We need to make sure that they are actively running throughout our stream.

[0:40] I mentioned in Lesson 1 that we're using port 8090 for a particular reason. This is to ensure, when you relaunch OBS for each stream, that there's hopefully no conflicts with another running project. Now, we're ready to open OBS. I already have some scenes set up for my own use, but we'll set up some new ones using the scenes that we have created.

[1:03] This is the default layout in the more recent versions of OBS. Over here, in the bottom left is my Scenes panel. I'm going to click this + button. We're going to create three scenes. One for our pre-show, our main stage, and our host, which corresponds to the scenes we have created.

[1:22] You can name it whatever you would like. It'll help you identify it as you go to use them throughout your stream. Now with the new Sources panel available and our Twitch pre-show selected, we will hit the plus button and choose a browser source. We need to give it a unique name. I like to append scene at the end.

[1:44] It'll place in a default there, but we're going to swap out the URL for our localhost and also update the dimensions to 1280 x 720, so that it fills the screen. Go ahead and say, OK. You'll see that has updated and it's now on the screen.

[2:02] If you wanted to at this time, you could go ahead and test your chat commands and embedded chat by using the pop-out technique, we looked at the previous lessons. For our second scene, we'll add our Twitch host scene. Say, OK. Then once again, select a browser source, naming this Twitch host scene, and the same steps as before, but switching to our host path.

[2:26] With this one, we had created for ourselves a capture area. In this instance, under our Sources, we're also going to add our webcam source. For a webcam or other video source, we'll say add, and select the video capture device. We'll name this Twitch webcam. For something like our webcam source, we're going to have this be also available for our main stage.

[2:54] We'll reuse the source that we set up here. Be sure to choose the actual device that you would like to use. As you can see, I have some extra background things. We'll get rid of that by a couple steps. We'll reduce down the size. We don't need to broadcast quite that largely.

[3:12] Also, importantly, to have it appear in this capture area, we'll move it down below our main scene and give it a small adjustment to make sure that it fills that space. With that, we have our capture area in place. If you want it turned off, you can actually toggle the visibility here.

[3:33] For our last one, we'll set a Twitch main as our scene and then add a browser source of Twitch main scene. For the last time, we'll do our 8090 but we'll keep it at our root, since that's where our main capture area was defined. Then we can see those in place.

[3:54] First let's add the webcam. When we choose video capture area, we're going to select Add Existing. This way you'll have continuity as you change between scenes. We just need to reposition. We'll do two things here. We'll reposition it on the actual stage and also move it underneath the main scene.

[4:15] This part we'll cover up in just a second. I might resize it down more. There we go. Then our last source is a display capture. We're going to get a little bit of a picture and picture effect here. You can see that because of the dimensions. We're going to have just a slight cut-off of our display.

[4:39] We want to place this above the webcam so it conceals this extra edge but behind the main scene. The other thing you can do is lock these individual layers so that way you don't accidentally move them around. With that, we have our Twitch scenes set up.

[4:56] Your last step before you stream is to make sure that your audio device is correctly selected if you're planning to use audio throughout your stream. Then you'll make sure to select the scene you want to appear first as you begin your stream.

[5:12] Then to change, you simply can select a new scene within the scene panel as your stream continues. In this lesson, we learned how to add a new scene within OBS, and we learned how to create a browser source that would point to our localhost of our Scenes project.

[5:30] We also learned how to place items within capture areas and ensured that those were placed below our scene so that our scene would mask capture areas appropriately.

Setup Custom Twitch Scenes in OBS

Share this video with your friends

Course

Develop Custom Twitch Scenes and Setup in OBS