🖥️ Remote Screen Share

A simple and elegant screen sharing application for Windows using Electron and WebRTC. Share your screen with anyone on your local network through a web browser.

✨ Features

• Easy to Use: One-click screen sharing
• LAN Support: Works on local network without internet
• Browser Viewing: Viewers can watch from any modern web browser
• Real-time Streaming: Low-latency screen sharing using WebRTC
• Multiple Viewers: Support for multiple simultaneous viewers
• No Account Needed: No registration or sign-up required

🚀 How It Works

1. Owner runs the Electron app on Windows
2. App generates a shareable link (e.g., http://192.168.1.100:3000)
3. Owner shares this link with viewers
4. Viewers open the link in their browser (Chrome, Firefox, Edge, etc.)
5. Viewers can watch the owner's screen in real-time

📋 Requirements

• Owner: Windows PC with Node.js installed
• Viewers: Any device with a modern web browser
• Both must be on the same network (LAN)

🔧 Installation

1. Clone or download this repository

2. Install dependencies:

npm install

🎯 Usage

Running the App

npm start

This will:

• Start the HTTP server (port 3000)
• Start the WebSocket signaling server (port 3001)
• Open the Electron window with owner controls

Sharing Your Screen

1. Click "Start Sharing" in the Electron window
2. Copy the generated link (will show your LAN IP)
3. Send this link to anyone you want to share with
4. They open the link in their browser
5. Click "Stop Sharing" when done

📁 Project Structure

remote-screen-share/
├── main.js                 # Electron main process
├── package.json           # Project configuration
├── renderer/
│   ├── owner.html        # Owner UI (Electron window)
│   ├── owner.js          # Owner logic & WebRTC sender
│   ├── index.html        # Viewer UI (browser page)
│   └── viewer.js         # Viewer logic & WebRTC receiver
├── server/
│   ├── httpServer.js     # HTTP server for viewer page
│   └── signaling.js      # WebSocket signaling server
└── webrtc/
    └── config.js         # WebRTC configuration

🔍 How It Works (Technical)

1. Screen Capture: Electron's desktopCapturer API captures the screen
2. WebRTC: Creates peer-to-peer connection for streaming
3. Signaling: WebSocket server exchanges connection information
4. HTTP Server: Serves the viewer page to browsers

Architecture

┌─────────────────┐         ┌──────────────────┐
│  Electron App   │         │  WebSocket       │
│  (Owner)        │◄───────►│  Signaling       │
│                 │         │  Server          │
│  Screen Capture │         │  (Port 3001)     │
│  WebRTC Sender  │         └──────────────────┘
└─────────────────┘                 ▲
                                    │
                                    │
                          ┌─────────┴──────────┐
                          │                    │
                    ┌─────▼──────┐      ┌─────▼──────┐
                    │  Browser   │      │  Browser   │
                    │  (Viewer1) │      │  (Viewer2) │
                    │            │      │            │
                    │  WebRTC    │      │  WebRTC    │
                    │  Receiver  │      │  Receiver  │
                    └────────────┘      └────────────┘

🌐 Network Configuration

The app automatically detects your LAN IP address. Make sure:

• Owner and viewers are on the same network
• Firewall allows connections on ports 3000 and 3001
• If using Windows Firewall, allow Node.js and Electron

Opening Firewall Ports (Windows)

If viewers can't connect, you may need to allow the ports:

# Run as Administrator
netsh advfirewall firewall add rule name="Screen Share HTTP" dir=in action=allow protocol=TCP localport=3000
netsh advfirewall firewall add rule name="Screen Share WebSocket" dir=in action=allow protocol=TCP localport=3001

🛠️ Development

Run in Development Mode

npm start

Build Executable

npm run build

This creates a Windows installer in the dist/ folder.

🐛 Troubleshooting

"Connection failed" error

• Check if both devices are on the same network
• Verify firewall settings
• Try using the IP address shown in the Electron window

Video not showing

• Make sure owner clicked "Start Sharing"
• Try refreshing the browser page
• Check browser console for errors (F12)

"No screen source found"

• Electron needs permission to capture screen
• Restart the app if permission was denied

📝 Configuration

You can modify these settings:

Ports (in respective files):

• HTTP Server: 3000 (server/httpServer.js)
• WebSocket: 3001 (server/signaling.js)

Video Quality (renderer/owner.js):

• Resolution: 1280x720 to 1920x1080
• Frame Rate: 30 fps

STUN Servers (webrtc/config.js):

• Default: Google's public STUN servers
• Can add your own TURN servers for internet support

🚀 Future Enhancements

• Internet support with TURN servers
• Audio sharing
• Mouse cursor highlighting
• Recording functionality
• Password protection
• Multiple screen selection
• Mobile app support

📄 License

ISC

🤝 Contributing

Feel free to open issues or submit pull requests!

⚠️ Security Note

This app is designed for LAN use. For internet sharing, you should:

• Add authentication
• Use HTTPS/WSS
• Implement TURN servers
• Add encryption

💡 Tips

• Better Performance: Close unnecessary apps to reduce CPU usage
• Privacy: Only share with trusted people
• Network: Use wired connection for best quality
• Multiple Monitors: App captures primary monitor by default

---

Made with ❤️ using Electron and WebRTC