How do you set up a stream frame?
- Open the Stream Frames setup page.
- Under What are you framing?, pick Camera, Chat or Screen. If you picked Camera, set Orientation to Landscape or Portrait. Each piece is its own Browser Source, so add all three if you like.
- Pick a preset. With Classic you choose the color. The other presets come with their own colors, font and art.
- Type your channel name or any word you like in the Label field. On camera and chat it shows on the tab above the frame, and on screen it shows on the plate at the bottom.
- Copy the URL and add it to OBS as a Browser Source: 640 × 360 for a camera (360 × 640 for a portrait camera), 420 × 720 for chat, 1920 × 1080 for the screen.
The preview shows the frame with a person's silhouette or sample chat lines. Those are just placeholders. On stream the middle of the frame is empty.
Why is the frame behind my camera?
In OBS, whatever is higher in the Sources list sits in front in the scene. Move the frame source above your camera (Video Capture Device) or Chat Box. You can also right-click the source and pick Order → Move to Top.
To move your camera and frame together, select both, right-click and pick Group Selected Items. When you resize the group, both scale together.
The screen frame should sit in front of the whole scene. Put it at the very top of the list so your game and other sources stay under it.
How do you fit your camera into the frame?
The opening in the middle of the frame is a little smaller than its outer edge. Your camera should fill the opening but stay inside the outer edge, or the extra shows around the frame. At the recommended sizes, these fit well:
| Piece | Frame size | Source inside |
|---|---|---|
| Landscape camera | 640 × 360 | Camera at 590 × 296, centered on the frame |
| Portrait camera | 360 × 640 | Camera at 306 × 572, centered on the frame |
| Chat | 420 × 720 | Chat Box at 370 × 660, centered on the frame |
| Screen | 1920 × 1080 | Game or screen capture fills the whole scene |
A 16:9 camera scaled to 590 wide is 332 tall, so crop the top and bottom evenly until it's 296. Hold Alt (Option on Mac) and drag the top and bottom edges of the source, or right-click the camera and use the Crop fields in Transform → Edit Transform. For a portrait camera it's the other way around: a 9:16 camera scaled to 572 tall is 322 wide, so crop the left and right evenly until it's 306.
If you use a bigger frame, these sizes scale with it: in a 1280 × 720 camera frame the camera is 1180 × 592. For a square camera, set the Browser Source width and height to match and the frame is drawn to that shape.
What do the preset and animations change?
The preset sets the frame's shape, art, colors and font: a pagoda roof and tassels in Dynasty, gold trim and turquoise gems in Rift, grass blocks and a hotbar in Blocks. Give your Chat Box, Stream Alerts and Sub Goal the same preset and everything on screen matches.
With Animations on, light sweeps around the frame, the lines glow, and lanterns, torches or sparks move depending on the preset. They're kept light. Still, if your PC struggles while you game, turn Animations off. That adds motion=0 to the URL and the frame stays still.
All the art was drawn from scratch, with no game logos or artwork.
How do I change the frame later?
Paste the URL from OBS into the Widget URL field on the setup page and your settings come back. Change the preset, piece or label, copy the new URL and paste it over the old one in the Browser Source. To change the preset on all your widgets at once, use the Presets page.