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

firefox-shims.mddocs/

Firefox Shims

Firefox-specific shims handle compatibility issues and behavioral differences in Firefox browsers to ensure consistent WebRTC behavior across all supported platforms.

Capabilities

OnTrack Event Shimming

Provides consistent ontrack event handling for RTCPeerConnection in Firefox.

/**
 * Shims ontrack event for Firefox browsers
 * Ensures proper track event handling and timing
 * @param window - Browser window object
 */
function shimOnTrack(window: Window): void;

What it fixes:

  • Standardizes track event structure and properties
  • Ensures proper event timing during remote stream addition
  • Provides consistent transceiver and receiver information

Peer Connection Shimming

Main Firefox RTCPeerConnection compatibility shim.

/**
 * Main Firefox RTCPeerConnection shim
 * Applies comprehensive Firefox-specific fixes
 * @param window - Browser window object
 * @param browserDetails - Browser detection information
 */
function shimPeerConnection(window: Window, browserDetails: IBrowserDetails): void;

What it fixes:

  • Standardizes RTCPeerConnection constructor behavior
  • Normalizes offer/answer creation and handling
  • Ensures consistent ICE candidate processing
  • Provides uniform configuration option handling

Sender GetStats Shimming

Normalizes RTCRtpSender.getStats() method for Firefox.

/**
 * Shims RTCRtpSender getStats method for Firefox
 * Provides consistent sender statistics API
 * @param window - Browser window object
 */
function shimSenderGetStats(window: Window): void;

What it fixes:

  • Standardizes sender statistics format and structure
  • Ensures consistent outbound RTP statistics
  • Provides uniform track-based statistics filtering

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// Get sender statistics (automatically shimmed)
pc.getSenders().forEach(async (sender) => {
  if (sender.track) {
    const stats = await sender.getStats();
    stats.forEach((report) => {
      if (report.type === 'outbound-rtp') {
        console.log('Bytes sent:', report.bytesSent);
        console.log('Packets sent:', report.packetsSent);
        console.log('Bandwidth:', report.bytesReceived);
      }
    });
  }
});

Receiver GetStats Shimming

Normalizes RTCRtpReceiver.getStats() method for Firefox.

/**
 * Shims RTCRtpReceiver getStats method for Firefox
 * Provides consistent receiver statistics API
 * @param window - Browser window object
 */
function shimReceiverGetStats(window: Window): void;

What it fixes:

  • Standardizes receiver statistics format and structure
  • Ensures consistent inbound RTP statistics
  • Provides uniform remote track statistics

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// Get receiver statistics (automatically shimmed)
pc.getReceivers().forEach(async (receiver) => {
  if (receiver.track) {
    const stats = await receiver.getStats();
    stats.forEach((report) => {
      if (report.type === 'inbound-rtp') {
        console.log('Bytes received:', report.bytesReceived);
        console.log('Packets received:', report.packetsReceived);
        console.log('Jitter:', report.jitter);
      }
    });
  }
});

Remove Stream Shimming

Provides removeStream() method compatibility for Firefox.

/**
 * Shims removeStream method for Firefox
 * Provides legacy stream removal API compatibility
 * @param window - Browser window object
 */
function shimRemoveStream(window: Window): void;

What it fixes:

  • Adds legacy removeStream() method support
  • Handles stream removal with proper cleanup
  • Maintains compatibility with older WebRTC code

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// Legacy stream removal (automatically shimmed)
function removeLocalStream(stream) {
  if (pc.removeStream) {
    pc.removeStream(stream);
  } else {
    // Fallback to modern track removal
    stream.getTracks().forEach(track => {
      const sender = pc.getSenders().find(s => s.track === track);
      if (sender) {
        pc.removeTrack(sender);
      }
    });
  }
}

RTCDataChannel Shimming

Provides RTCDataChannel compatibility fixes for Firefox.

/**
 * Shims RTCDataChannel API for Firefox
 * Ensures consistent data channel behavior
 * @param window - Browser window object
 */
function shimRTCDataChannel(window: Window): void;

What it fixes:

  • Standardizes data channel creation and configuration
  • Normalizes data channel state transitions
  • Ensures consistent message handling

Add Transceiver Shimming

Provides addTransceiver() method compatibility for Firefox.

