🔐 Build-Time Environment Injection

process.env.REMOAT_API_KEY

This demo was bundled with an API key read directly from .env at compile time. Zero hardcoded credentials in the repository source code.

Injected API Key: loading...
Signaling Gateway: loading...
Bundle Timestamp: loading...
Session Status: ● Connecting P2P...

⚡ Interactive QA Sandbox

Test Remote Control

Interact with these widgets below. A connected developer can view DOM mutations, trigger remote clicks, evaluate console logs, and inspect network requests in real time with sub-10ms latency.

Remote Click Counter

Remote tester or developer can click buttons

0

Input & Privacy Masking

Inputs are masked client-side before WebRTC broadcast

Console Log Streamer

Dispatches telemetry to developer DevTools REPL

// Log output will mirror here and in remote DevTools

Network Telemetry Streamer

Simulates XHR/Fetch network roundtrips

Ready to inspect fetch() calls

📜 Nested Scroll Hierarchy Test Case

Level 1 Outer → Level 2 Inner V → Level 3 Deep & 2D H

Test nested scroll event recording, wheel event isolation, and synthetic remote scroll climbing across nested scrollable containers.

Outer: 0px
|
Inner Vertical: 0px
|
Deep: 0px
|
Inner Horizontal: 0px
|
Target: none
📦 LEVEL 1: Outer Scroll Container (Scroll to see children)

Outer Row A: Scroll this outer container. Wheeling over inner boxes independently moves the inner boxes without moving this container.

Outer Row B: Telemetry stream monitoring active.
📥 LEVEL 2A: Inner Vertical Scroll (Nested in Level 1) Independent Scrollbar
Inner Item 1: Real-time wheel event isolation
Inner Item 2: DOM subtree offset preservation
⚡ LEVEL 3: Deeply Nested (Level 3 Deep)
Deep Log #1: Nested scroll coordinate captured
Deep Log #2: WebRTC packet dispatched
Deep Log #3: Deep end reached
Inner Item 3: Zero drift scroll sync
Inner Item 4: End of inner vertical items
↔️ LEVEL 2B: Horizontal 2D Scroll (Nested in Level 1)
Card A: 10ms Latency
Card B: P2P Mesh Sync
Card C: 120Hz Capture
Card D: Auto-Climb Tree
Card E: Last Horizontal Item
Outer Row C: Bottom of outer container

🖼️ CDN High-Res Images & Native Video Streams

Unsplash CDN • Google Cloud Storage CDN

Test image serialization, network payload streaming, and HTML5 video streaming over WebRTC telemetry.

📸 High-Resolution CDN Images (Responsive • Lazy Loaded)
Microprocessor Circuitry
Circuitry • 600px CDN
Cyber Security Data Stream
Data Stream • Fast CDN
Global Telemetry Network
Global Mesh • Satellite
Cybersecurity Console
Terminal • High Contrast
Modern Developer Station
Workspace • Dual Display
Fluid Neon Shader
Fluid Dynamics • Neon
🎬 HTML5 Native Video Streams (Google Cloud Storage CDN)
Video 1: Big Buck Bunny
Source: Google CDN • 1080p MP4
Video 2: Elephants Dream
Source: Google CDN • 3D Render
Video 3: For Bigger Blazes
Source: Google CDN • Fast Action Keyframes

📺 Embedded Iframes & YouTube Sandbox

Cross-Origin Iframes • YouTube Embeds • Live Map

Tests cross-origin iframe boundaries, sandboxing, click event propagation, and rrweb replay masking/preservation of embedded video players.

YouTube 1: WebRTC & Real-Time Web
YouTube No-Cookie CDN Embed
YouTube 2: Interactive Stream
YouTube Live Player Embed
YouTube 3: Historic Tech Archive
Standard Aspect-Ratio Embed
Interactive Iframe: OpenStreetMap Live Map
Interactive Pan & Zoom Map Iframe

💻 Source Code Integration

src/main.js 
import ReMOAT from '@remoat.dev/sdk';

// Initialize with your API key
ReMOAT.init({
  apiKey: 'tpk_your_workspace_api_key',
  mode: 'floating', // 'floating' pill, 'hidden', or 'custom'
  redactSelectors: ['.credit-card-input', '[data-sensitive="true"]'],
  redactHeaders: true,
});