@vxg_inc/cloud-player-sdk

v3.3.47

Published

4 days ago

VXG Cloud Player SDK

Downloads

309

0High
0Medium
0Low

vxg_inc

video player cloud sdk streaming

VXG Cloud Player SDK

A comprehensive video player SDK for VXG Cloud streaming services with support for live streaming, recorded playback, and timeline navigation.

✨ Features

🔴 Live Streaming: Real-time video playback with WebRTC support
📹 Recorded Playback: Access to recorded video content with timeline navigation
🕒 Timeline Controls: Calendar and timeline views for recorded content
🎛️ PTZ Controls: Pan-tilt-zoom camera control support
📸 Snapshot Capture: Take screenshots of video streams
✂️ Clip Creation: Extract and download video clips from recorded content
📱 Responsive Design: Mobile and desktop compatible
🔷 TypeScript Support: Full TypeScript definitions included
📦 Multiple Formats: Available in both ESM and UMD formats

📦 Installation

NPM

npm install @vxg_inc/cloud-player-sdk

Yarn

yarn add @vxg_inc/cloud-player-sdk

CDN (UMD)

<script src="https://unpkg.com/@vxg_inc/cloud-player-sdk@latest/dist/umd/CloudPlayerSDK.js"></script>

🚀 Quick Start

ESM (ES Modules)

import { CloudPlayerSDK } from '@vxg_inc/cloud-player-sdk';

// Create player instance
const player = new CloudPlayerSDK('player-container-id', {
	live_only: true,
	timeline: false,
	calendar: false,
	autohide: 30000,
	mute: false,
});

// Set source and start playback
player.setSource('your-camera-token');
player.play();

UMD (Browser Script Tag)

<!DOCTYPE html>
<html>
	<head>
		<title>VXG Cloud Player SDK</title>
	</head>
	<body>
		<div id="player-container" style="width: 800px; height: 450px;"></div>
		<script src="https://unpkg.com/@vxg_inc/cloud-player-sdk@latest/dist/umd/CloudPlayerSDK.js"></script>
		<script>
			const player = new CloudPlayerSDK.CloudPlayerSDK('player-container', {
				live_only: true,
				autohide: 30000,
			});
			player.setSource('your-camera-token');
			player.play();
		</script>
	</body>
</html>

TypeScript Support

import type { CloudPlayerSDKOptions, CloudPlayerSDKInstance } from '@vxg_inc/cloud-player-sdk';
import { CloudPlayerSDK } from '@vxg_inc/cloud-player-sdk';

const player: CloudPlayerSDKInstance = new CloudPlayerSDK('container', {
	live_only: true,
	timeline: false
} as CloudPlayerSDKOptions);

💡 Usage Examples

Live Streaming with WebRTC

const livePlayer = new CloudPlayerSDK('live-player', {
	live_only: true,
	autohide: 5000,
	mute: true,
	useTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
});

livePlayer.setSource('your-live-camera-token');
livePlayer.play();

Recorded Player with Timeline

const recordedPlayer = new CloudPlayerSDK('recorded-player', {
	live_only: false,
	timeline: true,
	calendar: true,
	useTimezone: 'America/New_York',
});

recordedPlayer.setSource('your-recorded-camera-token');
recordedPlayer.play();

Event Handling

player.addCallback('player-events', function (event, args) {
	switch (event.name) {
		case 'POSITION_JUMPED':
			console.log('Timeline position changed:', args.position);
			break;
		case 'SOURCE_CHANGED':
			console.log('Video source changed:', args.source);
			break;
		case 'CHANNEL_STATUS':
			console.log('Channel status updated:', args.status);
			break;
		case 'ERROR':
			console.error('Player error:', args.error);
			break;
	}
});

📖 API Reference

Constructor

new CloudPlayerSDK(containerId: string, options?: CloudPlayerSDKOptions)

Parameters:

containerId (string): ID of the HTML element to mount the player
options (CloudPlayerSDKOptions): Configuration options

Configuration Options

interface CloudPlayerSDKOptions {
	// Authentication & Core Configuration
	apiKey?: string;                    // VXG API key for authentication
	
	// Playback Settings
	autoplay?: boolean;                 // Auto-start playback on load
	mute?: boolean;                     // Start video muted
	live_only?: boolean;                // Restrict to live playback only
	livePoster?: boolean;               // Display live poster during load
	loaderTimeout?: number;             // Source loading timeout in milliseconds
	persistPlayerFormat?: boolean;      // Remember user's last selected stream format
	
