About this demo
This live shopping demo shows how you can use PubNub's Chat SDK and JavaScript SDK with Red5 Pro to build an interactive live shopping experience with real-time chat, in-play betting, product highlights, and WebRTC streaming.
PubNub handles all real-time data — chat, reactions, presence, betting, commentary, product events, and video sync — through dedicated channels with no custom WebSocket server required. Red5 Pro delivers sub-second latency video so viewers see products the instant they appear and can purchase before they sell out.
Demo Features
Real-Time Chat - Live chat powered by the PubNub Chat SDK with instant message delivery
Live Viewer Count - Track audience size with hereNow() and presence events
Emoji Reactions - Floating emoji animations broadcast to all viewers via Pub/Sub
Live Commentary Feed - Timestamped match commentary on a dedicated channel
Product Highlights - Flash sale product cards pushed to all clients simultaneously via PRODUCT_HIGHLIGHT messages
In-Play Betting - Real-time bet proposals with odds, wagers, and win/loss resolution
Virtual Coin Economy - Client-side wallet with reactive balance updates and coin animations
Video Sync Control - Backend publishes STATUS and SEEK messages to synchronize playback across all clients
Scripted Event Timeline - Backend orchestrates chat, commentary, reactions, bets, and products on a timed script
PubNub Channel Architecture - Isolated channels for chat, reactions, commentary, bets, products, video control, and server control
WebRTC Picture-in-Picture - Go live from your browser with peer-to-peer WebRTC coordinated through PubNub signaling
PubNub as Signaling Server - SDP offer/answer exchange and ICE candidates flow through Pub/Sub
Go Live / Watch Stream - Publish camera + mic or subscribe to a remote stream in real-time
Mobile-First Responsive Layout - Swipe-based navigation with bet history, main view, and cart panels
Shopping Cart - Add products to bag with quantity controls and checkout UI
Self-Serve Walkthrough - Interactive guided tour explaining PubNub and Red5 Pro features with spotlight overlays