@webrtc2/config - WebRTC Configuration Management

Configuration management for WebRTC applications - STUN/TURN servers, ICE settings, media constraints, and cross-platform defaults for React Native, Web, and Electron.

🚀 WebRTC Configuration Made Simple

@webrtc2/config provides comprehensive configuration management:

• 🧊 ICE Server Configuration: STUN/TURN server management
• �� Media Constraints: Video, audio, and screen sharing settings
• 🌐 Cross-Platform Defaults: Optimized settings for each platform
• ⚙️ Environment-Based Config: Development, staging, production
• 🔧 Dynamic Configuration: Runtime configuration updates
• 📊 Performance Presets: Optimized settings for different use cases

📦 Installation

npm install @webrtc2/config

🎯 Quick Start

Basic Configuration

import { 
  createWebRTCConfig, 
  defaultWebRTCConfig,
  getOptimalConfig 
} from '@webrtc2/config';

// Use default configuration
const config = defaultWebRTCConfig;

// Create custom configuration
const customConfig = createWebRTCConfig({
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    {
      urls: 'turn:your-turn-server.com:3478',
      username: 'user',
      credential: 'password'
    }
  ],
  enableVideo: true,
  enableAudio: true
});

// Get platform-optimized configuration
const mobileConfig = getOptimalConfig('mobile');
const desktopConfig = getOptimalConfig('desktop');

Environment-Based Configuration

import { 
  ConfigManager,
  Environment 
} from '@webrtc2/config';

const configManager = new ConfigManager();

// Load configuration for different environments
const devConfig = configManager.getConfig(Environment.DEVELOPMENT);
const prodConfig = configManager.getConfig(Environment.PRODUCTION);

console.log('Development STUN servers:', devConfig.ice.stunServers);
console.log('Production TURN servers:', prodConfig.ice.turnServers);

🧊 ICE Server Configuration

STUN Server Setup

import { 
  STUNConfig,
  createSTUNServers,
  validateSTUNServers 
} from '@webrtc2/config';

// Create STUN server configuration
const stunConfig: STUNConfig = {
  servers: [
    'stun:stun.l.google.com:19302',
    'stun:stun1.l.google.com:19302',
    'stun:stun2.l.google.com:19302'
  ],
  timeout: 5000,
  retries: 3
};

const stunServers = createSTUNServers(stunConfig);

// Validate STUN servers
const validation = await validateSTUNServers(stunServers);
console.log('STUN validation results:', validation);

TURN Server Configuration

import { 
  TURNConfig,
  createTURNServers,
  loadBalanceTURNServers 
} from '@webrtc2/config';

// TURN server configuration
const turnConfig: TURNConfig = {
  servers: [
    {
      urls: ['turn:turn1.example.com:3478', 'turns:turn1.example.com:5349'],
      username: 'user1',
      credential: 'password1',
      region: 'us-east-1',
      priority: 1
    },
    {
      urls: ['turn:turn2.example.com:3478', 'turns:turn2.example.com:5349'],
      username: 'user2',
      credential: 'password2',
      region: 'eu-west-1',
      priority: 2
    }
  ],
  loadBalancing: 'round-robin',
  failover: true,
  credentialType: 'password'
};

const turnServers = createTURNServers(turnConfig);

// Load balance TURN servers based on user location
const balancedServers = await loadBalanceTURNServers(turnServers, 'us-east-1');

ICE Configuration Optimization

import { 
  ICEConfig,
  optimizeICEConfig,
  createICEConfiguration 
} from '@webrtc2/config';

// Comprehensive ICE configuration
const iceConfig: ICEConfig = {
  stunServers: ['stun:stun.l.google.com:19302'],
  turnServers: [
    {
      urls: 'turn:turn.example.com:3478',
      username: 'user',
      credential: 'password'
    }
  ],
  iceCandidatePoolSize: 10,
  bundlePolicy: 'max-bundle',
  rtcpMuxPolicy: 'require',
  iceTransportPolicy: 'all',
  enableIPv6: true,
  enableDscp: true
};

// Optimize for specific network conditions
const optimizedConfig = optimizeICEConfig(iceConfig, {
  networkType: 'cellular',
  bandwidth: 'limited',
  latency: 'high'
});

// Create RTCConfiguration
const rtcConfig = createICEConfiguration(optimizedConfig);

🎥 Media Configuration

Video Constraints

import { 
  VideoConfig,
  createVideoConstraints,
  getVideoPresets 
} from '@webrtc2/config';

