Voice in the Browser
WebRTC permite apeluri voice direct din browser fără plugins. Perfect pentru widget-uri de contact, in-app calling, și web support.
WebRTC Architecture
Browser
getUserMedia API
Signaling
WebSocket/SIP
TURN/STUN
NAT Traversal
Voice AI
Media Processing
1. Browser → Signaling Server: SDP Offer
2. Server → Browser: SDP Answer + ICE candidates
3. Browser ↔ TURN: Media relay (if P2P fails)
4. Audio stream → Voice AI processing
JavaScript Integration
// Initialize WebRTC call to Voice AI
import { KallinaVoice } from '@kallina/webrtc-sdk';
const voice = new KallinaVoice({
apiKey: 'your-api-key',
agentId: 'support-agent-v1',
onStateChange: (state) => {
console.log('Call state:', state);
},
onTranscript: (text, isFinal) => {
console.log('User said:', text);
}
});
// Start call
await voice.connect();
// Handle events
voice.on('agent-speaking', (text) => {
console.log('Agent:', text);
});
voice.on('call-ended', (summary) => {
console.log('Summary:', summary);
});
// End call
voice.disconnect();Browser Support
| Browser | Desktop | Mobile | Features |
|---|---|---|---|
| Chrome | ✓ Full | ✓ Full | All features |
| Firefox | ✓ Full | ✓ Full | All features |
| Safari | ✓ Full | ⚠ Limited | iOS restrictions |
| Edge | ✓ Full | ✓ Full | All features |
TURN/STUN Configuration
STUN Server
Discover public IP address for peer-to-peer connections.
stun:stun.kallina.ai:3478
TURN Server
Relay media when direct connection fails (firewalls, NAT).
turn:turn.kallina.ai:443
username: "user"
credential: "••••••••"
Audio Constraints
// Optimized audio constraints for Voice AI
const audioConstraints = {
audio: {
echoCancellation: true,
noiseSuppression: true,
autoGainControl: true,
sampleRate: 16000, // Match STT requirements
channelCount: 1, // Mono for speech
latency: 0.01, // Low latency
},
video: false
};
const stream = await navigator.mediaDevices
.getUserMedia(audioConstraints);Echo Cancellation
Eliminates speaker feedback
Noise Suppression
Reduces background noise
Auto Gain
Normalizes volume levels
Widget Embed Example
Add voice AI to any website with a single script tag:
<!-- Kallina Voice Widget -->
<script src="https://cdn.kallina.ai/widget.js"></script>
<script>
KallinaWidget.init({
apiKey: 'your-api-key',
agentId: 'support-agent-v1',
position: 'bottom-right',
theme: 'light',
greeting: 'Bună! Cu ce vă pot ajuta?'
});
</script>🎤
Widget appears as floating button. Click to start voice conversation.
Connection Quality Monitoring
// Monitor WebRTC stats
const stats = await peerConnection.getStats();
stats.forEach(report => {
if (report.type === 'inbound-rtp' && report.kind === 'audio') {
console.log('Packets received:', report.packetsReceived);
console.log('Packets lost:', report.packetsLost);
console.log('Jitter:', report.jitter);
}
});0.1%
Packet Loss
12ms
Jitter
95ms
RTT
4.4
MOS Score
Common Issues & Solutions
Microphone Permission Denied
Ensure HTTPS (required for getUserMedia). Show clear permission prompt UI.
Connection Timeout
Check TURN server availability. Corporate firewalls may block UDP.
Echo/Feedback
Enable echoCancellation constraint. Use headphones for best quality.
iOS Safari Issues
Call connect() from user gesture. Audio requires explicit play() call.