How to use webrtc-adapter (adapter.js) shim in Webpack?

Question

I have a commonjs browser application (typescript) that I use Webpack to bundle. It uses webrtc so I want to use the webrtc-adapter package from npm. It is the package for adapter.js which makes working with webrtc between firefox & chrome easier.

Inside my modules I want to be able to access the modified navigator item. For example, so I can simply call:

navigator.mediaDevices.getUserMedia

I can get it to work if I require the package and then use the variable somewhere in my module like so:

var webrtc = require("webrtc-adapter");
// somewhere in module
console.log(webrtc.browserDetails);

However, I don't need to access browserDetails or any of the exposed items by webrtc-adapter, I just want to use the shimmed calls on the navigator object. I've tried using webpack.ProvidePlugin and externals but both still require that I use the object somewhere.

Is there a way I can load the shimmed navigator into each module without having to require and then use the variable somewhere in my modules? I know I can use external in the config and then load it via a separate script tag but I'd prefer to have webpack bundle it all together.

Answer 1

have you tried just requiring it like this?

require('webrtc-adapter');

Answer 2

For normal Webpack:

var a = require('webrtc-adapter');

For TypeScript. If you also want some typings, use the reference tag with @types/webrtc as well.

/// <reference types="webrtc" />
import 'webrtc-adapter';