About this demo
This live shopping demo shows how you can use PubNub's Chat SDK and JavaScript SDK with Red5 Cloud 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 Cloud delivers sub-second latency video so viewers see products the instant they appear and can purchase before they sell out. For customers needing full control over infrastructure, Red5 Pro provides the same performance for on-premises or self-managed deployments.
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 Cloud features with spotlight overlays