Practice and reinforce the concepts from Lesson 2
Set up a professional coding stream without complexity!
Pros: Zero setup, works everywhere Cons: Limited customization
Scene 1: "Coding View"
Sources to add:
1. Window Capture → VS Code
2. Window Capture → Terminal (small, bottom-left)
3. Video Capture → Webcam (circle mask, bottom-right)
Scene 2: "Full Screen Share"
Sources to add:
1. Display Capture → Your main monitor
2. Audio Input → Microphone
Scene 3: "Starting Soon"
Sources to add:
1. Text → "Starting Soon..."
2. Browser → Lo-fi music visualizer
Settings → Output:
- Video Bitrate: 2500
- Audio Bitrate: 160
- Encoder: Hardware (if available)
Settings → Video:
- Base Resolution: Your monitor
- Output Resolution: 1920x1080
- FPS: 30
Create stream-overlay.html:
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
body {
margin: 0;
font-family: 'Fira Code', monospace;
color: #fff;
}
.social-bar {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff);
padding: 10px 30px;
border-radius: 30px;
box-shadow: 0 0 20px rgba(131, 56, 236, 0.5);
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px rgba(131, 56, 236, 0.5); }
50% { box-shadow: 0 0 30px rgba(131, 56, 236, 0.8); }
}
.ticker {
position: fixed;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.8);
padding: 10px;
overflow: hidden;
}
.ticker-content {
display: inline-block;
white-space: nowrap;
animation: scroll 30s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.live-badge {
position: fixed;
top: 20px;
left: 20px;
background: #ff0000;
color: white;
padding: 5px 15px;
border-radius: 5px;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
</style>
</head>
<body>
<div class="live-badge">● LIVE</div>
<div class="social-bar">
@YourUsername | !commands | !discord
</div>
<div class="ticker">
<div class="ticker-content">
🎵 Vibe Coding Session | Building Cool Stuff | Follow for More | Chat Commands: !project !theme !music 🎵
</div>
</div>
</body>
</html>
Add as Browser Source in OBS (1920x1080)!
Filters to add:
1. Noise Suppression
2. Gain: +10db
3. Compressor (default settings)
Use Restream.io free tier:
// Add to your code comments for viewers
// 👋 Chat: What feature should we add next?
// 🎯 Goal: Build a todo app in 30 minutes
// 💡 Tip: This pattern is called [explanation]
You now have:
Your first stream title: "My First Vibe Coding Stream! Building [Your Project] with Chat!"
Go live and have fun! Remember: authenticity > perfection 🎉