Skip to main content

Video Quality & Performance

Delivering high-quality video experiences while maintaining optimal performance is crucial for user engagement. This guide covers video quality settings, performance optimization, and best practices for social.plus Video SDK.

Video Quality Overview

Supported Quality Levels

social.plus Video SDK supports three standard quality levels optimized for mobile streaming:
Quality LevelResolutionAspect RatioBitrateFrame RateUse Case
SD (Standard)480 × 8549:161,216 kbps24-30 fpsMobile data, low bandwidth
HD (High Definition)720 × 12809:162,496 kbps30 fpsBalanced quality/bandwidth
FHD (Full HD)1080 × 19209:164,992 kbps30 fpsPremium quality, WiFi
// Quality configuration examples
const qualityProfiles = {
    SD: {
        resolution: { width: 480, height: 854 },
        bitrate: 1216000, // 1.216 Mbps
        frameRate: 24
    },
    HD: {
        resolution: { width: 720, height: 1280 },
        bitrate: 2496000, // 2.496 Mbps
        frameRate: 30
    },
    FHD: {
        resolution: { width: 1080, height: 1920 },
        bitrate: 4992000, // 4.992 Mbps
        frameRate: 30
    }
};

Resolution and Bitrate Management

Custom Resolution Settings

// iOS/Android native configuration
const iosConfig = {
    resolution: { width: 1080, height: 1920 },
    bitrate: 4000000,
    frameRate: 30,
    keyFrameInterval: 2, // seconds
    profile: 'high', // H.264 profile
    level: '4.1'
};

// Web configuration
const webConfig = {
    video: {
        width: { ideal: 1920, max: 1920 },
        height: { ideal: 1080, max: 1080 },
        frameRate: { ideal: 30, max: 30 }
    },
    audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
    }
};

// React Native configuration
const reactNativeConfig = {
    resolution: {
        width: 1280,
        height: 720
    },
    bitrate: 2500000,
    frameRate: 30,
    enableHardwareAcceleration: true
};

Performance Optimization

Device-Based Optimization

interface DeviceCapabilities {
    processingPower: 'low' | 'medium' | 'high';
    memoryAvailable: number; // MB
    supportsHardwareEncoding: boolean;
    maxSupportedResolution: { width: number; height: number };
    batteryOptimized: boolean;
}

class DeviceOptimizer {
    async detectCapabilities(): Promise<DeviceCapabilities> {
        const capabilities = {
            processingPower: await this.assessProcessingPower(),
            memoryAvailable: await this.getAvailableMemory(),
            supportsHardwareEncoding: await this.checkHardwareEncoding(),
            maxSupportedResolution: await this.getMaxResolution(),
            batteryOptimized: this.isBatteryOptimizationEnabled()
        };
        
        return capabilities;
    }
    
    optimizeForDevice(capabilities: DeviceCapabilities) {
        const config = {
            resolution: this.selectResolution(capabilities),
            bitrate: this.calculateBitrate(capabilities),
            frameRate: this.determineFrameRate(capabilities),
            useHardwareEncoding: capabilities.supportsHardwareEncoding,
            enableLowPowerMode: capabilities.batteryOptimized
        };
        
        return config;
    }
    
    private selectResolution(capabilities: DeviceCapabilities) {
        switch (capabilities.processingPower) {
            case 'low':
                return { width: 480, height: 854 };
            case 'medium':
                return { width: 720, height: 1280 };
            case 'high':
                return capabilities.maxSupportedResolution;
            default:
                return { width: 720, height: 1280 };
        }
    }
}

Network Optimization

class NetworkOptimizer {
    private bandwidthHistory: number[] = [];
    private readonly HISTORY_SIZE = 10;
    
    startBandwidthMonitoring() {
        setInterval(() => {
            this.measureBandwidth().then(bandwidth => {
                this.updateBandwidthHistory(bandwidth);
                this.optimizeForBandwidth(bandwidth);
            });
        }, 10000); // Check every 10 seconds
    }
    
    private async measureBandwidth(): Promise<number> {
        const startTime = Date.now();
        const testData = new ArrayBuffer(1024 * 100); // 100KB test
        
        try {
            // Simulate network test (implement actual bandwidth measurement)
            await this.sendTestData(testData);
            const duration = Date.now() - startTime;
            
            // Calculate bandwidth in Mbps
            const bandwidth = (testData.byteLength * 8) / (duration / 1000) / 1000000;
            return bandwidth;
        } catch (error) {
            console.error('Bandwidth measurement failed:', error);
            return 1; // Fallback to 1 Mbps
        }
    }
    
    private optimizeForBandwidth(bandwidth: number) {
        const avgBandwidth = this.getAverageBandwidth();
        
        if (avgBandwidth < 1.5) {
            this.enableLowBandwidthMode();
        } else if (avgBandwidth > 5) {
            this.enableHighQualityMode();
        } else {
            this.enableBalancedMode();
        }
    }
    
    private enableLowBandwidthMode() {
        const config = {
            bitrate: 800000,        // 800 kbps
            resolution: { width: 480, height: 854 },
            frameRate: 20,
            enableAdaptiveBitrate: true,
            bufferSize: 'small'
        };
        
        this.applyConfiguration(config);
    }
}

