🎬 Live Chat Example

VSRCPlayer with real-time WebSocket chat

Live Stream with Chat

Description: This example demonstrates VSRCPlayer with an integrated live chat feature. The chat uses WebSockets for real-time messaging and features a configurable color palette.

Note: Make sure the chat backend server is running on port 8080. Run cd chat_backend && npm install && npm start from the project root.

Status: Initializing...

Configuration

Username:

WebSocket Server URL: To change the server URL, modify the chat initialization code

Color Palette

Customize the chat appearance by changing the colors below:

Background:

Input Background:

User Message:

Other Message:

System Message:

Text:

Border:

About This Example

This example showcases:

Real-time Chat: WebSocket-based messaging for live interaction
Configurable Colors: Customize the chat appearance to match your brand
Responsive Layout: Video and chat adapt to different screen sizes
User Management: Customizable username and user notifications
Auto-reconnect: Automatically reconnects if connection is lost

Code Example:

// Initialize the video player with integrated chat
const player = new VSRCPlayer('#chat-player', {
    type: 'live',
    mediaId: 'demo-live-stream-789',
    chat: {
        element: '#chat-container',
        serverUrl: 'ws://localhost:8080',
        username: 'User123',
        colors: {
            background: '#1f1f1f',
            inputBackground: '#2a2a2a',
            userMessage: '#0e4c92',
            otherMessage: '#2a2a2a',
            systemMessage: '#666',
            text: '#ffffff',
            border: '#3a3a3a'
        },
        onMessage: (data) => {
            console.log('New message:', data);
        },
        onConnect: () => {
            console.log('Connected to chat');
        }
    },
    onReady: (player) => {
        console.log('Player ready');
    }
});

// Access chat via player
const chat = player.getChat();

Setup Instructions

Navigate to the chat_backend directory
Run npm install to install dependencies
Run npm start to start the WebSocket server (default port: 8080)
Open this HTML file in multiple browser windows to test the chat
Messages sent in one window will appear in all other windows

Customization

You can customize the chat by:

Changing the color palette using the color pickers above
Modifying the username
Adjusting the layout by changing CSS styles
Extending the WebSocket server to add features like message history, user authentication, etc.