CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-webrtc-adapter

A shim to insulate apps from WebRTC spec changes and browser prefix differences

Overall
score

98%

Overview
Eval results
Files

safari-shims.mddocs/

Safari Shims

Safari-specific shims handle compatibility issues and behavioral differences in Safari browsers to ensure consistent WebRTC behavior across desktop and mobile Safari platforms.

Capabilities

Local Streams API Shimming

Provides consistent local streams API for Safari browsers.

/**
 * Shims local streams API for Safari browsers
 * Ensures proper local stream handling and events
 * @param window - Browser window object
 */
function shimLocalStreamsAPI(window: Window): void;

What it fixes:

  • Standardizes local stream addition and management
  • Provides consistent stream event handling
  • Ensures proper track-to-stream association

Remote Streams API Shimming

Provides consistent remote streams API for Safari browsers.

/**
 * Shims remote streams API for Safari browsers
 * Ensures proper remote stream handling and events
 * @param window - Browser window object
 */
function shimRemoteStreamsAPI(window: Window): void;

What it fixes:

  • Standardizes remote stream reception and handling
  • Provides consistent remote track events
  • Ensures proper stream reconstruction from tracks

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// Remote stream handling (automatically shimmed)
pc.ontrack = (event) => {
  console.log('Received remote track:', event.track.kind);
  
  // Streams array is properly populated in Safari
  if (event.streams && event.streams.length > 0) {
    const remoteStream = event.streams[0];
    videoElement.srcObject = remoteStream;
  }
};

Callbacks API Shimming

Provides callback-based API compatibility for legacy Safari WebRTC implementations.

/**
 * Shims callbacks API for Safari browsers
 * Provides legacy callback compatibility for older Safari versions
 * @param window - Browser window object
 */
function shimCallbacksAPI(window: Window): void;

What it fixes:

  • Adds callback-based createOffer/createAnswer support
  • Provides legacy success/failure callback handling
  • Maintains compatibility with older WebRTC patterns

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// Legacy callback style (automatically shimmed to work in Safari)
pc.createOffer(
  (offer) => {
    console.log('Offer created successfully');
    pc.setLocalDescription(offer);
  },
  (error) => {
    console.error('Failed to create offer:', error);
  },
  { offerToReceiveAudio: true, offerToReceiveVideo: true }
);

GetUserMedia Shimming

Safari-specific getUserMedia compatibility shim.

/**
 * Shims getUserMedia for Safari browsers
 * Provides consistent media access API for Safari
 * @param window - Browser window object
 */
function shimGetUserMedia(window: Window): void;

What it fixes:

  • Standardizes getUserMedia constraints handling
  • Normalizes device access permissions
  • Provides consistent error reporting

Usage Examples:

import adapter from 'webrtc-adapter';

// getUserMedia works consistently in Safari (automatically shimmed)
navigator.mediaDevices.getUserMedia({
  video: { width: 640, height: 480 },
  audio: { echoCancellation: true }
})
.then((stream) => {
  console.log('Media access granted');
  localVideo.srcObject = stream;
})
.catch((error) => {
  console.error('Media access denied:', error);
});

Constraints Normalization

Normalizes media constraints for Safari-specific requirements.

/**
 * Normalizes media constraints for Safari requirements
 * Converts constraints to Safari-compatible format
 * @param constraints - MediaStreamConstraints to normalize
 */
function shimConstraints(constraints: MediaStreamConstraints): void;

What it fixes:

  • Converts unsupported constraint formats
  • Maps constraint names to Safari equivalents
  • Ensures constraint value compatibility

RTCIceServer URLs Shimming

Normalizes RTCIceServer URL formats for Safari.

/**
 * Shims RTCIceServer URLs for Safari browsers
 * Converts STUN/TURN URLs to Safari-compatible format
 * @param window - Browser window object
 */
function shimRTCIceServerUrls(window: Window): void;

What it fixes:

  • Converts 'urls' array to 'url' string format
  • Handles STUN/TURN server configuration differences
  • Ensures ICE server compatibility

Usage Examples:

import adapter from 'webrtc-adapter';

// ICE server configuration works in Safari (automatically shimmed)
const pc = new RTCPeerConnection({
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { 
      urls: ['turn:turn.example.com:3478'],
      username: 'user',
      credential: 'pass'
    }
  ]
});

Track Event Transceiver Shimming

Provides proper transceiver information in track events for Safari.

/**
 * Shims track event transceiver information for Safari
 * Ensures proper transceiver data in ontrack events
 * @param window - Browser window object
 */
function shimTrackEventTransceiver(window: Window): void;

What it fixes:

  • Adds missing transceiver property to track events
  • Provides proper transceiver-track association
  • Ensures consistent event structure

Legacy CreateOffer Shimming

Provides legacy createOffer behavior compatibility for Safari.

/**
 * Shims legacy createOffer behavior for Safari
 * Handles older Safari createOffer implementation differences
 * @param window - Browser window object
 */
function shimCreateOfferLegacy(window: Window): void;

What it fixes:

  • Handles legacy createOffer options format
  • Provides backward compatibility for older Safari versions
  • Normalizes offer creation behavior

AudioContext Shimming

Provides AudioContext compatibility for Safari browsers.

/**
 * Shims AudioContext for Safari browsers
 * Ensures consistent audio processing capabilities
 * @param window - Browser window object
 */
function shimAudioContext(window: Window): void;

What it fixes:

  • Adds webkit-prefixed AudioContext support
  • Provides consistent audio API access
  • Handles Safari-specific audio context requirements

Usage Examples:

import adapter from 'webrtc-adapter';

// Audio context works consistently (automatically shimmed)
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Process audio from WebRTC stream
function processAudio(stream) {
  const source = audioContext.createMediaStreamSource(stream);
  const analyser = audioContext.createAnalyser();
  source.connect(analyser);
  
  // Audio processing works consistently across browsers
}

Safari Shim Interface

All Safari-specific shims are available through the browser shim interface:

interface ISafariShim {
  shimLocalStreamsAPI: (window: Window) => void;
  shimRemoteStreamsAPI: (window: Window) => void;
  shimCallbacksAPI: (window: Window) => void;
  shimGetUserMedia: (window: Window) => void;
  shimConstraints: (constraints: MediaStreamConstraints) => void;
  shimRTCIceServerUrls: (window: Window) => void;
  shimTrackEventTransceiver: (window: Window) => void;
  shimCreateOfferLegacy: (window: Window) => void;
  shimAudioContext: (window: Window) => void;
}

These shims are automatically applied when Safari is detected and can be accessed via adapter.browserShim when the current browser is Safari.

Safari-Specific Considerations

Unified Plan Support

Safari's Unified Plan support varies by version:

// Check Unified Plan support
if (adapter.browserDetails.supportsUnifiedPlan) {
  console.log('Safari supports Unified Plan');
  // Use modern transceiver-based API
} else {
  console.log('Safari uses Plan-B');
  // Use legacy stream-based API
}

Mobile Safari Differences

Mobile Safari has additional considerations:

  • Different getUserMedia behavior
  • Limited codec support
  • iOS-specific permissions model
  • WebRTC background behavior restrictions

Version-Specific Behavior

Different Safari versions require different handling:

  • Legacy callback-based APIs for older versions
  • Modern Promise-based APIs for newer versions
  • Progressive enhancement based on feature detection

Install with Tessl CLI

npx tessl i tessl/npm-webrtc-adapter

docs

browser-detection.md

chrome-shims.md

common-shims.md

factory-configuration.md

firefox-shims.md

index.md

safari-shims.md

utility-functions.md

tile.json