Skip to main content

Setup

Introduction​

This guide will show you how to integrate our open-source VP Real-Time Player into your web applications to enable low-latency video playback directly in the browser.

The VP Real-Time Player is a lightweight, open-source media player. Designed for low-latency live streaming and smooth playback across all major browsers and devices, it offers an easy way to bring real-time video directly to the web, no plugins, no fuss.

Whether you're building a custom monitoring dashboard, streaming live events, or integrating with existing infrastructure, VP Real-Time Player gives you the flexibility and performance you need to deliver reliable video playback at scale.

Why Choose VP Real-Time Player?​

  • Fully HTML5-Based
    No need for extra Flash or native applications. The player runs directly in modern browsers using standard web technologies.

  • Optimized for Low Latency
    Built with real-time streaming in mind, the VP Real-Time Player minimizes startup delay and maintains a steady buffer for smooth playback, even under unstable network conditions.

  • Works Everywhere Because it uses HTTP, VP Real-Time Player works easily behind corporate firewalls, proxies, and restrictive networks.

  • Broad Codec Support
    Supports essential codecs like AAC for audio and H.264 for video, making it compatible with a wide range of streaming sources, including those used for live TV and security feeds.

  • Flexible & Extensible
    The player is easy to embed in your app and customize. You can use it standalone or integrate it tightly into your existing frontend.

Getting Started with VP Real-Time Player​

✅ Step 1: Install the Package​

Use npm to install the player:

npm install vp-realtime-player

✅ Step 2: Import the player and initialize it with a stream URL:​

Make sure your page includes a container element where the player will be rendered:

import vpRealtimePlayer from "vp-realtime-player";

const streamUrl = "ws://your-stream-url.com/stream";
const config = {};    // Optional configuration for advanced settings
const options = {};   // Optional options such as autoplay, mute, etc.

const player = vpRealtimePlayer("video-container"); // Pass the ID of the video container element
player.setup(streamUrl, options, config);