0
# Chrome Shims
1

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

4
## Capabilities
5

6
### Media Stream Shimming
7

8
Normalizes MediaStream API behavior for Chrome browsers.
9

10
```javascript { .api }
11
/**
12
 * Shims MediaStream API for Chrome browsers
13
 * Ensures consistent MediaStream constructor and method behavior
14
 * @param window - Browser window object
15
 */
16
function shimMediaStream(window: Window): void;
17
```
18

19
**What it fixes:**
20
- Standardizes MediaStream constructor behavior
21
- Ensures consistent track handling methods
22
- Provides uniform stream manipulation API
23

24
### OnTrack Event Shimming
25

26
Provides consistent ontrack event handling for RTCPeerConnection in Chrome.
27

28
```javascript { .api }
29
/**
30
 * Shims ontrack event for Chrome browsers
31
 * Ensures proper track event handling and receiver information
32
 * @param window - Browser window object
33
 */
34
function shimOnTrack(window: Window): void;
35
```
36

37
**What it fixes:**
38
- Standardizes track event structure and timing
39
- Ensures receiver objects are properly populated
40
- Provides consistent transceiver information
41

42
**Usage Examples:**
43

44
```javascript
45
import adapter from 'webrtc-adapter';
46

47
const pc = new RTCPeerConnection();
48

49
// ontrack events work consistently across browsers
50
pc.ontrack = (event) => {
51
  console.log('Received track:', event.track);
52
  console.log('From receiver:', event.receiver);
53
  console.log('Via transceiver:', event.transceiver);
54
  
55
  // Add track to video element
56
  if (event.track.kind === 'video') {
57
    videoElement.srcObject = event.streams[0];
58
  }
59
};
60
```
61

62
### GetSenders with DTMF Filtering
63

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

66
```javascript { .api }
67
/**
68
 * Filters getSenders to only return those with DTMF capability
69
 * Provides consistent DTMF sender identification
70
 * @param window - Browser window object
71
 */
72
function shimGetSendersWithDtmf(window: Window): void;
73
```
74

75
**What it fixes:**
76
- Filters senders list to DTMF-capable senders only
77
- Provides consistent DTMF sender identification
78
- Standardizes dual-tone multi-frequency support detection
79

80
### Sender/Receiver GetStats Shimming
81

82
Normalizes getStats() methods for RTCRtpSender and RTCRtpReceiver.
83

84
```javascript { .api }
85
/**
86
 * Shims sender/receiver getStats methods for Chrome
87
 * Provides consistent statistics API across Chrome versions
88
 * @param window - Browser window object
89
 */
90
function shimSenderReceiverGetStats(window: Window): void;
91
```
92

93
**What it fixes:**
94
- Standardizes RTCRtpSender.getStats() behavior
95
- Normalizes RTCRtpReceiver.getStats() output format
96
- Ensures consistent statistics reporting structure
97

98
**Usage Examples:**
99

100
```javascript
101
import adapter from 'webrtc-adapter';
102

103
const pc = new RTCPeerConnection();
104

105
// Get sender statistics (automatically shimmed)
106
pc.getSenders().forEach(async (sender) => {
107
  if (sender.track) {
108
    const stats = await sender.getStats();
109
    stats.forEach((report) => {
110
      if (report.type === 'outbound-rtp') {
111
        console.log('Bytes sent:', report.bytesSent);
112
        console.log('Packets sent:', report.packetsSent);
113
      }
114
    });
115
  }
116
});
117
```
118

119
### AddTrack/RemoveTrack Shimming (Native Implementation)
120

121
Provides addTrack/removeTrack implementation using native Chrome capabilities.
122

123
```javascript { .api }
124
/**
125
 * Shims addTrack/removeTrack using native Chrome implementation
126
 * Ensures optimal performance with native browser features
127
 * @param window - Browser window object
128
 */
129
function shimAddTrackRemoveTrackWithNative(window: Window): void;
130
```
131

132
### AddTrack/RemoveTrack Shimming (General)
133

134
General implementation of addTrack/removeTrack for Chrome browsers.
135

