Mirror of github.com/Abhisingh18/PixelStream-BLD

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.next/
+npm-debug.log*
+.DS_Store
+*.local

README.md

@@ -0,0 +1,134 @@
+# PixelStream 🖥️➡️🌐
+
+A mini "TeamViewer for a browser". You open a web UI, hit **Start Browser**, and a
+**headless Chromium running inside a Docker container** streams its screen back to
+your browser in real time. You can **click, scroll, type, and navigate** — and it
+all happens inside that remote headless browser...........
+
+
+---
+
+## How it works
+
+```
+┌──────────────┐   click / scroll / type (WebSocket)   ┌───────────────┐   CDP    ┌──────────────────┐
+│  Web UI      │  ───────────────────────────────────► │  Node backend │ ───────► │ Headless Chromium │
+│ (Next.js)    │                                        │  (ws + CDP)   │          │   (Puppeteer)     │
+│  <canvas>    │  ◄─────────────────────────────────── │               │ ◄─────── │                  │
+└──────────────┘     live JPEG frames (WebSocket)       └───────────────┘ screencast └──────────────────┘
+```
+
+- **Frontend** (`/frontend`) — Next.js app. A `<canvas>` paints the live frames;
+  mouse/keyboard/scroll events are captured, converted to real browser
+  coordinates, and sent over a WebSocket.
+- **Backend** (`/backend`) — Node.js + `ws` + Puppeteer. Launches Chromium, uses the
+  **Chrome DevTools Protocol (CDP)** `Page.startScreencast` to get a continuous
+  stream of JPEG frames, and injects input via `Input.dispatchMouseEvent` /
+  `Input.dispatchKeyEvent`.
+- **Docker** — both services run in containers via `docker compose`. The backend
+  uses the official Puppeteer image (Chromium + system deps preinstalled).
+
+### Why CDP screencast (not a screenshot loop)?
+
+`Page.startScreencast` only emits a frame when the page actually changes, and it's
+much smoother and lower-latency than taking `page.screenshot()` on a timer.
+
+---
+
+## Run it
+
+### Option A — Docker (recommended)
+
+```bash
+docker compose up --build
+```
+
+Then open **http://localhost:3000** and click **Start Browser**.
+
+### Option B — Local (no Docker, for fast iteration)
+
+```bash
+# terminal 1
+cd backend && npm install && npm start      # ws server on :8080
+
+# terminal 2
+cd frontend && npm install && npm run dev    # UI on :3000
+```
+
+---
+
+## Deploy (Frontend → Vercel, Backend → Render)
+
+> ⚠️ The browser page is served over **HTTPS** (Vercel), so it can only open a
+> **secure** WebSocket (`wss://`). Render gives you an `https://…onrender.com`
+> URL, whose WebSocket endpoint is `wss://…onrender.com`. Plain `ws://` will be
+> blocked as mixed content.
+
+### 1. Backend on Render
+
+- New **Web Service** → connect this repo.
+- Runtime: **Docker**, Dockerfile path: `backend/Dockerfile`, context: `backend`
+  (or just use the included `render.yaml` Blueprint).
+- Deploy. Note the URL, e.g. `https://pixelstream-backend.onrender.com`.
+- Render injects `PORT` automatically — the server already reads it.
+
+### 2. Frontend on Vercel
+
+- New Project → import this repo → set **Root Directory = `frontend`**.
+- Add an environment variable:
+
+  | Key | Value |
+  |-----|-------|
+  | `NEXT_PUBLIC_WS_URL` | `wss://pixelstream-backend.onrender.com` |
+
+- Deploy. Open the Vercel URL → **Start Browser**.
+
+
+---
+
+## What works ✅
+
+- Start a headless Chromium in a Docker container from the web UI
+- Live screen streaming via CDP screencast (JPEG frames over WebSocket)
+- Mouse: move, left/right click, scroll
+- Keyboard: printable characters + common special keys (Enter, Backspace, Tab,
+  arrows, Esc, Delete…)
+- URL bar to navigate the remote browser
+- Accurate click mapping (canvas coords → real viewport coords)
+
+## Known limitations / where it gets hard ⚠️
+
+- **Keyboard coverage** — only common special keys are mapped; modifier
+  combos (Ctrl+C, Shift+selection) aren't fully wired yet.
+- **Single session** — one browser per server; no multi-user / multi-tab.
+- **Streaming** — JPEG-over-WebSocket is simple but bandwidth-heavy; WebRTC or
+  VP8/H.264 encoding would be smoother at scale.
+- **Chromium-in-Docker** — needs `--no-sandbox`, `--disable-dev-shm-usage`, and
+  `shm_size: 1gb` or Chromium crashes. (These are already set.)
+
+## Next steps 🚀
+
+1. Full keyboard model with modifiers + IME/composition events
+2. Multiple isolated sessions (one container per user, spawned on demand)
+3. WebRTC streaming for lower latency / adaptive quality
+4. Reconnect handling + session timeouts + resource cleanup
+
+---
+
+## Project structure
+
+```
+Pixel/
+├── docker-compose.yml
+├── backend/
+│   ├── Dockerfile
+│   ├── package.json
+│   └── server.js          # ws server + Puppeteer + CDP screencast/input
+└── frontend/
+    ├── Dockerfile
+    ├── package.json
+    ├── next.config.js
+    └── app/
+        ├── layout.js
+        └── page.js        # UI + canvas + input capture
+```