Quality Metrics and Monitoring

Real-time Quality Metrics

interface QualityMetrics {
    // Video metrics
    currentResolution: { width: number; height: number };
    actualBitrate: number;
    frameRate: number;
    droppedFrames: number;
    keyFrameInterval: number;
    
    // Network metrics
    bandwidth: number;
    latency: number;
    packetLoss: number;
    jitter: number;
    
    // System metrics
    cpuUsage: number;
    memoryUsage: number;
    batteryLevel: number;
    temperature: number;
}

class QualityMonitor {
    private metrics: QualityMetrics = this.initializeMetrics();
    private listeners: Array<(metrics: QualityMetrics) => void> = [];
    
    startMonitoring() {
        setInterval(() => {
            this.updateMetrics();
            this.analyzeQuality();
            this.notifyListeners();
        }, 1000); // Update every second
    }
    
    private updateMetrics() {
        this.metrics = {
            ...this.metrics,
            actualBitrate: this.measureCurrentBitrate(),
            frameRate: this.measureFrameRate(),
            droppedFrames: this.countDroppedFrames(),
            bandwidth: this.measureBandwidth(),
            latency: this.measureLatency(),
            cpuUsage: this.getCpuUsage(),
            memoryUsage: this.getMemoryUsage()
        };
    }
    
    private analyzeQuality() {
        const issues = [];
        
        // Check for quality issues
        if (this.metrics.frameRate < 15) {
            issues.push({
                type: 'low_framerate',
                severity: 'high',
                suggestion: 'Reduce resolution or bitrate'
            });
        }
        
        if (this.metrics.droppedFrames > 10) {
            issues.push({
                type: 'dropped_frames',
                severity: 'medium',
                suggestion: 'Check network stability'
            });
        }
        
        if (this.metrics.cpuUsage > 80) {
            issues.push({
                type: 'high_cpu',
                severity: 'high',
                suggestion: 'Enable hardware encoding or reduce quality'
            });
        }
        
        if (issues.length > 0) {
            this.handleQualityIssues(issues);
        }
    }
}

Best Practices

Quality Configuration Best Practices

class MobileQualityOptimizer {
    optimizeForMobile() {
        return {
            // Start with balanced quality
            initialQuality: 'HD',
            
            // Enable adaptive streaming
            enableABR: true,
            
            // Optimize for mobile networks
            cellularOptimizations: {
                maxBitrate: 2500000, // 2.5 Mbps
                bufferSize: 3000,    // 3 seconds
                enableDataSaver: true
            },
            
            // Battery optimizations
            batteryOptimizations: {
                reduceFpsOnLowBattery: true,
                enableLowPowerMode: true,
                suspendOnBackground: true
            },
            
            // Performance optimizations
            performanceOptimizations: {
                enableHardwareAcceleration: true,
                useEfficientCodec: true,
                optimizeForLatency: false // Prioritize quality over latency
            }
        };
    }
}

Performance Monitoring

class PerformanceOptimizer {
    private readonly thresholds = {
        frameRate: { min: 15, target: 30 },
        latency: { max: 8000, target: 3000 },
        cpuUsage: { max: 70, warning: 50 },
        memoryUsage: { max: 200, warning: 150 }, // MB
        droppedFrames: { max: 5, warning: 2 }
    };
    
    optimizePerformance(metrics: QualityMetrics) {
        const optimizations = [];
        
        // CPU optimization
        if (metrics.cpuUsage > this.thresholds.cpuUsage.warning) {
            optimizations.push(this.reduceCpuLoad());
        }
        
        // Memory optimization
        if (metrics.memoryUsage > this.thresholds.memoryUsage.warning) {
            optimizations.push(this.optimizeMemory());
        }
        
        // Network optimization
        if (metrics.latency > this.thresholds.latency.target) {
            optimizations.push(this.optimizeNetwork());
        }
        
        return optimizations;
    }
    
    private reduceCpuLoad() {
        return {
            action: 'reduce_cpu_load',
            changes: [
                'Lower frame rate to 24fps',
                'Reduce resolution by one step',
                'Enable hardware encoding if available'
            ]
        };
    }
}

Troubleshooting Quality Issues

Common Quality Problems

Symptoms: Choppy video, low FPSCauses & Solutions:
class FrameRateOptimizer {
    diagnoseLowFrameRate(metrics: QualityMetrics) {
        const issues = [];
        
        if (metrics.cpuUsage > 80) {
            issues.push({
                cause: 'High CPU usage',
                solutions: [
                    'Reduce video resolution',
                    'Lower frame rate target',
                    'Enable hardware encoding',
                    'Close background apps'
                ]
            });
        }
        
        if (metrics.memoryUsage > 150) {
            issues.push({
                cause: 'Memory pressure',
                solutions: [
                    'Reduce buffer size',
                    'Lower video quality',
                    'Clear app cache'
                ]
            });
        }
        
        return issues;
    }
}

Next Steps

For detailed troubleshooting, visit our Troubleshooting Guide.