Browser Support

Supported browsers and platform-specific considerations for the Talker Web SDK.

Supported Browsers

Browser	Minimum Version	Notes
Chrome	80+	Full support
Firefox	75+	Full support
Safari	14+	Requires `unlockAudio()` on user interaction
Edge	80+	Full support (Chromium-based)
Opera	67+	Full support (Chromium-based)

Required Browser APIs

The SDK requires these browser APIs:

WebRTC - For real-time audio communication
Web Audio API - For audio processing and playback
MediaDevices API - For microphone access
WebSocket - For signaling

Feature Detection

TypeScript

function checkBrowserSupport(): { supported: boolean; missing: string[] } {
  const missing: string[] = [];

  // Check WebRTC
  if (!window.RTCPeerConnection) {
    missing.push('WebRTC');
  }

  // Check Web Audio
  if (!window.AudioContext && !window.webkitAudioContext) {
    missing.push('Web Audio API');
  }

  // Check MediaDevices
  if (!navigator.mediaDevices?.getUserMedia) {
    missing.push('MediaDevices API');
  }

  // Check WebSocket
  if (!window.WebSocket) {
    missing.push('WebSocket');
  }

  return {
    supported: missing.length === 0,
    missing,
  };
}

// Usage
const { supported, missing } = checkBrowserSupport();

if (!supported) {
  showError(`Your browser is missing: ${missing.join(', ')}`);
}

iOS Safari Considerations

iOS Audio Policy

iOS Safari requires user interaction to play audio. You must call unlockAudio() during a user gesture.

Unlocking Audio on iOS

TypeScript

// Option 1: Unlock on first touch anywhere
document.addEventListener('touchstart', () => {
  talker.unlockAudio();
}, { once: true });

// Option 2: Unlock on a specific button
const enableAudioButton = document.getElementById('enable-audio');

enableAudioButton?.addEventListener('click', async () => {
  await talker.unlockAudio();
  enableAudioButton.style.display = 'none';
});

// Option 3: Unlock when user tries to talk
pttButton.addEventListener('touchstart', async (e) => {
  e.preventDefault();
  await talker.unlockAudio(); // Safe to call multiple times
  await talker.startTalking(channelId);
});

iOS-Specific Behaviors

Audio won't play until unlockAudio() is called during a user gesture
Background audio is not supported - app must be in foreground
Low Power Mode may affect audio quality
Safari requires HTTPS for microphone access

Mobile Browser Considerations

Android Chrome

Full support for all features
May require user to grant microphone permission
Background audio works when tab is in background

Samsung Internet

Based on Chromium, generally well-supported
Some older versions may have WebRTC issues

HTTPS Requirement

HTTPS Required

Microphone access requires HTTPS in all modern browsers. The only exception is localhost for development.

Permission Handling

TypeScript

async function checkMicrophonePermission(): Promise<'granted' | 'denied' | 'prompt'> {
  try {
    const result = await navigator.permissions.query({
      name: 'microphone' as PermissionName,
    });
    return result.state;
  } catch {
    // Permissions API not supported, assume prompt needed
    return 'prompt';
  }
}

async function requestMicrophonePermission(): Promise {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    stream.getTracks().forEach(track => track.stop());
    return true;
  } catch (error) {
    return false;
  }
}

// Show appropriate UI based on permission state
async function handleMicrophoneAccess() {
  const permission = await checkMicrophonePermission();

  switch (permission) {
    case 'granted':
      // Already have permission, proceed
      initializeTalker();
      break;

    case 'denied':
      // Permission was denied, show instructions
      showPermissionDeniedUI();
      break;

    case 'prompt':
      // Need to request permission
      showPermissionRequestUI();
      break;
  }
}

Output Device Selection

Selecting audio output devices is not supported in all browsers:

Browser	Output Device Selection
Chrome	Supported
Edge	Supported
Firefox	Limited (requires flag)
Safari	Not supported

TypeScript

function supportsOutputDeviceSelection(): boolean {
  return typeof HTMLMediaElement.prototype.setSinkId === 'function';
}

// Only show speaker selection if supported
if (supportsOutputDeviceSelection()) {
  showSpeakerSelector();
}

Polyfills

The SDK does not require any polyfills for supported browsers. If you need to support older browsers, consider:

adapter.js - WebRTC adapter for cross-browser compatibility
core-js - For older JavaScript API support

HTML

<!-- WebRTC adapter (optional, for older browsers) -->
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>