backend/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+.git

backend/Dockerfile

@@ -0,0 +1,34 @@
+# PixelStream backend — uses the official Puppeteer image which ships Chromium
+# and all its system dependencies preinstalled (saves a lot of pain).
+FROM ghcr.io/puppeteer/puppeteer:22.15.0
+
+USER root
+WORKDIR /app
+
+# Install: (1) Xvfb = virtual display so Chrome runs HEADFUL (big anti-bot win),
+# and (2) REAL Google Chrome stable — not just Chromium — because Chrome ships
+# proprietary codecs and Chrome-only signals that reCAPTCHA looks for.
+# The base image has an expired Google apt key that breaks `apt-get update`, so
+# we drop that repo first; we install Chrome straight from the official .deb.
+RUN rm -f /etc/apt/sources.list.d/google*.list \
+    && apt-get update \
+    && apt-get install -y --no-install-recommends xvfb xauth wget ca-certificates \
+    && wget -q -O /tmp/chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \
+    && (dpkg -i /tmp/chrome.deb || apt-get install -y -f --no-install-recommends) \
+    && rm -f /tmp/chrome.deb \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install deps first (better layer caching)
+COPY package.json ./
+RUN npm install --omit=dev
+
+# App code
+COPY . .
+
+# Use the real Google Chrome we just installed (not the bundled Chromium).
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+ENV CHROME_PATH=/usr/bin/google-chrome-stable
+
+EXPOSE 8080
+# Start Xvfb + node via entrypoint so Chrome runs headful and logs are visible.
+CMD ["sh", "/app/entrypoint.sh"]

backend/entrypoint.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+# Start a virtual display, then run the app in the foreground so Chrome can
+# launch headful and node's logs go straight to the container's stdout.
+Xvfb :99 -screen 0 1280x720x24 -nolisten tcp &
+export DISPLAY=:99
+exec node server.js

backend/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "pixelstream-backend",
+  "version": "1.0.0",
+  "description": "PixelStream backend — headless Chromium control over WebSocket using Puppeteer + CDP screencast",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js"
+  },
+  "dependencies": {
+    "puppeteer": "^22.15.0",
+    "puppeteer-extra": "^3.3.6",
+    "puppeteer-extra-plugin-stealth": "^2.11.2",
+    "ws": "^8.18.0"
+  }
+}

backend/server.js

