From 9cc395d2a70189831717e13a1c22e0831c2cf85f Mon Sep 17 00:00:00 2001 From: enzotar Date: Tue, 10 Mar 2026 20:49:35 -0700 Subject: [PATCH] feat(demo): pixel streaming demo with delta+RLE encoding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Source (index.html): physics sim → pixel capture → delta XOR + RLE encode → WebSocket - Receiver (receiver.html): WebSocket → decode delta/keyframe → render + click interaction + RTT - Relay (relay.js): bidirectional WebSocket relay (pixels ↓ signals ↑) - 97% compression (18KB/frame vs 675KB raw RGBA) - Interactive: click on receiver → impulse force on source → round-trip latency measured - Frame types: 0x11 keyframe (every 60 frames), 0x12 delta+RLE - No buffer bloat: drops frames when pipe is busy --- engine/demo/.gitignore | 1 + engine/demo/index.html | 760 ++++++++++++++++++++++++++++++++++ engine/demo/package-lock.json | 37 ++ engine/demo/package.json | 15 + engine/demo/receiver.html | 536 ++++++++++++++++++++++++ engine/demo/relay.js | 69 +++ 6 files changed, 1418 insertions(+) create mode 100644 engine/demo/.gitignore create mode 100644 engine/demo/index.html create mode 100644 engine/demo/package-lock.json create mode 100644 engine/demo/package.json create mode 100644 engine/demo/receiver.html create mode 100644 engine/demo/relay.js diff --git a/engine/demo/.gitignore b/engine/demo/.gitignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/engine/demo/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/engine/demo/index.html b/engine/demo/index.html new file mode 100644 index 0000000..d179ab9 --- /dev/null +++ b/engine/demo/index.html @@ -0,0 +1,760 @@ + + + + + + + DreamStack — Pixel Stream Source + + + + + + +
+

DreamStack Engine — Source

+
ds-physics v0.9.0 · pixel streaming via ds-stream
+
+ +
+
Disconnected
+
Relay: ws://localhost:9800/source
+
+ +
+ + + + + +
+
+ +
+
+
Physics Simulation
+ +
+
FPS 0
+
Bodies 0
+
Joints 0
+
Events 0
+
+
+ +
+
CAPTURE
+
↓
+
+
ds-stream frame
+
—
+
+
+
Header (16B)
+
—
+
+
↓
+
WebSocket
+
↓
+
+
Streamed
+
—
+
+
+
+ + + + + \ No newline at end of file diff --git a/engine/demo/package-lock.json b/engine/demo/package-lock.json new file mode 100644 index 0000000..5004f6e --- /dev/null +++ b/engine/demo/package-lock.json @@ -0,0 +1,37 @@ +{ + "name": "demo", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "demo", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "ws": "^8.19.0" + } + }, + "node_modules/ws": { + "version": "8.19.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz", + "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==", + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + } + } +} diff --git a/engine/demo/package.json b/engine/demo/package.json new file mode 100644 index 0000000..09b8bbb --- /dev/null +++ b/engine/demo/package.json @@ -0,0 +1,15 @@ +{ + "name": "demo", + "version": "1.0.0", + "main": "relay.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "description": "", + "dependencies": { + "ws": "^8.19.0" + } +} diff --git a/engine/demo/receiver.html b/engine/demo/receiver.html new file mode 100644 index 0000000..2363a03 --- /dev/null +++ b/engine/demo/receiver.html @@ -0,0 +1,536 @@ + + + + + + + DreamStack — Pixel Stream Receiver + + + + + + +
+

DreamStack — Receiver

+
ds-stream delta receiver · interactive
+
+ +
+
Disconnected
+
Relay: ws://localhost:9800/stream
+
+
👆 Click on the stream to interact — forces sent via relay, round-trip latency measured +
+ +
+
+
Pixel Stream · Click to Interact
+
+ +
Waiting for source stream...
+
+ +
+
Frames 0
+
Bytes 0B
+
FPS 0
+
Decode —
+
RTT —
+
Saved —
+
+
+ +
+
+
⏱ Round-Trip Latency
+
—
+
click → source → render → back
+
Click to measure
+
+
+
📦 Compression
+
—
+
delta + RLE vs raw RGBA
+
—
+
+
+
Frame Type
+
—
+
+
+
Interactions
+
0 clicks sent
+
+
+
+ + + + + \ No newline at end of file diff --git a/engine/demo/relay.js b/engine/demo/relay.js new file mode 100644 index 0000000..4d90d91 --- /dev/null +++ b/engine/demo/relay.js @@ -0,0 +1,69 @@ +// DreamStack ds-stream Pixel Relay Server (bidirectional) +// Source → Receiver: pixel frames +// Receiver → Source: interaction signals (clicks, drags) +const { WebSocketServer } = require('ws'); +const http = require('http'); + +const PORT = 9800; +const sources = new Set(); +const receivers = new Set(); +let frameCount = 0; +let byteCount = 0; +let signalCount = 0; + +const server = http.createServer((req, res) => { + res.writeHead(200, { + 'Content-Type': 'text/plain', + 'Access-Control-Allow-Origin': '*', + }); + res.end(`ds-stream relay | sources: ${sources.size} | receivers: ${receivers.size} | frames: ${frameCount} | signals: ${signalCount} | bytes: ${byteCount}`); +}); + +const wss = new WebSocketServer({ server }); + +wss.on('connection', (ws, req) => { + const path = req.url || '/'; + + if (path.startsWith('/source')) { + sources.add(ws); + console.log(`[relay] source connected (${sources.size} total)`); + + ws.on('message', (data) => { + frameCount++; + byteCount += data.length; + for (const recv of receivers) { + if (recv.readyState === 1) recv.send(data); + } + }); + + ws.on('close', () => { + sources.delete(ws); + console.log(`[relay] source disconnected (${sources.size} remaining)`); + }); + } else { + receivers.add(ws); + console.log(`[relay] receiver connected (${receivers.size} total)`); + + ws.on('message', (data) => { + // Forward interaction signals from receiver → source + signalCount++; + for (const src of sources) { + if (src.readyState === 1) src.send(data); + } + }); + + ws.on('close', () => { + receivers.delete(ws); + console.log(`[relay] receiver disconnected (${receivers.size} remaining)`); + }); + } +}); + +server.listen(PORT, () => { + console.log(`\n ╔═══════════════════════════════════════╗`); + console.log(` ║ ds-stream relay on :${PORT} ║`); + console.log(` ║ Source: ws://localhost:${PORT}/source ║`); + console.log(` ║ Receiver: ws://localhost:${PORT}/stream ║`); + console.log(` ║ Mode: bidirectional (pixels + signals) ║`); + console.log(` ╚═══════════════════════════════════════╝\n`); +});