	// Display & Time Configuration
	useTimezone?: string;               // Override timezone (e.g., 'America/Toronto')
	hideTime?: boolean;                 // Hide time display in UI
	timelineampm?: boolean;             // Use 12-hour AM/PM format on timeline
	
	// UI Controls & Visibility
	autohide?: number;                  // Auto-hide controls timeout in ms (-1=never, 0=always visible)
	calendar?: boolean;                 // Show/hide calendar widget
	timeline?: boolean;                 // Show/hide timeline scrubber
	
	// Feature Control Toggles
	disableAudioControl?: boolean;      // Disable audio volume controls
	disableBackwardAudio?: boolean;     // Disable backward audio functionality
	disableFullScreenModeControl?: boolean; // Disable fullscreen toggle
	disableGetClip?: boolean;           // Disable clip download feature
	disableGetShot?: boolean;           // Disable screenshot feature
	disableMicControl?: boolean;        // Disable microphone controls
	disablePlayControl?: boolean;       // Disable play/pause controls
	disablePTZ?: boolean;               // Disable pan-tilt-zoom functionality
	disablePTZButton?: boolean;         // Disable PTZ control button
	disableSdCard?: boolean;            // Disable SD card access
	disableSpeakerControl?: boolean;    // Disable speaker controls
	disableZoomControl?: boolean;       // Disable zoom controls
	
	// Performance & Rendering
	jpegForcedUpdatePeriod?: number;    // JPEG forced refresh interval in ms
	jpegRedrawPeriod?: number;          // JPEG redraw frequency in ms
	
	// Power Management
	autoIdle?: boolean;                 // Enable automatic idle mode
	autoIdleIntervalMins?: number;      // Idle timeout duration in minutes
}

Methods

| Method | Description | Returns | |--------|-------------|---------| | play() | Start video playback | void | | pause() | Pause video playback | void | | stop() | Stop video playback | void | | mute() | Toggle audio mute | void | | destroy() | Destroy player instance | void | | setSource(token: string) | Set camera token | void | | getSource() | Get current camera token | string | | isPlaying() | Check if video is playing | boolean | | setPosition(position: number) | Set playback position | void | | getPosition() | Get current playback position | number | | getSnapshot() | Capture screenshot | Promise<Blob> | | getPlaytime() | Get total play time | number |

Events

Add event listeners using callback:

player.addCallback('uniqueCallbackName', function (event, args) {
// Handle event
});
player.removeCallback('uniqueCallbackName');

Available Events:

| Event | Description | Args | |-------|-------------|------| | POSITION_JUMPED | Timeline position changed | { position: number } | | SOURCE_CHANGED | Video source was changed | { source: string } | | CHANNEL_STATUS | Camera/channel status updated | { status: string } | | ERROR | Player error occurred | { error: string } | | USER_CLICKED_ON_TIMELINE | User clicked on timeline | { position: number } | | CHANGED_CONTROLS | Player controls visibility changed | { visible: boolean } | | TIMELINE_END_UPDATED | Timeline end time was updated | { endTime: number } |

🌐 Browser Compatibility

| Browser | Minimum Version | |---------|----------------| | Chrome | 70+ | | Firefox | 65+ | | Safari | 12+ | | Edge | 79+ |

⚙️ Build Outputs

ESM: dist/index.js - Modern ES modules for React, Vue etc.
UMD: dist/umd/CloudPlayerSDK.js - Universal bundle for browsers

🔧 Requirements

Node.js: >= 16.0.0 (for development)
Modern Browser: ES2017+ support required

🐛 Troubleshooting

Common Issues

Player not loading:

Verify the container element exists before initializing
Check that the camera token is valid
Ensure network connectivity to VXG Cloud services

Timeline not showing:

Set timeline: true in options
Verify the camera has recorded content
Check that live_only is set to false

WebRTC connection issues:

Ensure HTTPS is used (required for WebRTC)
Check firewall/proxy settings
Verify camera supports WebRTC streaming

📄 License

MIT License - see LICENSE file for details.

📊 Changelog

See CHANGELOG.md for version history and updates.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

VXG Cloud Player SDK

✨ Features

📦 Installation

NPM

Yarn

CDN (UMD)

🚀 Quick Start

ESM (ES Modules)

UMD (Browser Script Tag)

TypeScript Support

💡 Usage Examples

Live Streaming with WebRTC

Recorded Player with Timeline

Event Handling

📖 API Reference

Constructor

Configuration Options

Methods

Events

🌐 Browser Compatibility

⚙️ Build Outputs

🔧 Requirements

🐛 Troubleshooting

Common Issues

📄 License

📊 Changelog