@@ -0,0 +1,225 @@
+// PixelStream backend
+// ----------------------------------------------------------------------------
+// Flow:  Frontend  <--WebSocket-->  this server  <--CDP-->  headless Chromium
+//
+//  - "start"  : launch Chromium, begin CDP screencast, stream JPEG frames out
+//  - mouse/keyboard/scroll events come in, get injected via CDP Input.* events
+//  - "navigate": load a new URL in the page
+// ----------------------------------------------------------------------------
+
+const http = require("http");
+const { WebSocketServer } = require("ws");
+const puppeteer = require("puppeteer-extra");
+const StealthPlugin = require("puppeteer-extra-plugin-stealth");
+
+// Stealth plugin masks ~20 different headless/automation fingerprints that
+// sites like Google use to detect bots. Far stronger than manual masking.
+puppeteer.use(StealthPlugin());
+
+const PORT = process.env.PORT || 8080;
+const VIEWPORT = { width: 1280, height: 720 };
+// Default to Google. With real Chrome + headful (Xvfb) + stealth + your local
+// residential IP (Docker NATs through the host network), reCAPTCHA should now
+// accept manual solves. Override with START_URL if you want another landing page.
+const START_URL = process.env.START_URL || "https://www.google.com";
+
+const USER_AGENT =
+  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 " +
+  "(KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36";
+
+// Map of special (non-printable) keys -> Windows virtual key codes.
+// CDP needs windowsVirtualKeyCode for keys like Enter, Backspace, arrows, etc.
+const KEY_CODES = {
+  Backspace: 8,
+  Tab: 9,
+  Enter: 13,
+  Shift: 16,
+  Control: 17,
+  Alt: 18,
+  Escape: 27,
+  " ": 32,
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
+  ArrowLeft: 37,
+  ArrowUp: 38,
+  ArrowRight: 39,
+  ArrowDown: 40,
+  Delete: 46,
+};
+
+const server = http.createServer((req, res) => {
+  // simple health check
+  res.writeHead(200, { "Content-Type": "text/plain" });
+  res.end("PixelStream backend running\n");
+});
+
+const wss = new WebSocketServer({ server });
+
+wss.on("connection", (ws) => {
+  console.log("[ws] client connected");
+
+  let browser = null;
+  let page = null;
+  let client = null; // CDP session
+
+  const send = (obj) => {
+    if (ws.readyState === ws.OPEN) ws.send(JSON.stringify(obj));
+  };
+
+  const cleanup = async () => {
+    try {
+      if (browser) await browser.close();
+    } catch (_) {}
+    browser = page = client = null;
+  };
+
+  ws.on("message", async (raw) => {
+    let msg;
+    try {
+      msg = JSON.parse(raw.toString());
+    } catch {
+      return;
+    }
+
+    try {
+      // ---------------------------------------------------------------- START
+      if (msg.type === "start") {
+        if (browser) return; // already running
+        console.log("[browser] launching...");
+
+        browser = await puppeteer.launch({
+          headless: false, // headful under Xvfb -> much higher reCAPTCHA trust
+          executablePath: process.env.CHROME_PATH || undefined,
+          defaultViewport: VIEWPORT,
+          userDataDir: "/app/user-data", // persist cookies/profile across sessions
+          args: [
+            "--no-sandbox",
+            "--disable-setuid-sandbox",
+            "--disable-dev-shm-usage",
+            "--disable-gpu",
+            "--disable-blink-features=AutomationControlled", // hide automation flag
+            "--lang=en-US,en",
+            `--window-size=${VIEWPORT.width},${VIEWPORT.height}`,
+          ],
+        });
+
+        page = await browser.newPage();
+        await page.setViewport(VIEWPORT);
+
+        // --- make the headless browser look like a real one (less bot-detection) ---
+        await page.setUserAgent(USER_AGENT);
+        await page.setExtraHTTPHeaders({ "Accept-Language": "en-US,en;q=0.9" });
+        await page.evaluateOnNewDocument(() => {
+          // hide the webdriver flag that automation tools expose
+          Object.defineProperty(navigator, "webdriver", { get: () => undefined });
+          // pretend to have plugins + languages like a normal Chrome
+          Object.defineProperty(navigator, "languages", { get: () => ["en-US", "en"] });
+          Object.defineProperty(navigator, "plugins", { get: () => [1, 2, 3, 4, 5] });
+        });
+
+        await page.goto(START_URL, { waitUntil: "domcontentloaded" }).catch(() => {});
+
+        // CDP session: handles both screencast (out) and input (in)
+        client = await page.target().createCDPSession();
+
+        client.on("Page.screencastFrame", async ({ data, sessionId }) => {
+          send({ type: "frame", data }); // base64-encoded JPEG
+          try {
+            await client.send("Page.screencastFrameAck", { sessionId });
+          } catch (_) {}
+        });
+
+        await client.send("Page.startScreencast", {
+          format: "jpeg",
+          quality: 60,
+          maxWidth: VIEWPORT.width,
+          maxHeight: VIEWPORT.height,
+          everyNthFrame: 1,
+        });
+
+        send({ type: "started", ...VIEWPORT, url: page.url() });
+        console.log("[browser] started");
+        return;
+      }
+
+      if (!client || !page) return;
+
+      // ---------------------------------------------------------------- MOUSE
+      if (msg.type === "mousemove") {
+        await client.send("Input.dispatchMouseEvent", {
+          type: "mouseMoved",
+          x: msg.x,
+          y: msg.y,
+        });
+      } else if (msg.type === "mousedown" || msg.type === "mouseup") {
+        await client.send("Input.dispatchMouseEvent", {
+          type: msg.type === "mousedown" ? "mousePressed" : "mouseReleased",
+          x: msg.x,
+          y: msg.y,
+          button: msg.button === 2 ? "right" : "left",
+          clickCount: 1,
+        });
+      } else if (msg.type === "scroll") {
+        await client.send("Input.dispatchMouseEvent", {
+          type: "mouseWheel",
+          x: msg.x,
+          y: msg.y,
+          deltaX: msg.deltaX || 0,
+          deltaY: msg.deltaY || 0,
+        });
+      }
+
+      // ------------------------------------------------------------- KEYBOARD
+      else if (msg.type === "keydown") {
+        const key = msg.key;
+        if (key && key.length === 1) {
+          // printable character
+          await client.send("Input.dispatchKeyEvent", {
+            type: "keyDown",
+            text: key,
+            key,
+          });
+          await client.send("Input.dispatchKeyEvent", {
+            type: "keyUp",
+            key,
+          });
+        } else if (KEY_CODES[key] !== undefined) {
+          // special key
+          const code = KEY_CODES[key];
+          await client.send("Input.dispatchKeyEvent", {
+            type: "rawKeyDown",
+            key,
+            windowsVirtualKeyCode: code,
+            nativeVirtualKeyCode: code,
+          });
+          await client.send("Input.dispatchKeyEvent", {
+            type: "keyUp",
+            key,
+            windowsVirtualKeyCode: code,
+            nativeVirtualKeyCode: code,
+          });
+        }
+      }
+
+      // ------------------------------------------------------------- NAVIGATE
+      else if (msg.type === "navigate" && msg.url) {
+        let url = msg.url.trim();
+        if (!/^https?:\/\//i.test(url)) url = "https://" + url;
+        await page.goto(url, { waitUntil: "domcontentloaded" }).catch(() => {});
+        send({ type: "navigated", url: page.url() });
+      }
+    } catch (err) {
+      console.error("[error]", err.message);
+    }
+  });
+
+  ws.on("close", () => {
+    console.log("[ws] client disconnected");
+    cleanup();
+  });
+  ws.on("error", cleanup);
+});
+
+server.listen(PORT, () => console.log(`PixelStream backend listening on :${PORT}`));

docker-compose.yml

@@ -0,0 +1,23 @@
+services:
+  backend:
+    build: ./backend
+    ports:
+      - "8080:8080"
+    shm_size: "1gb" # prevents Chromium from crashing inside the container
+    environment:
+      - PORT=8080
+      - START_URL=https://www.google.com
+
+  frontend:
+    build: ./frontend
+    ports:
+      - "3000:3000"
+    environment:
+      # browser talks to the backend directly on the host port
+      - NEXT_PUBLIC_WS_URL=ws://localhost:8080
+      - WATCHPACK_POLLING=true # reliable hot-reload on Windows-mounted files
+    volumes:
+      - ./frontend:/app # live-mount source for hot reload
+      - /app/node_modules # keep container's node_modules
+    depends_on:
+      - backend

frontend/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+npm-debug.log
+.git

frontend/Dockerfile

@@ -0,0 +1,12 @@
+# PixelStream frontend (Next.js, dev mode for the assignment)
+FROM node:20-slim
+
+WORKDIR /app
+
+COPY package.json ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 3000
+CMD ["npm", "run", "dev"]

frontend/app/layout.js

@@ -0,0 +1,12 @@
+export const metadata = {
+  title: "PixelStream — Remote Browser",
+  description: "Control a headless Chromium running in Docker, from your browser",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0 }}>{children}</body>
+    </html>
+  );
+}

