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

chrome-shims.mddocs/

Chrome Shims

Chrome-specific shims handle compatibility issues and behavioral differences in Chrome, Chromium, Opera, Edge (Chromium-based), and other Chromium-based browsers.

Capabilities

Media Stream Shimming

Normalizes MediaStream API behavior for Chrome browsers.

/**
 * Shims MediaStream API for Chrome browsers
 * Ensures consistent MediaStream constructor and method behavior
 * @param window - Browser window object
 */
function shimMediaStream(window: Window): void;

What it fixes:

  • Standardizes MediaStream constructor behavior
  • Ensures consistent track handling methods
  • Provides uniform stream manipulation API

OnTrack Event Shimming

Provides consistent ontrack event handling for RTCPeerConnection in Chrome.

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

What it fixes:

  • Standardizes track event structure and timing
  • Ensures receiver objects are properly populated
  • Provides consistent transceiver information

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// ontrack events work consistently across browsers
pc.ontrack = (event) => {
  console.log('Received track:', event.track);
  console.log('From receiver:', event.receiver);
  console.log('Via transceiver:', event.transceiver);
  
  // Add track to video element
  if (event.track.kind === 'video') {
    videoElement.srcObject = event.streams[0];
  }
};

GetSenders with DTMF Filtering

Filters getSenders() results to only include senders with DTMF capability when needed.

/**
 * Filters getSenders to only return those with DTMF capability
 * Provides consistent DTMF sender identification
 * @param window - Browser window object
 */
function shimGetSendersWithDtmf(window: Window): void;

What it fixes:

  • Filters senders list to DTMF-capable senders only
  • Provides consistent DTMF sender identification
  • Standardizes dual-tone multi-frequency support detection

Sender/Receiver GetStats Shimming

Normalizes getStats() methods for RTCRtpSender and RTCRtpReceiver.

/**
 * Shims sender/receiver getStats methods for Chrome
 * Provides consistent statistics API across Chrome versions
 * @param window - Browser window object
 */
function shimSenderReceiverGetStats(window: Window): void;

What it fixes:

  • Standardizes RTCRtpSender.getStats() behavior
  • Normalizes RTCRtpReceiver.getStats() output format
  • Ensures consistent statistics reporting structure

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);
      }
    });
  }
});

AddTrack/RemoveTrack Shimming (Native Implementation)

Provides addTrack/removeTrack implementation using native Chrome capabilities.

/**
 * Shims addTrack/removeTrack using native Chrome implementation
 * Ensures optimal performance with native browser features
 * @param window - Browser window object
 */
function shimAddTrackRemoveTrackWithNative(window: Window): void;

AddTrack/RemoveTrack Shimming (General)

General implementation of addTrack/removeTrack for Chrome browsers.

/**
 * Shims addTrack/removeTrack methods for Chrome browsers
 * Provides consistent track management API
 * @param window - Browser window object
 * @param browserDetails - Browser detection information
 */
function shimAddTrackRemoveTrack(window: Window, browserDetails: IBrowserDetails): void;

What it fixes:

  • Provides consistent addTrack/removeTrack behavior
  • Handles transceiver creation properly
  • Manages sender/receiver lifecycle correctly

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// Add track to peer connection (automatically shimmed)
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then((stream) => {
    stream.getTracks().forEach((track) => {
      const sender = pc.addTrack(track, stream);
      console.log('Added track:', track.kind);
    });
  });

// Remove track
const senders = pc.getSenders();
senders.forEach((sender) => {
  if (sender.track && sender.track.kind === 'video') {
    pc.removeTrack(sender);
    console.log('Removed video track');
  }
});

Peer Connection Shimming

Main Chrome RTCPeerConnection compatibility shim.

/**
 * Main Chrome RTCPeerConnection shim
 * Applies comprehensive Chrome-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 options
  • Normalizes offer/answer creation behavior
  • Ensures consistent ICE handling
  • Provides uniform data channel support

Negotiation Needed Event Fix

Fixes negotiationneeded event timing and triggering issues in Chrome.

/**
 * Fixes negotiationneeded event timing for Chrome
 * Ensures proper event firing sequence and conditions
 * @param window - Browser window object
 * @param browserDetails - Browser detection information
 */
function fixNegotiationNeeded(window: Window, browserDetails: IBrowserDetails): void;

What it fixes:

  • Corrects negotiationneeded event timing
  • Prevents spurious event firing
  • Ensures proper renegotiation triggers

Usage Examples:

import adapter from 'webrtc-adapter';

const pc = new RTCPeerConnection();

// negotiationneeded events fire correctly (automatically shimmed)
pc.onnegotiationneeded = async () => {
  console.log('Negotiation needed - creating offer');
  try {
    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
    // Send offer to remote peer
  } catch (error) {
    console.error('Negotiation failed:', error);
  }
};

GetUserMedia Shimming

Chrome-specific getUserMedia compatibility shim.

/**
 * Shims getUserMedia for Chrome 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 permission and error handling
  • Provides consistent media device access

Chrome Shim Interface

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

interface IChromeShim {
  shimMediaStream: (window: Window) => void;
  shimOnTrack: (window: Window) => void;
  shimGetSendersWithDtmf: (window: Window) => void;
  shimSenderReceiverGetStats: (window: Window) => void;
  shimAddTrackRemoveTrackWithNative: (window: Window) => void;
  shimAddTrackRemoveTrack: (window: Window, browserDetails: IBrowserDetails) => void;
  shimPeerConnection: (window: Window, browserDetails: IBrowserDetails) => void;
  fixNegotiationNeeded: (window: Window, browserDetails: IBrowserDetails) => void;
  shimGetUserMedia: (window: Window, browserDetails: IBrowserDetails) => void;
}

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

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