136
```javascript { .api }
137
/**
138
 * Shims addTrack/removeTrack methods for Chrome browsers
139
 * Provides consistent track management API
140
 * @param window - Browser window object
141
 * @param browserDetails - Browser detection information
142
 */
143
function shimAddTrackRemoveTrack(window: Window, browserDetails: IBrowserDetails): void;
144
```
145

146
**What it fixes:**
147
- Provides consistent addTrack/removeTrack behavior
148
- Handles transceiver creation properly
149
- Manages sender/receiver lifecycle correctly
150

151
**Usage Examples:**
152

153
```javascript
154
import adapter from 'webrtc-adapter';
155

156
const pc = new RTCPeerConnection();
157

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

167
// Remove track
168
const senders = pc.getSenders();
169
senders.forEach((sender) => {
170
  if (sender.track && sender.track.kind === 'video') {
171
    pc.removeTrack(sender);
172
    console.log('Removed video track');
173
  }
174
});
175
```
176

177
### Peer Connection Shimming
178

179
Main Chrome RTCPeerConnection compatibility shim.
180

181
```javascript { .api }
182
/**
183
 * Main Chrome RTCPeerConnection shim
184
 * Applies comprehensive Chrome-specific fixes
185
 * @param window - Browser window object
186
 * @param browserDetails - Browser detection information
187
 */
188
function shimPeerConnection(window: Window, browserDetails: IBrowserDetails): void;
189
```
190

191
**What it fixes:**
192
- Standardizes RTCPeerConnection constructor options
193
- Normalizes offer/answer creation behavior  
194
- Ensures consistent ICE handling
195
- Provides uniform data channel support
196

197
### Negotiation Needed Event Fix
198

199
Fixes negotiationneeded event timing and triggering issues in Chrome.
200

201
```javascript { .api }
202
/**
203
 * Fixes negotiationneeded event timing for Chrome
204
 * Ensures proper event firing sequence and conditions
205
 * @param window - Browser window object
206
 * @param browserDetails - Browser detection information
207
 */
208
function fixNegotiationNeeded(window: Window, browserDetails: IBrowserDetails): void;
209
```
210

211
**What it fixes:**
212
- Corrects negotiationneeded event timing
213
- Prevents spurious event firing
214
- Ensures proper renegotiation triggers
215

216
**Usage Examples:**
217

218
```javascript
219
import adapter from 'webrtc-adapter';
220

221
const pc = new RTCPeerConnection();
222

223
// negotiationneeded events fire correctly (automatically shimmed)
224
pc.onnegotiationneeded = async () => {
225
  console.log('Negotiation needed - creating offer');
226
  try {
227
    const offer = await pc.createOffer();
228
    await pc.setLocalDescription(offer);
229
    // Send offer to remote peer
230
  } catch (error) {
231
    console.error('Negotiation failed:', error);
232
  }
233
};
234
```
235

236
### GetUserMedia Shimming
237

238
Chrome-specific getUserMedia compatibility shim.
239

240
```javascript { .api }
241
/**
242
 * Shims getUserMedia for Chrome browsers
243
 * Provides consistent media access API
244
 * @param window - Browser window object
245
 * @param browserDetails - Browser detection information
246
 */
247
function shimGetUserMedia(window: Window, browserDetails: IBrowserDetails): void;
248
```
249

250
**What it fixes:**
251
- Standardizes getUserMedia constraints handling
252
- Normalizes permission and error handling
253
- Provides consistent media device access
254

255
## Chrome Shim Interface
256

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

259
```javascript { .api }
260
interface IChromeShim {
261
  shimMediaStream: (window: Window) => void;
262
  shimOnTrack: (window: Window) => void;
263
  shimGetSendersWithDtmf: (window: Window) => void;
264
  shimSenderReceiverGetStats: (window: Window) => void;
265
  shimAddTrackRemoveTrackWithNative: (window: Window) => void;
266
  shimAddTrackRemoveTrack: (window: Window, browserDetails: IBrowserDetails) => void;
267
  shimPeerConnection: (window: Window, browserDetails: IBrowserDetails) => void;
268
  fixNegotiationNeeded: (window: Window, browserDetails: IBrowserDetails) => void;
269
  shimGetUserMedia: (window: Window, browserDetails: IBrowserDetails) => void;
270
}
271
```
272

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