frontend/app/page.js

@@ -0,0 +1,226 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const WS_URL = process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8080";
+
+export default function Home() {
+  const canvasRef = useRef(null);
+  const wsRef = useRef(null);
+  const dims = useRef({ width: 1280, height: 720 });
+
+  const [status, setStatus] = useState("idle"); // idle | connecting | live
+  const [url, setUrl] = useState("https://www.google.com");
+
+  const send = useCallback((obj) => {
+    const ws = wsRef.current;
+    if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(obj));
+  }, []);
+
+  const start = useCallback(() => {
+    if (wsRef.current) return;
+    setStatus("connecting");
+
+    const ws = new WebSocket(WS_URL);
+    wsRef.current = ws;
+
+    ws.onopen = () => ws.send(JSON.stringify({ type: "start" }));
+
+    ws.onmessage = (e) => {
+      const msg = JSON.parse(e.data);
+      if (msg.type === "started") {
+        dims.current = { width: msg.width, height: msg.height };
+        if (msg.url) setUrl(msg.url);
+        setStatus("live");
+      } else if (msg.type === "navigated") {
+        if (msg.url) setUrl(msg.url);
+      } else if (msg.type === "frame") {
+        const img = new Image();
+        img.onload = () => {
+          const c = canvasRef.current;
+          if (!c) return;
+          c.getContext("2d").drawImage(img, 0, 0, c.width, c.height);
+        };
+        img.src = "data:image/jpeg;base64," + msg.data;
+      }
+    };
+
+    ws.onclose = () => {
+      wsRef.current = null;
+      setStatus("idle");
+    };
+    ws.onerror = () => setStatus("idle");
+  }, []);
+
+  // map a DOM event on the canvas -> real browser pixel coordinates
+  const toBrowser = (e) => {
+    const r = canvasRef.current.getBoundingClientRect();
+    return {
+      x: Math.round(((e.clientX - r.left) / r.width) * dims.current.width),
+      y: Math.round(((e.clientY - r.top) / r.height) * dims.current.height),
+    };
+  };
+
+  // forward keyboard while live
+  useEffect(() => {
+    const onKey = (e) => {
+      if (status !== "live") return;
+      // don't hijack typing in the URL bar
+      if (document.activeElement?.tagName === "INPUT") return;
+      e.preventDefault();
+      send({ type: "keydown", key: e.key });
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [status, send]);
+
+  const navigate = (e) => {
+    e.preventDefault();
+    send({ type: "navigate", url });
+    canvasRef.current?.focus();
+  };
+
+  const live = status === "live";
+
+  return (
+    <div style={S.page}>
+      <header style={S.header}>
+        <h1 style={S.logo}>
+          Pixel<span style={{ color: "#6366f1" }}>Stream</span>
+        </h1>
+        <span style={S.badge(status)}>{status.toUpperCase()}</span>
+      </header>
+
+      {!live && (
+        <button onClick={start} disabled={status === "connecting"} style={S.startBtn}>
+          {status === "connecting" ? "Starting…" : "▶  Start Browser"}
+        </button>
+      )}
+
+      {live && (
+        <form onSubmit={navigate} style={S.urlBar}>
+          <input
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            style={S.urlInput}
+            placeholder="Enter a URL and press Go"
+          />
+          <button type="submit" style={S.goBtn}>
+            Go
+          </button>
+        </form>
+      )}
+
+      <div style={S.stage}>
+        <canvas
+          ref={canvasRef}
+          width={1280}
+          height={720}
+          tabIndex={0}
+          style={{ ...S.canvas, display: live ? "block" : "none" }}
+          onMouseMove={(e) => send({ type: "mousemove", ...toBrowser(e) })}
+          onMouseDown={(e) => {
+            canvasRef.current.focus();
+            send({ type: "mousedown", ...toBrowser(e), button: e.button });
+          }}
+          onMouseUp={(e) => send({ type: "mouseup", ...toBrowser(e), button: e.button })}
+          onWheel={(e) =>
+            send({ type: "scroll", ...toBrowser(e), deltaX: e.deltaX, deltaY: e.deltaY })
+          }
+          onContextMenu={(e) => e.preventDefault()}
+        />
+        {!live && (
+          <div style={S.placeholder}>
+            Click <b>Start Browser</b> to launch a headless Chromium and stream it here.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const S = {
+  page: {
+    minHeight: "100vh",
+    background:
+      "linear-gradient(135deg, #ffffff 0%, #f5f3ff 35%, #ede9fe 70%, #ddd6fe 100%)",
+    color: "#3b0764",
+    fontFamily: "system-ui, sans-serif",
+    padding: 24,
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center", // center everything horizontally
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    marginBottom: 20,
+  },
+  logo: { margin: 0, fontSize: 28, fontWeight: 800, letterSpacing: -0.5, color: "#4c1d95" },
+  badge: (s) => ({
+    fontSize: 12,
+    fontWeight: 700,
+    padding: "4px 10px",
+    borderRadius: 999,
+    background: s === "live" ? "#7c3aed" : s === "connecting" ? "#a78bfa" : "#e9d5ff",
+    color: s === "idle" ? "#6d28d9" : "#fff",
+  }),
+  startBtn: {
+    fontSize: 16,
+    fontWeight: 700,
+    padding: "12px 22px",
+    borderRadius: 10,
+    border: "none",
+    background: "linear-gradient(135deg, #8b5cf6, #6d28d9)",
+    color: "#fff",
+    cursor: "pointer",
+    marginBottom: 20,
+    boxShadow: "0 6px 18px rgba(124,58,237,0.35)",
+  },
+  urlBar: { display: "flex", gap: 8, marginBottom: 16, width: 960, maxWidth: "100%" },
+  urlInput: {
+    flex: 1,
+    padding: "10px 14px",
+    borderRadius: 8,
+    border: "1px solid #c4b5fd",
+    background: "rgba(255,255,255,0.85)",
+    color: "#4c1d95",
+    fontSize: 14,
+    outline: "none",
+  },
+  goBtn: {
+    padding: "10px 20px",
+    borderRadius: 8,
+    border: "none",
+    background: "linear-gradient(135deg, #8b5cf6, #6d28d9)",
+    color: "#fff",
+    fontWeight: 700,
+    cursor: "pointer",
+  },
+  stage: {
+    width: 960,
+    height: 540,
+    maxWidth: "100%",
+    background: "#1e1b2e",
+    borderRadius: 12,
+    overflow: "hidden",
+    border: "1px solid #c4b5fd",
+    position: "relative",
+    boxShadow: "0 10px 30px rgba(124,58,237,0.18)",
+  },
+  canvas: { width: "100%", height: "100%", cursor: "crosshair", outline: "none" },
+  placeholder: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#a78bfa",
+    fontSize: 15,
+    textAlign: "center",
+    padding: 24,
+  },
+};

frontend/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: false, // avoid double WebSocket connects in dev
+};
+
+module.exports = nextConfig;

frontend/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "pixelstream-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "14.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

render.yaml

@@ -0,0 +1,16 @@
+# Render Blueprint — deploys the PixelStream backend (Node + Puppeteer + Chromium)
+# Create a new "Blueprint" on Render and point it at this repo, or create a
+# Web Service manually with: Runtime = Docker, Dockerfile path = backend/Dockerfile.
+services:
+  - type: web
+    name: pixelstream-backend
+    runtime: docker
+    dockerfilePath: ./backend/Dockerfile
+    dockerContext: ./backend
+    # Chromium needs memory — the free 512MB tier can OOM under load.
+    # "starter" (or higher) is recommended; "free" works for light demo use.
+    plan: free
+    healthCheckPath: /
+    envVars:
+      - key: START_URL
+        value: https://duckduckgo.com