/**
 * Shims addTransceiver method for Firefox
 * Provides consistent transceiver creation API
 * @param window - Browser window object
 */
function shimAddTransceiver(window: Window): void;

What it fixes:

  • Adds missing addTransceiver() method support
  • Handles transceiver creation with proper configuration
  • Provides unified send/receive control

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// Add transceiver (automatically shimmed)
const transceiver = pc.addTransceiver('video', {
  direction: 'sendrecv',
  streams: [localStream]
});

console.log('Created transceiver:', transceiver.mid);
console.log('Direction:', transceiver.direction);

Get Parameters Shimming

Shims getParameters() method for RTCRtpSender in Firefox.

/**
 * Shims getParameters method for Firefox
 * Provides consistent sender parameter access
 * @param window - Browser window object
 */
function shimGetParameters(window: Window): void;

What it fixes:

  • Adds missing getParameters() method functionality
  • Provides encoding parameter access
  • Ensures consistent parameter structure

Create Offer Shimming

Normalizes createOffer() method behavior for Firefox.

/**
 * Shims createOffer method for Firefox
 * Ensures consistent offer creation behavior
 * @param window - Browser window object
 */
function shimCreateOffer(window: Window): void;

What it fixes:

  • Standardizes offer creation options handling
  • Normalizes SDP generation behavior
  • Ensures consistent codec preferences

Create Answer Shimming

Normalizes createAnswer() method behavior for Firefox.

/**
 * Shims createAnswer method for Firefox
 * Ensures consistent answer creation behavior
 * @param window - Browser window object
 */
function shimCreateAnswer(window: Window): void;

What it fixes:

  • Standardizes answer creation options handling
  • Normalizes answer SDP generation
  • Ensures proper codec negotiation

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// Create offer/answer (automatically shimmed)
async function createOfferAnswer() {
  try {
    const offer = await pc.createOffer({
      offerToReceiveAudio: true,
      offerToReceiveVideo: true
    });
    
    await pc.setLocalDescription(offer);
    
    // Send offer to remote peer, then create answer
    const answer = await pc.createAnswer();
    await pc.setLocalDescription(answer);
    
  } catch (error) {
    console.error('Offer/Answer creation failed:', error);
  }
}

GetUserMedia Shimming

Firefox-specific getUserMedia compatibility shim.

/**
 * Shims getUserMedia for Firefox browsers
 * Provides consistent media access API
 * @param window - Browser window object
 * @param browserDetails - Browser detection information
 */
function shimGetUserMedia(window: Window, browserDetails: IBrowserDetails): void;

What it fixes:

  • Standardizes getUserMedia constraints handling
  • Normalizes device selection and permissions
  • Provides consistent error handling patterns

GetDisplayMedia Shimming

Firefox-specific getDisplayMedia compatibility shim.

/**
 * Shims getDisplayMedia for Firefox browsers
 * Provides screen sharing compatibility
 * @param window - Browser window object
 * @param preferredMediaSource - Preferred screen capture source
 */
function shimGetDisplayMedia(window: Window, preferredMediaSource: string): void;

What it fixes:

  • Adds missing getDisplayMedia() functionality
  • Provides screen sharing capability
  • Handles display source selection

Usage Examples:

import adapter from 'webrtc-adapter';

// Screen sharing (automatically shimmed)
async function shareScreen() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true
    });
    
    console.log('Screen sharing started');
    return stream;
    
  } catch (error) {
    console.error('Screen sharing failed:', error);
  }
}

Firefox Shim Interface

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

interface IFirefoxShim {
  shimOnTrack: (window: Window) => void;
  shimPeerConnection: (window: Window, browserDetails: IBrowserDetails) => void;
  shimSenderGetStats: (window: Window) => void;
  shimReceiverGetStats: (window: Window) => void;
  shimRemoveStream: (window: Window) => void;
  shimRTCDataChannel: (window: Window) => void;
  shimAddTransceiver: (window: Window) => void;
  shimGetParameters: (window: Window) => void;
  shimCreateOffer: (window: Window) => void;
  shimCreateAnswer: (window: Window) => void;
  shimGetUserMedia: (window: Window, browserDetails: IBrowserDetails) => void;
  shimGetDisplayMedia: (window: Window, preferredMediaSource: string) => void;
}

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

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