🎬 VibeScreen

A simple WebRTC-based screen sharing application for podcasters. Share screens bidirectionally with full-screen display, perfect for recording podcast guests' screens.

✨ Features

• 🔄 Bidirectional Screen Sharing: Both users can share their screens simultaneously
• 🖥️ Full Screen Display: Screens automatically fit to viewport (100vw/100vh)
• 🎯 Zero Setup: No login, no signup - just share a link
• 🔇 Audio-Free: Designed for screen capture only (muted by default)
• ⌨️ Hidden Controls: Toggle controls with Cmd+Shift+H
• 📱 Same WiFi Optimized: Works best when both users are on the same network
• 🎨 Clean UI: Minimal interface that stays out of the way

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone or navigate to the project:

   cd vibescreen

2. Install dependencies:

   npm install

3. Start the server:

   npm start

   For development with auto-restart:

   npm run dev

4. The server will start on port 3000:

   🎬 VibeScreen server running on port 3000
   📱 Local access: http://localhost:3000
   📱 Network access: http://<your-local-ip>:3000
   

📖 How to Use

On the Same WiFi

1. Find your local IP address:

   Mac/Linux:

   ifconfig | grep "inet " | grep -v 127.0.0.1

   Windows:

   ipconfig

   Look for "IPv4 Address" (usually starts with 192.168.x.x or 10.x.x.x)

2. Start the server (on the host computer):

   npm start

3. Open the app in your browser:

   http://localhost:3000
   

   A unique room will be created automatically.

4. Share the link with your guest:

   • Click "📋 Copy Link" button, or
   • Share the URL shown in your browser (e.g., http://192.168.1.100:3000?room=abc1234)

5. Both users:

   • Click "🎥 Start Sharing My Screen"
   • Select which screen/window to share
   • Both screens will appear side-by-side in full screen

6. Toggle controls:

   • Press Cmd+Shift+H (Mac) or Ctrl+Shift+H (Windows/Linux)
   • Controls will slide up/down

Over the Internet (using ngrok)

If you're not on the same WiFi, you can use ngrok to expose your local server:

1. Install ngrok:

   • Download from ngrok.com
   • Or install via homebrew: brew install ngrok

2. Start your server:

   npm start

3. In a new terminal, start ngrok:

   ngrok http 3000

4. Share the ngrok URL:

   • Copy the https://xxxx.ngrok.io URL
   • Share it with your guest
   • Both can access: https://xxxx.ngrok.io?room=yourroom

🎮 Controls

• Start Sharing: Click "🎥 Start Sharing My Screen"
• Stop Sharing: Click "⏹️ Stop Sharing" or click browser's native stop sharing button
• Toggle Controls: Cmd+Shift+H (Mac) or Ctrl+Shift+H (Windows/Linux)
• Copy Room Link: Click "📋 Copy Link"

🛠️ Technical Details

Architecture

• Frontend: Vanilla JavaScript, HTML5, CSS3
• Backend: Node.js + Express + Socket.IO
• WebRTC: Peer-to-peer connection for screen sharing
• Signaling: WebSocket (Socket.IO) for WebRTC handshake

WebRTC Flow

1. User A opens the app and joins a room
2. User B joins the same room via shared link
3. Socket.IO exchanges WebRTC signaling data (SDP offer/answer, ICE candidates)
4. WebRTC peer connection is established
5. Screen sharing streams flow directly between peers
6. Both users can share screens simultaneously

STUN Servers

The app uses free public Google STUN servers for NAT traversal:

• stun:stun.l.google.com:19302
• stun:stun1.l.google.com:19302
• stun:stun2.l.google.com:19302

These work well for local network and most internet connections. TURN servers are not needed for same-WiFi scenarios.

📂 Project Structure

vibescreen/
├── server.js           # Node.js server with Socket.IO signaling
├── package.json        # Dependencies
├── README.md          # This file
└── public/
    ├── index.html     # Main HTML page
    ├── styles.css     # Styling
    └── app.js         # WebRTC client logic

🔧 Customization

Change Port

Edit server.js or set environment variable:

PORT=8080 npm start

Modify Layout

Edit public/styles.css:

• .videos-container.single - single screen layout
• .videos-container.dual - dual screen layout

Add More STUN/TURN Servers

Edit iceServers in public/app.js:

const iceServers = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'turn:your-turn-server.com', username: 'user', credential: 'pass' }
  ]
};

🐛 Troubleshooting

Screen sharing not working?

• Chrome/Edge: Works out of the box
• Firefox: Works but may show different sharing options
• Safari: Requires HTTPS (use ngrok or enable experimental features)

Can't connect to the other user?

• Make sure both are using the same room URL
• Check firewall settings
• Try using ngrok if on different networks
• Check browser console for errors (F12)

Poor quality?

• Make sure both users are on the same WiFi
• Close other bandwidth-heavy applications
• The stream quality is determined by WebRTC's automatic adaptation

📝 Use Case: Recording Podcast Guest's Screen

1. Setup: Start server on your computer
2. Invite: Send link to your guest via WhatsApp
3. Connect: Guest opens link and shares their screen
4. Record: Use screen recording software (QuickTime, OBS, etc.) to record the full-screen display
5. Hide UI: Press Cmd+Shift+H to hide all controls
6. Clean Recording: You now have a clean full-screen recording of your guest's screen

👨‍💻 Credits

Created by Aemal Sayer

Built with ❤️ for podcasters who want simple, clean screen sharing.

📄 License

MIT License - feel free to use for your podcasts!

Copyright (c) 2025 Aemal Sayer. See LICENSE file for details.

🙋 Support

For issues or questions, check:

• Browser console (F12) for JavaScript errors
• Server terminal for connection logs
• Ensure browsers have permission to access screen sharing

---

Happy Podcasting! 🎙️