webrtc2-config
Version:
WebRTC2 Config - Configuration management for WebRTC applications with STUN/TURN servers, ICE settings, media constraints, and cross-platform defaults
581 lines (473 loc) • 13.8 kB
Markdown
# @webrtc2/config - WebRTC Configuration Management
[](https://www.npmjs.com/package/@webrtc2/config)
[](https://typescriptlang.org/)
[](https://webrtc.org/)
**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
```bash
npm install @webrtc2/config
```
## 🎯 Quick Start
### Basic Configuration
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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
```typescript
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](../client) - React hooks using these configurations
- [@webrtc2/peer](../peer) - Peer connection with configuration
- [@webrtc2/utils](../utils) - Utility functions for config
- [@webrtc2/types](../types) - TypeScript definitions for config
## 🤝 Contributing
We welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
## 📄 License
MIT License - see [LICENSE](../../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