// Video configuration presets
const videoPresets = getVideoPresets();
console.log('Available presets:', videoPresets);
// { '240p': {...}, '480p': {...}, '720p': {...}, '1080p': {...} }

// Custom video configuration
const videoConfig: VideoConfig = {
  resolution: {
    width: { ideal: 1280, max: 1920, min: 640 },
    height: { ideal: 720, max: 1080, min: 480 }
  },
  frameRate: { ideal: 30, max: 60, min: 15 },
  facingMode: 'user',
  aspectRatio: 16/9,
  codec: 'VP9',
  bitrate: {
    max: 2000000,
    start: 1000000,
    min: 500000
  }
};

const videoConstraints = createVideoConstraints(videoConfig);

Audio Constraints

import { 
  AudioConfig,
  createAudioConstraints,
  getAudioPresets 
} from '@webrtc2/config';

// Audio configuration
const audioConfig: AudioConfig = {
  sampleRate: 48000,
  channelCount: 2,
  echoCancellation: true,
  noiseSuppression: true,
  autoGainControl: true,
  googEchoCancellation: true,
  googAutoGainControl: true,
  googNoiseSuppression: true,
  googHighpassFilter: true,
  codec: 'OPUS',
  bitrate: {
    max: 128000,
    start: 64000,
    min: 32000
  }
};

const audioConstraints = createAudioConstraints(audioConfig);

// Audio presets for different use cases
const musicConfig = getAudioPresets().music;
const voiceConfig = getAudioPresets().voice;
const podcastConfig = getAudioPresets().podcast;

Screen Sharing Configuration

import { 
  ScreenShareConfig,
  createScreenShareConstraints 
} from '@webrtc2/config';

// Screen sharing configuration
const screenConfig: ScreenShareConfig = {
  video: {
    width: { ideal: 1920, max: 3840 },
    height: { ideal: 1080, max: 2160 },
    frameRate: { ideal: 15, max: 30 },
    cursor: 'always',
    displaySurface: 'monitor'
  },
  audio: {
    echoCancellation: false,
    noiseSuppression: false,
    autoGainControl: false
  },
  preferCurrentTab: false,
  selfBrowserSurface: 'exclude'
};

const screenConstraints = createScreenShareConstraints(screenConfig);

🌐 Cross-Platform Configuration

React Native Configuration

import { 
  ReactNativeConfig,
  createReactNativeConfig,
  optimizeForMobile 
} from '@webrtc2/config';

// React Native optimized configuration
const rnConfig: ReactNativeConfig = {
  video: {
    width: 640,
    height: 480,
    frameRate: 30,
    facingMode: 'user'
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true
  },
  platform: {
    ios: {
      enableBackground: true,
      enablePictureInPicture: true
    },
    android: {
      enableHardwareAcceleration: true,
      enableSoftwareEchoCancellation: false
    }
  }
};

const mobileConfig = createReactNativeConfig(rnConfig);

// Auto-optimize for mobile constraints
const optimizedMobile = optimizeForMobile({
  batteryLevel: 'low',
  networkType: 'cellular',
  deviceType: 'phone'
});

Electron Configuration

import { 
  ElectronConfig,
  createElectronConfig,
  optimizeForDesktop 
} from '@webrtc2/config';

// Electron desktop configuration
const electronConfig: ElectronConfig = {
  video: {
    width: 1280,
    height: 720,
    frameRate: 30
  },
  audio: {
    sampleRate: 48000,
    channelCount: 2
  },
  desktop: {
    enableScreenShare: true,
    enableMultipleDisplays: true,
    enableSystemAudio: true,
    enableNotifications: true
  },
  webPreferences: {
    webSecurity: false,
    nodeIntegration: true,
    contextIsolation: false
  }
};

const desktopConfig = createElectronConfig(electronConfig);

Web Browser Configuration

import { 
  WebConfig,
  createWebConfig,
  detectBrowserCapabilities 
} from '@webrtc2/config';

// Detect browser capabilities
const capabilities = await detectBrowserCapabilities();

// Web-optimized configuration
const webConfig: WebConfig = {
  video: {
    width: 1280,
    height: 720,
    frameRate: 30
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true
  },
  browser: {
    enableAdapter: true,
    enablePolyfills: true,
    enableH264: capabilities.h264Supported,
    enableVP9: capabilities.vp9Supported
  }
};

const browserConfig = createWebConfig(webConfig);

⚙️ Dynamic Configuration

Runtime Configuration Updates

import { 
  ConfigManager,
  ConfigUpdater 
} from '@webrtc2/config';

const configManager = new ConfigManager();
const configUpdater = new ConfigUpdater();

