Overview

A real-time remote browser streaming system that allows users to interact with a browser instance running on a server through a web interface.

Click the image above to watch the full demo video

📋 Table of Contents

• 🏗️ Architecture & Design Choices
  • System Architecture
  • Technology Stack
  • Key Design Decisions
• 🚀 Setup
• 🛠️ Prerequisites
• 💻 Local Development
• 🔍 Troubleshooting
• 🌐 Server
• 🌐 Client
• 📈 Future Improvements

🏗️ Architecture and Design Choices

System Architecture

1
2
3
4
5
6

┌─────────────────┐     ┌───────────────────────┐     ┌────────────────────┐
│                 │     │                       │     │                    │
│  Web Client     │◄───►│  Go Server            │◄───►│  Playwright        │
│  (Browser)      │     │  (WebRTC Signaling)   │     │ (Headless Browser) │
│                 │     │                       │     │                    │
└─────────────────┘     └───────────────────────┘     └────────────────────┘

Technology Stack

1. Server-Side (Go)

• Language/Framework: Go (Golang)

  • Chosen for its excellent concurrency model and performance
  • Built-in HTTP server for handling WebRTC signaling
  • Strong type safety and standard library

• WebRTC (Pion Library)

  • Enables real-time, peer-to-peer communication
  • Handles NAT traversal using STUN servers
  • Efficient data channel for browser control messages
  • Low-latency video streaming capabilities

• Playwright-Go

  • Cross-browser automation
  • Headless browser control
  • Screenshot capture for screen sharing
  • JavaScript execution in the browser context

2. Client-Side (JavaScript/HTML5)

• WebRTC Data Channels

  • Bi-directional communication
  • Low-latency message passing

• Canvas API

  • Efficient rendering of remote screen updates

Key Design Decisions

1. WebRTC Over WebSockets

   • Chose WebRTC for its peer-to-peer capabilities
   • Lower latency for real-time interaction
   • Better handling of media streaming
   • Built-in NAT traversal

2. Screenshot-Based Streaming

   • Simple implementation using Playwright’s screenshot API
   • Frame-by-frame updates for screen sharing

3. Graceful Shutdown

   • Proper cleanup of resources on server shutdown
   • Signal handling for Ctrl+C
   • Graceful degradation of services

4. Security Considerations

   • Input validation on both client and server
   • CORS protection

5. Error Handling

   • Comprehensive logging throughout the application
   • Graceful recovery from panics
   • User-friendly error messages

🚀 Setup

1. Clone the repository and navigate to the project directory:

   1 2	git clone https://github.com/johntharian/Remote-Browser-Client-Server-System.git cd Remote-Browser-Client-Server-System

Prerequisites

Install Go

Download the installer from golang.org/dl - Run the installer and follow the prompts

Install Node.js and npm

1. macOS (using Homebrew):

   1	brew install node

2. Linux (Debian/Ubuntu):

   1 2	curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt-get install -y nodejs

3. Windows:

   • Download the LTS version from nodejs.org
   • Run the installer and follow the prompts

4. Verify installations:

   1 2 3

   go version node --version npx --version

Local Development

1. Install Go dependencies:

   1	go mod tidy

2. Install Playwright

   1 2 3 4 5

   # Install Playwright go install github.com/playwright-community/playwright-go/cmd/playwright@v0.5200.0 # Install browsers (this might take a few minutes) npx playwright install --with-deps

3. Verify Playwright installation:

   1	npx playwright --version

4. Start the WebRTC server:

   1	go run cmd/server/main.go

5. Open index.html (client) in a browser

Troubleshooting

• If you encounter browser-related issues, try reinstalling Playwright browsers:

  1	npx playwright install --force

Server

• Runs a browser instance using Playwright.
• Streams the rendered contents of the browser (e.g., a webpage opened in the browser instance) to connected clients.
• Accepts user actions (e.g., clicks, typing, navigation) from a client and applies them to the Playwright browser instance.

Client

• Runs locally in a browser.
• Displays the streamed contents of the remote Playwright browser session.
• Lets the user interact with the page (e.g., by clicking, scrolling, or typing).
• Sends those interactions back to the server, where they are executed in the Playwright-controlled browser.

Future Improvements

Core Functionality

1. Chrome DevTools Protocol (CDP) Integration
   • Leverage Playwright’s CDP support for more efficient browser session streaming
   • Implement frame-by-frame video streaming for smoother remote interaction

Security & Reliability

2. Security Features
   • Add authentication and authorization
   • Implement session encryption
   • Add rate limiting and abuse prevention

Scalability

3. Multi-User Support
   • Session sharing capabilities
   • Collaborative browsing features

Last modified on 2025-10-03