Building a Zero-Latency Remote Control for the Web: A P2P Teleprompter Story

#webdev #javascript #webrtc #showdev

The Challenge: Instant Sync Without a Server When building PromptNinja, my goal was simple but ambitious: turn a smartphone into a remote control for a web-based teleprompter.

The traditional way to do this involves a client-server-client architecture (Phone → Server → PC). However, even a 100ms delay feels "mushy" when you are trying to control scrolling text while speaking. I needed something faster. I needed Zero Lag.

The Solution: WebRTC & PeerJS I decided to bypass the server entirely for the control signals. By using WebRTC, I established a direct Peer-to-Peer (P2P) connection between the two browsers.

Here’s the tech stack:

Frontend: Pure JS / PWA for offline capability.

P2P Layer: PeerJS (to handle the signaling and handshake).

Pairing: Dynamic QR Code generation for instant handshakes.

Why P2P?

Latency: Once the connection is established, the data channel is incredibly fast (<10ms).

Privacy: The script stays on your machine. The remote signals are direct. Nothing touches my servers.

Cost: Scaling a P2P app is significantly cheaper than maintaining high-frequency WebSockets for thousands of users.

The "Magic" QR Code Pairing To make it user-friendly, I implemented a QR Code system. The PC generates a unique Peer ID, and the phone scans it to initiate the DataConnection. No accounts, no login, no Bluetooth pairing.

See it in Action I’ve recorded a side-by-side demo showing the response time between the phone (remote) and the screen (prompter). It’s virtually indistinguishable from a wired connection.