// Update configuration at runtime
configUpdater.updateVideoQuality('720p');
configUpdater.updateAudioCodec('OPUS');
configUpdater.updateICEServers([
  { urls: 'stun:new-stun-server.com:19302' }
]);

// Listen for configuration changes
configManager.on('config-changed', (newConfig) => {
  console.log('Configuration updated:', newConfig);
});

// Apply configuration updates
await configManager.applyUpdates(configUpdater.getUpdates());

Network-Adaptive Configuration

import { 
  NetworkAdaptiveConfig,
  NetworkMonitor 
} from '@webrtc2/config';

const adaptiveConfig = new NetworkAdaptiveConfig({
  enableAdaptation: true,
  monitorInterval: 5000,
  thresholds: {
    bandwidth: {
      high: 2000000,  // 2 Mbps
      medium: 1000000, // 1 Mbps
      low: 500000     // 500 kbps
    },
    latency: {
      low: 50,     // 50ms
      medium: 100, // 100ms
      high: 200    // 200ms
    }
  }
});

// Automatically adapt configuration based on network conditions
adaptiveConfig.on('adaptation', (newConfig, reason) => {
  console.log('Configuration adapted:', reason, newConfig);
});

📊 Performance Presets

Quality Presets

import { 
  QualityPresets,
  PerformancePresets,
  createPresetConfig 
} from '@webrtc2/config';

// Quality-based presets
const qualityPresets = QualityPresets;
const lowQuality = qualityPresets.LOW;      // 240p, 15fps, low bitrate
const mediumQuality = qualityPresets.MEDIUM; // 480p, 30fps, medium bitrate
const highQuality = qualityPresets.HIGH;    // 720p, 30fps, high bitrate
const ultraQuality = qualityPresets.ULTRA;  // 1080p, 60fps, ultra bitrate

// Performance-based presets
const performancePresets = PerformancePresets;
const batteryOptimized = performancePresets.BATTERY_SAVER;
const balancedPerformance = performancePresets.BALANCED;
const maxPerformance = performancePresets.PERFORMANCE;

// Create configuration from preset
const config = createPresetConfig('HIGH_QUALITY', {
  platform: 'web',
  networkType: 'wifi'
});

Use Case Presets

import { 
  UseCasePresets,
  createUseCaseConfig 
} from '@webrtc2/config';

// Specialized configurations for different use cases
const presets = UseCasePresets;

const videoCallConfig = presets.VIDEO_CALL;     // Optimized for 1-on-1 calls
const groupCallConfig = presets.GROUP_CALL;     // Optimized for group calls
const webinarConfig = presets.WEBINAR;          // Optimized for webinars
const gamingConfig = presets.GAMING;            // Low latency for gaming
const broadcastConfig = presets.BROADCAST;      // High quality broadcasting

// Create configuration for specific use case
const meetingConfig = createUseCaseConfig('GROUP_CALL', {
  maxParticipants: 10,
  enableScreenShare: true,
  enableRecording: false
});

🔧 Configuration Validation

Schema Validation

import { 
  ConfigValidator,
  validateWebRTCConfig,
  ConfigSchema 
} from '@webrtc2/config';

const validator = new ConfigValidator();

// Validate configuration against schema
const validation = validator.validate(config, ConfigSchema.WEBRTC_CONFIG);

if (!validation.valid) {
  console.error('Configuration errors:', validation.errors);
} else {
  console.log('Configuration is valid');
}

// Validate specific sections
const iceValidation = validateWebRTCConfig.ice(config.ice);
const mediaValidation = validateWebRTCConfig.media(config.media);

Configuration Testing

import { 
  ConfigTester,
  testConfiguration 
} from '@webrtc2/config';

const tester = new ConfigTester();

// Test configuration with real servers
const testResults = await tester.testConfig(config);

console.log('STUN server test:', testResults.stun);
console.log('TURN server test:', testResults.turn);
console.log('Media access test:', testResults.media);

// Quick configuration test
const quickTest = await testConfiguration(config);
console.log('Configuration test passed:', quickTest.success);

📚 Related Packages

• @webrtc2/client - React hooks using these configurations
• @webrtc2/peer - Peer connection with configuration
• @webrtc2/utils - Utility functions for config
• @webrtc2/types - TypeScript definitions for config

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE for details.

Keywords: WebRTC config, WebRTC configuration, STUN TURN servers, ICE configuration, media constraints, WebRTC settings, cross-platform config, React Native WebRTC config, Electron WebRTC config, WebRTC optimization