{"id":15408,"library":"webrtc-adapter-test","title":"WebRTC Adapter","description":"The WebRTC Adapter, often referred to as `adapter.js`, is a critical JavaScript shim library designed to mitigate cross-browser inconsistencies and insulate applications from evolving WebRTC API specifications. While initial WebRTC implementations featured significant vendor prefixes (e.g., `webkitGetUserMedia`, `mozRTCPeerConnection`), these have largely converged to standard names. However, subtle behavioral differences and API quirks still persist across browsers like Chrome, Firefox, and Safari. The adapter transparently intercepts and normalizes these variations, allowing developers to write more consistent and future-proof WebRTC code without extensive browser-specific conditionals or polyfills. Currently, the actively maintained version is `9.0.4`, available via `webrtc-adapter` on npm. Maintained by WebRTC experts (under `webrtcHacks` on GitHub), it offers a stable and reliable solution for ensuring WebRTC applications function seamlessly across diverse environments. Its release cadence typically follows browser updates and WebRTC specification adjustments to maintain compatibility.","status":"active","version":"0.2.10","language":"javascript","source_language":"en","source_url":"https://github.com/webrtc/adapter","tags":["javascript"],"install":[{"cmd":"npm install webrtc-adapter-test","lang":"bash","label":"npm"},{"cmd":"yarn add webrtc-adapter-test","lang":"bash","label":"yarn"},{"cmd":"pnpm add webrtc-adapter-test","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"When included via a `<script>` tag, the `adapter` object is typically exposed globally on `window.adapter`. This is often derived from `node_modules/webrtc-adapter/out/adapter.js`.","wrong":"import adapter from 'webrtc-adapter'; // when using script tag","symbol":"adapter (global)","correct":"<!-- included via script tag -->"},{"note":"For module bundlers (Webpack, Rollup, Vite) or native ESM in browsers, import the default export. This approach does not expose a global `window.adapter` by default.","wrong":"const adapter = require('webrtc-adapter'); // For modern browser builds (ESM)","symbol":"adapter (ESM)","correct":"import adapter from 'webrtc-adapter';"},{"note":"For CommonJS environments, `require` is the correct method. The adapter primarily shims browser APIs, so its direct use in Node.js might be limited to utility functions like `browserDetails`.","wrong":"import adapter from 'webrtc-adapter'; // In CommonJS environments (Node.js/older bundlers)","symbol":"adapter (CJS)","correct":"const adapter = require('webrtc-adapter');"},{"note":"The `browserDetails` object, containing `browser` and `version` properties, is accessed via the `adapter` object to detect the WebRTC engine.","wrong":"console.log(window.browserDetails.browser); // Not a direct global","symbol":"adapter.browserDetails","correct":"console.log(adapter.browserDetails.browser);"}],"quickstart":{"code":"import adapter from 'webrtc-adapter';\n\nconst localVideo = document.createElement('video');\nlocalVideo.autoplay = true;\nlocalVideo.muted = true;\ndocument.body.appendChild(localVideo);\n\nconsole.log('WebRTC Adapter loaded. Browser:', adapter.browserDetails.browser, 'Version:', adapter.browserDetails.version);\n\nconst startMedia = async () => {\n  try {\n    const stream = await navigator.mediaDevices.getUserMedia({\n      video: true,\n      audio: true\n    });\n    localVideo.srcObject = stream;\n    console.log('Local stream acquired and displayed.');\n  } catch (e) {\n    console.error('Error accessing media devices:', e);\n    alert(`Error accessing media: ${e.name} - ${e.message}`);\n  }\n};\n\nstartMedia();","lang":"typescript","description":"This quickstart demonstrates how to import and use the WebRTC Adapter, then acquire and display a local video and audio stream using `navigator.mediaDevices.getUserMedia` which the adapter may have shimmed. It also logs browser details detected by the adapter."},"warnings":[{"fix":"Use `npm install webrtc-adapter` and `import adapter from 'webrtc-adapter';`.","message":"The package `webrtc-adapter-test` is an internal or deprecated testing package (version 0.2.10). For production use and active development, install and use the `webrtc-adapter` package (latest is 9.0.4).","severity":"gotcha","affected_versions":"<=0.2.10 (for -test package)"},{"fix":"Always pin the exact version of `webrtc-adapter` in your `package.json` (e.g., `\"webrtc-adapter\": \"^9.0.4\"` to `\"webrtc-adapter\": \"9.0.4\"`) and thoroughly test when upgrading versions. Review release notes for breaking changes.","message":"Major version updates of `webrtc-adapter` can introduce breaking changes, such as the removal of legacy shims (e.g., `navigator.getDisplayMedia` shim was removed) or modifications to API function signatures (`getStats`). These changes align with WebRTC specification evolution, but can break older applications.","severity":"breaking","affected_versions":">=6.0"},{"fix":"If using a script tag and expecting global access, ensure you are loading `adapter.js`. If using a module bundler, typically `import adapter from 'webrtc-adapter';` is sufficient, and a global is not exposed unless explicitly configured by the bundler or the `adapter.js` variant.","message":"When bundling for the browser, be aware of the different output files: `adapter.js` exposes the `adapter` object globally on `window.adapter`, while `adapter_no_global.js` does not. Choose the correct file based on whether you expect a global object or plan to import it as a module.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Always use the standard, unprefixed WebRTC APIs. The adapter will apply necessary shims behind the scenes. Regularly update the adapter to ensure support for the latest browser behaviors.","message":"Direct browser prefix usage (e.g., `navigator.webkitGetUserMedia`) is deprecated. While the adapter historically handled these, modern WebRTC development should target the standard `navigator.mediaDevices.getUserMedia` and `RTCPeerConnection` APIs, letting the adapter manage subtle browser differences.","severity":"deprecated","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"If using a module system (ESM/CommonJS), ensure you have `import adapter from 'webrtc-adapter';` or `const adapter = require('webrtc-adapter');` at the top of your file. If using a `<script>` tag, ensure the adapter script is loaded before your code that references `adapter`.","cause":"Attempting to access the `adapter` object without properly importing it in a module environment or before its script tag has executed in a global environment.","error":"ReferenceError: adapter is not defined"},{"fix":"Ensure `webrtc-adapter` is loaded and executed *before* any WebRTC API calls, especially `navigator.mediaDevices.getUserMedia`. The adapter polyfills `navigator.mediaDevices` for older browsers or contexts where it might be missing or prefixed. Also, check if the browser fundamentally supports WebRTC.","cause":"Accessing `navigator.mediaDevices` in an older browser or a browser context where it's not yet defined, or when the `webrtc-adapter` shim has not been properly applied.","error":"TypeError: navigator.mediaDevices is undefined"}],"ecosystem":"npm"}