media-devices 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [UNRELEASED]
+
+## [0.4.0] - 2022-05-30
+
+### Removed
+
+- The deprecated `on('devicechange')` interface has been removed. Use `ondevicechange` instead.
+
 ## [0.3.0] - 2021-12-04
 
 ### Added
@@ -47,7 +55,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - A device list-diffing implementation of `ondevicechange`.
 - Support detection via `supportsMediaDevices()`.
 
-[Unreleased]: https://github.com/PsychoLlama/media-devices/compare/v0.3.0...HEAD
+[Unreleased]: https://github.com/PsychoLlama/media-devices/compare/v0.4.0...HEAD
+[0.4.0]: https://github.com/PsychoLlama/media-devices/compare/v0.3.0...v0.4.0
 [0.3.0]: https://github.com/PsychoLlama/media-devices/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/PsychoLlama/media-devices/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/PsychoLlama/media-devices/releases/tag/v0.1.0

package/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <h1>Media Devices</h1>
   <p>Easily manage media devices in the browser</p>
-  
+
   <div>
     <a href="https://github.com/PsychoLlama/media-devices/actions/workflows/main.yml">
       <img src="https://img.shields.io/github/workflow/status/PsychoLlama/media-devices/CI/main" alt="Build status" />
@@ -14,9 +14,11 @@
 </div>
 
 ## Purpose
+
 `media-devices` wraps the [native browser API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices) and tries to normalize as many cross-browser quirks as possible ([reference](#known-quirks)). It also provides a device list diffing observer that notifies you as devices are added, removed, or updated.
 
 ## API
+
 The API is a carbon copy of [`navigator.mediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices), with the exception of `ondevicechange` which was replaced for more bells and whistles.
 
 Here's the gist:
@@ -40,6 +42,7 @@ MediaDevices.ondevicechange = ({ changes }) => {
 ```
 
 ### `supportsMediaDevices()`
+
 Exported as a separate utility function, this helps determine if your browser supports the `navigator.mediaDevices` API. Be aware that some browsers only expose it on secure sites.
 
 ```js
@@ -51,6 +54,7 @@ if (supportsMediaDevices()) {
 ```
 
 ### `ondevicechange`
+
 `MediaDevices` emits this event whenever the list of devices changes. It passes two things:
 
 1. A list of changes
@@ -92,14 +96,17 @@ Update events are odd. Browsers redact information until the user explicitly gra
 ---------------
 
 ## Known Quirks
+
 For the curious...
 
 ### Duplicate Devices
+
 Preferred devices are represented through list order: preferred devices are show up first. Chrome has a "feature" where preferred devices are duplicated in the list with a `"default"` device ID. You'll notice some meeting apps get confused this and list them twice in their device dropdowns. I can't find any sources or justified reasoning, and they're the only browser that does it.
 
 Since that information is already available in list ordering, `media-devices` strips out the duplicates.
 
 ### Redacted Device Names
+
 Until the first approved `getUserMedia(...)` query, browsers assume you're not trusted enough to see the list of device names. That's fair. Device names are an easy target for user fingerprinting. They patched it by setting `device.label` to an empty string.
 
 It works, but it can break certain UIs if they're not carefully checking for empty strings. `media-devices` makes this behavior explicit by setting the label to `null`.
@@ -107,6 +114,7 @@ It works, but it can break certain UIs if they're not carefully checking for emp
 This library updates the device list after a successful `getUserMedia(...)` query ensuring your device state is as accurate as possible.
 
 ### Redacted Device IDs
+
 According to the spec, device IDs are meant to persist until the user clears site data, which is a dream come true if you're one of those assholes writing fingerprinting software. Some browsers thwart those efforts by redacting the device ID until you've been approved a `getUserMedia(...)` request.
 
 That makes it hard to tell whether the device list actually changed. This library handles the heavy lifting of fuzzy matching devices to determine if new ones were added, others were removed, or if you just got permission to see the real ID/label.
@@ -114,16 +122,19 @@ That makes it hard to tell whether the device list actually changed. This librar
 Device IDs are set to `null` in this case.
 
 ### Missing Group IDs
+
 As of Safari v14, even with permissions, the browser doesn't provide group IDs. Why? Because they're monsters.
 
 Group IDs are `null` in Safari.
 
 ### Hidden Devices
+
 Chrome and Safari only show the first of each device type (mic, camera, speakers) until `getUserMedia(...)` is approved. Other options are hidden. If you have 10 cameras, you'll only see the first until you're authorized. Even then, Chrome only shows you cameras, microphones are still hidden.
 
 While we can't work around it, we can automatically identify that old camera in the list of 10 and show the other 9 as added devices.
 
 ### Speaker Replacement
+
 There's a subtle difference between wired speakers vs bluetooth devices. It seems that by default, many computers list internal speakers as a single device (expected), but if you plug in an auxiliary jack, it swaps the label in-place and uses the same device ID (unexpected). So if you plug in headphones but you've also got speakers on your computer, it may only list one device.
 
 Bluetooth behaves more as you'd expect. They are shown as distinct devices and you can switch between them.

package/dist/media-devices.es.d.ts

@@ -0,0 +1,2 @@
+export * from "../src/index"
+export {default} from "../src/index"

package/dist/media-devices.es.js

@@ -0,0 +1,132 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+function supportsMediaDevices() {
+  return typeof navigator !== "undefined" && !!navigator.mediaDevices;
+}
+function getMediaDevicesApi() {
+  if (!supportsMediaDevices()) {
+    throw new Error(`The media devices API isn't supported here.`);
+  }
+  return navigator.mediaDevices;
+}
+async function enumerateDevices() {
+  const devices = await getMediaDevicesApi().enumerateDevices();
+  return devices.filter(isPhysicalDevice).map(normalizeDeviceInfo);
+}
+function isPhysicalDevice(device) {
+  return device.deviceId !== "default";
+}
+function normalizeDeviceInfo(device) {
+  return {
+    label: device.label || null,
+    kind: device.kind,
+    deviceId: device.deviceId || null,
+    groupId: device.groupId || null
+  };
+}
+var DeviceKind = /* @__PURE__ */ ((DeviceKind2) => {
+  DeviceKind2["VideoInput"] = "videoinput";
+  DeviceKind2["AudioInput"] = "audioinput";
+  DeviceKind2["AudioOutput"] = "audiooutput";
+  return DeviceKind2;
+})(DeviceKind || {});
+async function getUserMedia(constraints) {
+  return getMediaDevicesApi().getUserMedia(constraints);
+}
+class DeviceManager {
+  constructor() {
+    __publicField(this, "_knownDevices", []);
+    __publicField(this, "_gainedScreenAccessOnce", false);
+    __publicField(this, "ondevicechange", null);
+    __publicField(this, "getUserMedia", async (constraints) => {
+      const stream = await getUserMedia(constraints);
+      this.enumerateDevices();
+      return stream;
+    });
+    __publicField(this, "getDisplayMedia", async (constraints) => {
+      const stream = await getMediaDevicesApi().getDisplayMedia(constraints);
+      if (!this._gainedScreenAccessOnce) {
+        this._gainedScreenAccessOnce = true;
+        this.enumerateDevices();
+      }
+      return stream;
+    });
+    __publicField(this, "enumerateDevices", async () => {
+      const devices = await enumerateDevices();
+      this._checkForDeviceChanges(devices);
+      return devices;
+    });
+    __publicField(this, "getSupportedConstraints", () => {
+      return getMediaDevicesApi().getSupportedConstraints();
+    });
+    if (supportsMediaDevices()) {
+      getMediaDevicesApi().addEventListener("devicechange", () => {
+        if (this.ondevicechange) {
+          return this.enumerateDevices();
+        }
+        return Promise.resolve();
+      });
+    }
+  }
+  _checkForDeviceChanges(newDevices) {
+    var _a;
+    const oldDevices = this._knownDevices;
+    this._knownDevices = newDevices;
+    const changes = this._calculateDeviceDiff(newDevices, oldDevices);
+    if (changes.length) {
+      (_a = this.ondevicechange) == null ? void 0 : _a.call(this, { changes, devices: newDevices });
+    }
+  }
+  _calculateDeviceDiff(newDevices, oldDevices) {
+    const removals = oldDevices.slice();
+    const updates = [];
+    const additions = newDevices.filter((newDevice) => {
+      const oldDeviceIndex = removals.findIndex((oldDevice) => {
+        return isIdenticalDevice(newDevice, oldDevice);
+      });
+      if (oldDeviceIndex > -1) {
+        const [oldDevice] = removals.splice(oldDeviceIndex, 1);
+        if (newDevice.label !== oldDevice.label) {
+          const update = {
+            type: OperationType.Update,
+            newInfo: newDevice,
+            oldInfo: oldDevice
+          };
+          updates.push(update);
+        }
+      }
+      return oldDeviceIndex === -1;
+    });
+    return [
+      ...updates,
+      ...removals.map((device) => {
+        return { type: OperationType.Remove, device };
+      }),
+      ...additions.map((device) => {
+        return { type: OperationType.Add, device };
+      })
+    ];
+  }
+}
+function isIdenticalDevice(newDevice, oldDevice) {
+  if (oldDevice.deviceId) {
+    return newDevice.deviceId === oldDevice.deviceId;
+  }
+  function toCrudeId(device) {
+    return `${device.kind}:${device.groupId}`;
+  }
+  return toCrudeId(newDevice) === toCrudeId(oldDevice);
+}
+var OperationType = /* @__PURE__ */ ((OperationType2) => {
+  OperationType2["Add"] = "add";
+  OperationType2["Remove"] = "remove";
+  OperationType2["Update"] = "update";
+  return OperationType2;
+})(OperationType || {});
+var index = new DeviceManager();
+export { DeviceKind, OperationType, index as default, supportsMediaDevices };
+//# sourceMappingURL=media-devices.es.js.map

package/dist/media-devices.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-devices.es.js","sources":["../src/support-detection.ts","../src/enumerate-devices.ts","../src/get-user-media.ts","../src/device-manager.ts","../src/index.ts"],"sourcesContent":["/**\n * Not all browsers support media devices, and some restrict access for\n * insecure sites and private contexts. This is often reflected by removing\n * the `mediaDevices` API entirely.\n */\nexport function supportsMediaDevices() {\n  return typeof navigator !== 'undefined' && !!navigator.mediaDevices;\n}\n\nexport function getMediaDevicesApi() {\n  if (!supportsMediaDevices()) {\n    throw new Error(`The media devices API isn't supported here.`);\n  }\n\n  return navigator.mediaDevices;\n}\n","import { getMediaDevicesApi } from './support-detection';\n\n/**\n * A normalization layer over `MediaDevices.enumerateDevices()`:\n * https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo\n *\n * The API is fraught with cross-browser quirks and fingerprinting blocks.\n * This interface seeks to normalize some of those quirks and make the\n * security tradeoffs obvious.\n */\nexport default async function enumerateDevices(): Promise<Array<DeviceInfo>> {\n  const devices = await getMediaDevicesApi().enumerateDevices();\n  return devices.filter(isPhysicalDevice).map(normalizeDeviceInfo);\n}\n\n/**\n * Chromium does this really annoying thing where it duplicates preferred\n * devices by substituting the ID with \"default\". No other browser does this,\n * and preferred devices are already represented by list order.\n *\n * Since those meta-devices don't add relevant information and risk confusing\n * device UIs, I simply remove them.\n */\nfunction isPhysicalDevice(device: MediaDeviceInfo) {\n  return device.deviceId !== 'default';\n}\n\n// Make nullable fields explicit.\nfunction normalizeDeviceInfo(device: MediaDeviceInfo): DeviceInfo {\n  return {\n    label: device.label || null,\n    kind: device.kind as DeviceKind,\n    deviceId: device.deviceId || null,\n    groupId: device.groupId || null,\n  };\n}\n\nexport interface DeviceInfo {\n  /**\n   * The device list is obfuscated until you gain elevated permissions.\n   * Browsers will use an empty string for the device label until the first\n   * successful `getUserMedia(...)` request.\n   */\n  label: null | string;\n\n  /**\n   * A unique identifier persistent across sessions. Note: In Chromium\n   * browsers, this can be unset if you haven't received permission for the\n   * media resource yet.\n   */\n  deviceId: null | string;\n\n  /**\n   * A unique identifier grouping one or more devices together. Two devices\n   * with the same group ID symbolise that both devices belong to the same\n   * hardware, e.g. a webcam with an integrated microphone. Note: Safari\n   * doesn't support group IDs.\n   */\n  groupId: null | string;\n\n  /**\n   * Declares the type of media provided. This covers microphones, cameras,\n   * and speakers.\n   */\n  kind: DeviceKind;\n}\n\nexport enum DeviceKind {\n  VideoInput = 'videoinput',\n  AudioInput = 'audioinput',\n  AudioOutput = 'audiooutput',\n}\n","import { getMediaDevicesApi } from './support-detection';\n\nexport default async function getUserMedia(\n  constraints: MediaStreamConstraints\n): Promise<MediaStream> {\n  return getMediaDevicesApi().getUserMedia(constraints);\n}\n","import enumerateDevices, { DeviceInfo } from './enumerate-devices';\nimport { getMediaDevicesApi, supportsMediaDevices } from './support-detection';\nimport getUserMedia from './get-user-media';\n\n/**\n * Monitors the set of devices for changes and calculates convenient diffs\n * between updates. Steps are taken to handle cross-browser quirks and\n * attempts graceful integration with browser fingerprinting countermeasures.\n */\nexport default class DeviceManager {\n  private _knownDevices: Array<DeviceInfo> = [];\n  private _gainedScreenAccessOnce = false;\n\n  /**\n   * Specifies a function to be called whenever the list of available devices\n   * changes.\n   *\n   * Note: this is different from the native event. It passes the changeset\n   * and full list of devices as a parameter.\n   */\n  ondevicechange: null | DeviceChangeListener = null;\n\n  constructor() {\n    // Listen for changes at the OS level. If the device list changes and\n    // someone's around to see it, refresh the device list. Refreshing has\n    // a side effect of performing a diff and telling all subscribers about\n    // the change.\n    if (supportsMediaDevices()) {\n      getMediaDevicesApi().addEventListener('devicechange', () => {\n        if (this.ondevicechange) {\n          return this.enumerateDevices();\n        }\n\n        return Promise.resolve();\n      });\n    }\n  }\n\n  /**\n   * Request a live media stream from audio and/or video devices. Streams are\n   * configurable through constraints.\n   * See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia\n   */\n  getUserMedia = async (constraints: MediaStreamConstraints) => {\n    const stream = await getUserMedia(constraints);\n\n    // The browser considers us trusted after the first approved GUM query and\n    // allows access to more information in the device list, which is an\n    // implicit device change event. Refresh to update the cache.\n    //\n    // We do this for every GUM request because some browsers only allow\n    // access to the subset of devices you've been approved for. While\n    // reasonable from a security perspective, it means we're never sure if\n    // the cache is stale.\n    this.enumerateDevices();\n\n    return stream;\n  };\n\n  /**\n   * Ask the user to share their screen. Resolves with a media stream carrying\n   * video, and potentially audio from the application window.\n   * See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia\n   */\n  getDisplayMedia = async (\n    constraints?: MediaStreamConstraints\n  ): Promise<MediaStream> => {\n    const stream = await getMediaDevicesApi().getDisplayMedia(constraints);\n\n    // Similar to `getUserMedia(...)`, granting access to your screen implies\n    // a certain level of trust. Some browsers will remove the fingerprinting\n    // protections after the first successful call. However, it's unlikely\n    // that another will tell us anything more, so we only refresh devices\n    // after the first success.\n    if (!this._gainedScreenAccessOnce) {\n      this._gainedScreenAccessOnce = true;\n      this.enumerateDevices();\n    }\n\n    return stream;\n  };\n\n  /**\n   * Lists every available hardware device, including microphones, cameras,\n   * and speakers (depending on browser support). May contain redacted\n   * information depending on application permissions.\n   */\n  enumerateDevices = async (): Promise<Array<DeviceInfo>> => {\n    const devices = await enumerateDevices();\n    this._checkForDeviceChanges(devices);\n\n    return devices;\n  };\n\n  /**\n   * Returns an object containing every media constraint supported by the\n   * browser.\n   * See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getSupportedConstraints\n   */\n  getSupportedConstraints = (): MediaTrackSupportedConstraints => {\n    return getMediaDevicesApi().getSupportedConstraints();\n  };\n\n  private _checkForDeviceChanges(newDevices: Array<DeviceInfo>) {\n    const oldDevices = this._knownDevices;\n    this._knownDevices = newDevices; // Replace the old devices.\n\n    const changes: Array<DeviceChange> = this._calculateDeviceDiff(\n      newDevices,\n      oldDevices\n    );\n\n    if (changes.length) {\n      this.ondevicechange?.({ changes, devices: newDevices });\n    }\n  }\n\n  /**\n   * Note: The device enumeration API may return null values for device IDs\n   * and labels. To avoid creating erroneous \"Device Added\" notifications,\n   * a best effort should be made to detect when devices are identical.\n   *\n   * Order is significant. Preferred devices are listed first, which helps\n   * correlate devices from permissioned requests with unpermissioned\n   * requests.\n   */\n  private _calculateDeviceDiff(\n    newDevices: Array<DeviceInfo>,\n    oldDevices: Array<DeviceInfo>\n  ): Array<DeviceChange> {\n    const removals = oldDevices.slice();\n    const updates: Array<DeviceChange> = [];\n\n    // If a \"new\" device exists in the list of old devices, then it obviously\n    // wasn't just added and clearly we haven't removed it either. It's the\n    // same device.\n    const additions = newDevices.filter((newDevice) => {\n      const oldDeviceIndex = removals.findIndex((oldDevice) => {\n        return isIdenticalDevice(newDevice, oldDevice);\n      });\n\n      // Note: Nasty state mutation hides here.\n      // Maps/Sets are out of the question due to poor TS support. Plus IDs\n      // are far too unreliable in this context. Iteration and splice() are\n      // ugly and gross, but they work.\n      if (oldDeviceIndex > -1) {\n        const [oldDevice] = removals.splice(oldDeviceIndex, 1);\n\n        if (newDevice.label !== oldDevice.label) {\n          const update: DeviceUpdateEvent = {\n            type: OperationType.Update,\n            newInfo: newDevice,\n            oldInfo: oldDevice,\n          };\n\n          updates.push(update);\n        }\n      }\n\n      // Only count it as an \"addition\" if we couldn't find the same device in\n      // the older set.\n      return oldDeviceIndex === -1;\n    });\n\n    return [\n      ...updates,\n\n      // A device was just removed.\n      ...removals.map((device) => {\n        return { type: OperationType.Remove, device } as DeviceRemoveEvent;\n      }),\n\n      // A device was just plugged in.\n      ...additions.map((device) => {\n        return { type: OperationType.Add, device } as DeviceAddEvent;\n      }),\n    ];\n  }\n}\n\n/**\n * Due to fingerprinting countermeasures, the device ID might be an empty\n * string. We have to resort to vague comparisons. After the first successful\n * `getUserMedia(...)` query, the device ID for all related device kinds\n * should be revealed. In that case the new device will have an ID but the old\n * device won't. It should be safe to assume the inverse never happens.\n *\n * Note: Chromium browsers take a private stance by hiding your extra devices.\n * Even if you have a hundred cameras plugged in, until that first GUM query,\n * you'll only see the preferred one. Same for microphones and output devices.\n */\nfunction isIdenticalDevice(newDevice: DeviceInfo, oldDevice: DeviceInfo) {\n  if (oldDevice.deviceId) {\n    return newDevice.deviceId === oldDevice.deviceId;\n  }\n\n  // These are the only credible fields we have to go on. It may yield a false\n  // positive if you're changing devices before the first GUM query, but since\n  // the lists are ordered by priority, that should be unlikely. It's\n  // certainly preferable to \"new device\" false positives.\n  function toCrudeId(device: DeviceInfo) {\n    return `${device.kind}:${device.groupId}`;\n  }\n\n  return toCrudeId(newDevice) === toCrudeId(oldDevice);\n}\n\nexport type DeviceChange =\n  | DeviceAddEvent\n  | DeviceRemoveEvent\n  | DeviceUpdateEvent;\n\ninterface DeviceAddEvent {\n  type: OperationType.Add;\n  device: DeviceInfo;\n}\n\ninterface DeviceRemoveEvent {\n  type: OperationType.Remove;\n  device: DeviceInfo;\n}\n\ninterface DeviceUpdateEvent {\n  type: OperationType.Update;\n  newInfo: DeviceInfo;\n  oldInfo: DeviceInfo;\n}\n\nexport enum OperationType {\n  Add = 'add',\n  Remove = 'remove',\n  Update = 'update',\n}\n\ninterface DeviceChangeListener {\n  (update: {\n    changes: Array<DeviceChange>;\n    devices: Array<DeviceInfo>;\n  }): unknown;\n}\n","import DeviceManager from './device-manager';\n\nexport { supportsMediaDevices } from './support-detection';\nexport { DeviceKind } from './enumerate-devices';\nexport { OperationType } from './device-manager';\n\nexport type { DeviceInfo } from './enumerate-devices';\nexport type { DeviceChange } from './device-manager';\n\nexport default new DeviceManager();\n"],"names":[],"mappings":"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"}

package/dist/media-devices.umd.d.ts

@@ -0,0 +1,2 @@
+export * from "../src/index"
+export {default} from "../src/index"

package/dist/media-devices.umd.js

@@ -0,0 +1,2 @@
+(function(t,i){typeof exports=="object"&&typeof module!="undefined"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(t=typeof globalThis!="undefined"?globalThis:t||self,i(t["media-devices"]={}))})(this,function(t){"use strict";var A=Object.defineProperty;var k=(t,i,s)=>i in t?A(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s;var a=(t,i,s)=>(k(t,typeof i!="symbol"?i+"":i,s),s);function i(){return typeof navigator!="undefined"&&!!navigator.mediaDevices}function s(){if(!i())throw new Error("The media devices API isn't supported here.");return navigator.mediaDevices}async function p(){return(await s().enumerateDevices()).filter(h).map(g)}function h(e){return e.deviceId!=="default"}function g(e){return{label:e.label||null,kind:e.kind,deviceId:e.deviceId||null,groupId:e.groupId||null}}var f=(e=>(e.VideoInput="videoinput",e.AudioInput="audioinput",e.AudioOutput="audiooutput",e))(f||{});async function m(e){return s().getUserMedia(e)}class D{constructor(){a(this,"_knownDevices",[]);a(this,"_gainedScreenAccessOnce",!1);a(this,"ondevicechange",null);a(this,"getUserMedia",async n=>{const r=await m(n);return this.enumerateDevices(),r});a(this,"getDisplayMedia",async n=>{const r=await s().getDisplayMedia(n);return this._gainedScreenAccessOnce||(this._gainedScreenAccessOnce=!0,this.enumerateDevices()),r});a(this,"enumerateDevices",async()=>{const n=await p();return this._checkForDeviceChanges(n),n});a(this,"getSupportedConstraints",()=>s().getSupportedConstraints());i()&&s().addEventListener("devicechange",()=>this.ondevicechange?this.enumerateDevices():Promise.resolve())}_checkForDeviceChanges(n){var o;const r=this._knownDevices;this._knownDevices=n;const c=this._calculateDeviceDiff(n,r);c.length&&((o=this.ondevicechange)==null||o.call(this,{changes:c,devices:n}))}_calculateDeviceDiff(n,r){const c=r.slice(),o=[],_=n.filter(d=>{const v=c.findIndex(l=>I(d,l));if(v>-1){const[l]=c.splice(v,1);if(d.label!==l.label){const M={type:u.Update,newInfo:d,oldInfo:l};o.push(M)}}return v===-1});return[...o,...c.map(d=>({type:u.Remove,device:d})),..._.map(d=>({type:u.Add,device:d}))]}}function I(e,n){if(n.deviceId)return e.deviceId===n.deviceId;function r(c){return`${c.kind}:${c.groupId}`}return r(e)===r(n)}var u=(e=>(e.Add="add",e.Remove="remove",e.Update="update",e))(u||{}),y=new D;t.DeviceKind=f,t.OperationType=u,t.default=y,t.supportsMediaDevices=i,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+//# sourceMappingURL=media-devices.umd.js.map

package/dist/media-devices.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-devices.umd.js","sources":["../src/support-detection.ts","../src/enumerate-devices.ts","../src/get-user-media.ts","../src/device-manager.ts","../src/index.ts"],"sourcesContent":["/**\n * Not all browsers support media devices, and some restrict access for\n * insecure sites and private contexts. This is often reflected by removing\n * the `mediaDevices` API entirely.\n */\nexport function supportsMediaDevices() {\n  return typeof navigator !== 'undefined' && !!navigator.mediaDevices;\n}\n\nexport function getMediaDevicesApi() {\n  if (!supportsMediaDevices()) {\n    throw new Error(`The media devices API isn't supported here.`);\n  }\n\n  return navigator.mediaDevices;\n}\n","import { getMediaDevicesApi } from './support-detection';\n\n/**\n * A normalization layer over `MediaDevices.enumerateDevices()`:\n * https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo\n *\n * The API is fraught with cross-browser quirks and fingerprinting blocks.\n * This interface seeks to normalize some of those quirks and make the\n * security tradeoffs obvious.\n */\nexport default async function enumerateDevices(): Promise<Array<DeviceInfo>> {\n  const devices = await getMediaDevicesApi().enumerateDevices();\n  return devices.filter(isPhysicalDevice).map(normalizeDeviceInfo);\n}\n\n/**\n * Chromium does this really annoying thing where it duplicates preferred\n * devices by substituting the ID with \"default\". No other browser does this,\n * and preferred devices are already represented by list order.\n *\n * Since those meta-devices don't add relevant information and risk confusing\n * device UIs, I simply remove them.\n */\nfunction isPhysicalDevice(device: MediaDeviceInfo) {\n  return device.deviceId !== 'default';\n}\n\n// Make nullable fields explicit.\nfunction normalizeDeviceInfo(device: MediaDeviceInfo): DeviceInfo {\n  return {\n    label: device.label || null,\n    kind: device.kind as DeviceKind,\n    deviceId: device.deviceId || null,\n    groupId: device.groupId || null,\n  };\n}\n\nexport interface DeviceInfo {\n  /**\n   * The device list is obfuscated until you gain elevated permissions.\n   * Browsers will use an empty string for the device label until the first\n   * successful `getUserMedia(...)` request.\n   */\n  label: null | string;\n\n  /**\n   * A unique identifier persistent across sessions. Note: In Chromium\n   * browsers, this can be unset if you haven't received permission for the\n   * media resource yet.\n   */\n  deviceId: null | string;\n\n  /**\n   * A unique identifier grouping one or more devices together. Two devices\n   * with the same group ID symbolise that both devices belong to the same\n   * hardware, e.g. a webcam with an integrated microphone. Note: Safari\n   * doesn't support group IDs.\n   */\n  groupId: null | string;\n\n  /**\n   * Declares the type of media provided. This covers microphones, cameras,\n   * and speakers.\n   */\n  kind: DeviceKind;\n}\n\nexport enum DeviceKind {\n  VideoInput = 'videoinput',\n  AudioInput = 'audioinput',\n  AudioOutput = 'audiooutput',\n}\n","import { getMediaDevicesApi } from './support-detection';\n\nexport default async function getUserMedia(\n  constraints: MediaStreamConstraints\n): Promise<MediaStream> {\n  return getMediaDevicesApi().getUserMedia(constraints);\n}\n","import enumerateDevices, { DeviceInfo } from './enumerate-devices';\nimport { getMediaDevicesApi, supportsMediaDevices } from './support-detection';\nimport getUserMedia from './get-user-media';\n\n/**\n * Monitors the set of devices for changes and calculates convenient diffs\n * between updates. Steps are taken to handle cross-browser quirks and\n * attempts graceful integration with browser fingerprinting countermeasures.\n */\nexport default class DeviceManager {\n  private _knownDevices: Array<DeviceInfo> = [];\n  private _gainedScreenAccessOnce = false;\n\n  /**\n   * Specifies a function to be called whenever the list of available devices\n   * changes.\n   *\n   * Note: this is different from the native event. It passes the changeset\n   * and full list of devices as a parameter.\n   */\n  ondevicechange: null | DeviceChangeListener = null;\n\n  constructor() {\n    // Listen for changes at the OS level. If the device list changes and\n    // someone's around to see it, refresh the device list. Refreshing has\n    // a side effect of performing a diff and telling all subscribers about\n    // the change.\n    if (supportsMediaDevices()) {\n      getMediaDevicesApi().addEventListener('devicechange', () => {\n        if (this.ondevicechange) {\n          return this.enumerateDevices();\n        }\n\n        return Promise.resolve();\n      });\n    }\n  }\n\n  /**\n   * Request a live media stream from audio and/or video devices. Streams are\n   * configurable through constraints.\n   * See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia\n   */\n  getUserMedia = async (constraints: MediaStreamConstraints) => {\n    const stream = await getUserMedia(constraints);\n\n    // The browser considers us trusted after the first approved GUM query and\n    // allows access to more information in the device list, which is an\n    // implicit device change event. Refresh to update the cache.\n    //\n    // We do this for every GUM request because some browsers only allow\n    // access to the subset of devices you've been approved for. While\n    // reasonable from a security perspective, it means we're never sure if\n    // the cache is stale.\n    this.enumerateDevices();\n\n    return stream;\n  };\n\n  /**\n   * Ask the user to share their screen. Resolves with a media stream carrying\n   * video, and potentially audio from the application window.\n   * See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia\n   */\n  getDisplayMedia = async (\n    constraints?: MediaStreamConstraints\n  ): Promise<MediaStream> => {\n    const stream = await getMediaDevicesApi().getDisplayMedia(constraints);\n\n    // Similar to `getUserMedia(...)`, granting access to your screen implies\n    // a certain level of trust. Some browsers will remove the fingerprinting\n    // protections after the first successful call. However, it's unlikely\n    // that another will tell us anything more, so we only refresh devices\n    // after the first success.\n    if (!this._gainedScreenAccessOnce) {\n      this._gainedScreenAccessOnce = true;\n      this.enumerateDevices();\n    }\n\n    return stream;\n  };\n\n  /**\n   * Lists every available hardware device, including microphones, cameras,\n   * and speakers (depending on browser support). May contain redacted\n   * information depending on application permissions.\n   */\n  enumerateDevices = async (): Promise<Array<DeviceInfo>> => {\n    const devices = await enumerateDevices();\n    this._checkForDeviceChanges(devices);\n\n    return devices;\n  };\n\n  /**\n   * Returns an object containing every media constraint supported by the\n   * browser.\n   * See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getSupportedConstraints\n   */\n  getSupportedConstraints = (): MediaTrackSupportedConstraints => {\n    return getMediaDevicesApi().getSupportedConstraints();\n  };\n\n  private _checkForDeviceChanges(newDevices: Array<DeviceInfo>) {\n    const oldDevices = this._knownDevices;\n    this._knownDevices = newDevices; // Replace the old devices.\n\n    const changes: Array<DeviceChange> = this._calculateDeviceDiff(\n      newDevices,\n      oldDevices\n    );\n\n    if (changes.length) {\n      this.ondevicechange?.({ changes, devices: newDevices });\n    }\n  }\n\n  /**\n   * Note: The device enumeration API may return null values for device IDs\n   * and labels. To avoid creating erroneous \"Device Added\" notifications,\n   * a best effort should be made to detect when devices are identical.\n   *\n   * Order is significant. Preferred devices are listed first, which helps\n   * correlate devices from permissioned requests with unpermissioned\n   * requests.\n   */\n  private _calculateDeviceDiff(\n    newDevices: Array<DeviceInfo>,\n    oldDevices: Array<DeviceInfo>\n  ): Array<DeviceChange> {\n    const removals = oldDevices.slice();\n    const updates: Array<DeviceChange> = [];\n\n    // If a \"new\" device exists in the list of old devices, then it obviously\n    // wasn't just added and clearly we haven't removed it either. It's the\n    // same device.\n    const additions = newDevices.filter((newDevice) => {\n      const oldDeviceIndex = removals.findIndex((oldDevice) => {\n        return isIdenticalDevice(newDevice, oldDevice);\n      });\n\n      // Note: Nasty state mutation hides here.\n      // Maps/Sets are out of the question due to poor TS support. Plus IDs\n      // are far too unreliable in this context. Iteration and splice() are\n      // ugly and gross, but they work.\n      if (oldDeviceIndex > -1) {\n        const [oldDevice] = removals.splice(oldDeviceIndex, 1);\n\n        if (newDevice.label !== oldDevice.label) {\n          const update: DeviceUpdateEvent = {\n            type: OperationType.Update,\n            newInfo: newDevice,\n            oldInfo: oldDevice,\n          };\n\n          updates.push(update);\n        }\n      }\n\n      // Only count it as an \"addition\" if we couldn't find the same device in\n      // the older set.\n      return oldDeviceIndex === -1;\n    });\n\n    return [\n      ...updates,\n\n      // A device was just removed.\n      ...removals.map((device) => {\n        return { type: OperationType.Remove, device } as DeviceRemoveEvent;\n      }),\n\n      // A device was just plugged in.\n      ...additions.map((device) => {\n        return { type: OperationType.Add, device } as DeviceAddEvent;\n      }),\n    ];\n  }\n}\n\n/**\n * Due to fingerprinting countermeasures, the device ID might be an empty\n * string. We have to resort to vague comparisons. After the first successful\n * `getUserMedia(...)` query, the device ID for all related device kinds\n * should be revealed. In that case the new device will have an ID but the old\n * device won't. It should be safe to assume the inverse never happens.\n *\n * Note: Chromium browsers take a private stance by hiding your extra devices.\n * Even if you have a hundred cameras plugged in, until that first GUM query,\n * you'll only see the preferred one. Same for microphones and output devices.\n */\nfunction isIdenticalDevice(newDevice: DeviceInfo, oldDevice: DeviceInfo) {\n  if (oldDevice.deviceId) {\n    return newDevice.deviceId === oldDevice.deviceId;\n  }\n\n  // These are the only credible fields we have to go on. It may yield a false\n  // positive if you're changing devices before the first GUM query, but since\n  // the lists are ordered by priority, that should be unlikely. It's\n  // certainly preferable to \"new device\" false positives.\n  function toCrudeId(device: DeviceInfo) {\n    return `${device.kind}:${device.groupId}`;\n  }\n\n  return toCrudeId(newDevice) === toCrudeId(oldDevice);\n}\n\nexport type DeviceChange =\n  | DeviceAddEvent\n  | DeviceRemoveEvent\n  | DeviceUpdateEvent;\n\ninterface DeviceAddEvent {\n  type: OperationType.Add;\n  device: DeviceInfo;\n}\n\ninterface DeviceRemoveEvent {\n  type: OperationType.Remove;\n  device: DeviceInfo;\n}\n\ninterface DeviceUpdateEvent {\n  type: OperationType.Update;\n  newInfo: DeviceInfo;\n  oldInfo: DeviceInfo;\n}\n\nexport enum OperationType {\n  Add = 'add',\n  Remove = 'remove',\n  Update = 'update',\n}\n\ninterface DeviceChangeListener {\n  (update: {\n    changes: Array<DeviceChange>;\n    devices: Array<DeviceInfo>;\n  }): unknown;\n}\n","import DeviceManager from './device-manager';\n\nexport { supportsMediaDevices } from './support-detection';\nexport { DeviceKind } from './enumerate-devices';\nexport { OperationType } from './device-manager';\n\nexport type { DeviceInfo } from './enumerate-devices';\nexport type { DeviceChange } from './device-manager';\n\nexport default new DeviceManager();\n"],"names":[],"mappings":"kaAKuC,YAAA,CACrC,MAAO,OAAO,YAAc,aAAe,CAAC,CAAC,UAAU,YACzD,CAEqC,YAAA,CAC/B,GAAA,CAAC,IACG,KAAA,IAAI,OAAM,6CAA6C,EAG/D,MAAO,WAAU,YACnB,CCL6E,kBAAA,CAE3E,MAAO,AADS,MAAM,GAAmB,EAAE,iBAAiB,GAC7C,OAAO,CAAgB,EAAE,IAAI,CAAmB,CACjE,CAUA,WAA0B,EAAyB,CACjD,MAAO,GAAO,WAAa,SAC7B,CAGA,WAA6B,EAAqC,CACzD,MAAA,CACL,MAAO,EAAO,OAAS,KACvB,KAAM,EAAO,KACb,SAAU,EAAO,UAAY,KAC7B,QAAS,EAAO,SAAW,IAAA,CAE/B,CAgCY,GAAA,IAAA,GACG,GAAA,WAAA,aACA,EAAA,WAAA,aACC,EAAA,YAAA,cAHJ,IAAA,GAAA,CAAA,CAAA,ECjEZ,iBACE,EACsB,CACf,MAAA,GAAqB,EAAA,aAAa,CAAW,CACtD,CCGA,MAAqB,CAAc,CAajC,aAAc,CAZN,uBAAmC,CAAA,GAC3C,iCAAkC,IASlC,wBAA8C,MAuB9C,sBAAe,KAAO,IAAwC,CACtD,KAAA,GAAS,KAAM,GAAa,CAAW,EAU7C,YAAK,iBAAiB,EAEf,CAAA,GAQT,yBAAkB,KAChB,IACyB,CACzB,KAAM,GAAS,KAAM,GAAmB,EAAE,gBAAgB,CAAW,EAOjE,MAAC,MAAK,yBACR,MAAK,wBAA0B,GAC/B,KAAK,iBAAiB,GAGjB,CAAA,GAQT,0BAAmB,SAAwC,CACnD,KAAA,GAAU,KAAM,KACtB,YAAK,uBAAuB,CAAO,EAE5B,CAAA,GAQT,iCAA0B,IACjB,EAAA,EAAqB,2BAzE5B,AAAI,KACiB,EAAA,EAAE,iBAAiB,eAAgB,IAChD,KAAK,eACA,KAAK,mBAGP,QAAQ,SAChB,CAEL,CAmEQ,uBAAuB,EAA+B,OAC5D,KAAM,GAAa,KAAK,cACxB,KAAK,cAAgB,EAErB,KAAM,GAA+B,KAAK,qBACxC,EACA,CACF,EAEA,AAAI,EAAQ,QACV,SAAK,iBAAL,kBAAsB,CAAE,UAAS,QAAS,CAAY,GAE1D,CAWQ,qBACN,EACA,EACqB,CACf,KAAA,GAAW,EAAW,QACtB,EAA+B,CAAA,EAK/B,EAAY,EAAW,OAAO,AAAC,GAAc,CACjD,KAAM,GAAiB,EAAS,UAAU,AAAC,GAClC,EAAkB,EAAW,CAAS,CAC9C,EAMD,GAAI,EAAiB,GAAI,CACvB,KAAM,CAAC,GAAa,EAAS,OAAO,EAAgB,CAAC,EAEjD,GAAA,EAAU,QAAU,EAAU,MAAO,CACvC,KAAM,GAA4B,CAChC,KAAM,EAAc,OACpB,QAAS,EACT,QAAS,CAAA,EAGX,EAAQ,KAAK,CAAM,CACrB,CACF,CAIA,MAAO,KAAmB,EAAA,CAC3B,EAEM,MAAA,CACL,GAAG,EAGH,GAAG,EAAS,IAAI,AAAC,GACR,EAAE,KAAM,EAAc,OAAQ,QAAO,EAC7C,EAGD,GAAG,EAAU,IAAI,AAAC,GACT,EAAE,KAAM,EAAc,IAAK,QAAO,EAC1C,CAAA,CAEL,CACF,CAaA,WAA2B,EAAuB,EAAuB,CACvE,GAAI,EAAU,SACL,MAAA,GAAU,WAAa,EAAU,SAO1C,WAAmB,EAAoB,CAC9B,MAAA,GAAG,EAAO,QAAQ,EAAO,SAClC,CAEA,MAAO,GAAU,CAAS,IAAM,EAAU,CAAS,CACrD,CAuBY,GAAA,IAAA,GACJ,GAAA,IAAA,MACG,EAAA,OAAA,SACA,EAAA,OAAA,SAHC,IAAA,GAAA,CAAA,CAAA,EC3NG,EAAA,GAAI"}

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "media-devices",
   "description": "Easily manage media devices in the browser.",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "author": "Jesse Gibson <JesseTheGibson@gmail.com>",
   "repository": "github:PsychoLlama/media-devices",
   "homepage": "https://github.com/PsychoLlama/media-devices#readme",
-  "module": "dist/media-devices.esm.js",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "module": "./dist/media-devices.es.js",
+  "main": "./dist/media-devices.umd.js",
+  "exports": {
+    ".": {
+      "require": "./dist/media-devices.umd.js",
+      "import": "./dist/media-devices.es.js"
+    }
+  },
   "files": [
     "dist",
     "src"
@@ -21,48 +26,74 @@
     "mediadevices"
   ],
   "scripts": {
-    "start": "dts watch",
-    "build": "dts build",
+    "prepare": "vite build --sourcemap",
     "test": "./bin/run-tests",
-    "test:unit": "dts test",
-    "test:lint": "dts lint src",
-    "prepare": "dts build",
-    "size": "size-limit",
-    "analyze": "size-limit --why"
+    "test:unit": "jest --color",
+    "test:lint": "eslint src --ext ts --color",
+    "test:fmt": "prettier --check src"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "dts lint src"
+      "pre-commit": "lint-staged"
     }
   },
+  "lint-staged": {
+    "*.tsx?": [
+      "eslint",
+      "prettier --check"
+    ]
+  },
   "prettier": {
-    "printWidth": 80,
-    "semi": true,
     "singleQuote": true,
     "trailingComma": "es5"
   },
   "jest": {
+    "preset": "ts-jest",
     "testEnvironment": "jsdom",
     "setupFiles": [
       "<rootDir>/src/test-utils/index.ts"
     ]
   },
-  "size-limit": [
-    {
-      "path": "dist/media-devices.cjs.production.min.js",
-      "limit": "10 KB"
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "sourceType": "module"
     },
-    {
-      "path": "dist/media-devices.esm.js",
-      "limit": "10 KB"
+    "overrides": [
+      {
+        "files": [
+          "./**/__tests__/*.ts{x,}"
+        ],
+        "env": {
+          "jest": true
+        },
+        "rules": {
+          "@typescript-eslint/no-explicit-any": "off"
+        }
+      }
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+      "@typescript-eslint/no-use-before-define": "off"
     }
-  ],
+  },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "7.0.3",
-    "dts-cli": "0.20.0",
-    "husky": "7.0.4",
-    "size-limit": "7.0.3",
-    "tslib": "2.3.1",
-    "typescript": "4.5.2"
+    "@types/jest": "27.5.1",
+    "@typescript-eslint/eslint-plugin": "5.27.0",
+    "@typescript-eslint/parser": "5.27.0",
+    "eslint": "8.16.0",
+    "husky": "8.0.1",
+    "jest": "28.1.0",
+    "jest-environment-jsdom": "28.1.0",
+    "lint-staged": "12.4.3",
+    "prettier": "2.6.2",
+    "size-limit": "7.0.8",
+    "ts-jest": "28.0.3",
+    "typescript": "4.7.2",
+    "vite": "2.9.9",
+    "vite-dts": "1.0.4"
   }
 }

package/src/__tests__/device-manager.test.ts

@@ -177,21 +177,6 @@ describe('DeviceManager', () => {
     expect(getMediaDevicesApi().enumerateDevices).not.toHaveBeenCalled();
   });
 
-  it('supports deprecated listeners on change events', async () => {
-    const devices = new DeviceManager();
-    const handler = jest.fn();
-    devices.on('devicechange', handler);
-
-    setDeviceList([{ label: 'Drone' }]);
-    const [listener] = (getMediaDevicesApi() as any).listeners('devicechange');
-    await listener();
-
-    expect(handler).toHaveBeenCalledWith(
-      [expect.objectContaining({ type: OperationType.Add })],
-      expect.any(Array)
-    );
-  });
-
   it('refreshes the device list after a successful GUM query', async () => {
     setDeviceList([{ label: '' }]);
     const { devices } = setup();

package/src/device-manager.ts

@@ -1,4 +1,3 @@
-import EventEmitter from 'events';
 import enumerateDevices, { DeviceInfo } from './enumerate-devices';
 import { getMediaDevicesApi, supportsMediaDevices } from './support-detection';
 import getUserMedia from './get-user-media';
@@ -8,7 +7,7 @@ import getUserMedia from './get-user-media';
  * between updates. Steps are taken to handle cross-browser quirks and
  * attempts graceful integration with browser fingerprinting countermeasures.
  */
-export default class DeviceManager extends EventEmitter {
+export default class DeviceManager {
   private _knownDevices: Array<DeviceInfo> = [];
   private _gainedScreenAccessOnce = false;
 
@@ -22,15 +21,13 @@ export default class DeviceManager extends EventEmitter {
   ondevicechange: null | DeviceChangeListener = null;
 
   constructor() {
-    super();
-
     // Listen for changes at the OS level. If the device list changes and
     // someone's around to see it, refresh the device list. Refreshing has
     // a side effect of performing a diff and telling all subscribers about
     // the change.
     if (supportsMediaDevices()) {
       getMediaDevicesApi().addEventListener('devicechange', () => {
-        if (this.listenerCount('devicechange') || this.ondevicechange) {
+        if (this.ondevicechange) {
           return this.enumerateDevices();
         }
 
@@ -114,7 +111,6 @@ export default class DeviceManager extends EventEmitter {
     );
 
     if (changes.length) {
-      this.emit('devicechange', changes, newDevices);
       this.ondevicechange?.({ changes, devices: newDevices });
     }
   }

package/src/index.ts

@@ -1,7 +1,10 @@
 import DeviceManager from './device-manager';
 
 export { supportsMediaDevices } from './support-detection';
-export { DeviceInfo, DeviceKind } from './enumerate-devices';
-export { OperationType, DeviceChange } from './device-manager';
+export { DeviceKind } from './enumerate-devices';
+export { OperationType } from './device-manager';
+
+export type { DeviceInfo } from './enumerate-devices';
+export type { DeviceChange } from './device-manager';
 
 export default new DeviceManager();

package/src/test-utils/mocks.ts

@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 import EventEmitter from 'events';
 
 export class MockMediaDeviceInfo implements MediaDeviceInfo {

package/dist/device-manager.d.ts

@@ -1,82 +0,0 @@
-/// <reference types="node" />
-import EventEmitter from 'events';
-import { DeviceInfo } from './enumerate-devices';
-/**
- * Monitors the set of devices for changes and calculates convenient diffs
- * between updates. Steps are taken to handle cross-browser quirks and
- * attempts graceful integration with browser fingerprinting countermeasures.
- */
-export default class DeviceManager extends EventEmitter {
-    private _knownDevices;
-    private _gainedScreenAccessOnce;
-    /**
-     * Specifies a function to be called whenever the list of available devices
-     * changes.
-     *
-     * Note: this is different from the native event. It passes the changeset
-     * and full list of devices as a parameter.
-     */
-    ondevicechange: null | DeviceChangeListener;
-    constructor();
-    /**
-     * Request a live media stream from audio and/or video devices. Streams are
-     * configurable through constraints.
-     * See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
-     */
-    getUserMedia: (constraints: MediaStreamConstraints) => Promise<MediaStream>;
-    /**
-     * Ask the user to share their screen. Resolves with a media stream carrying
-     * video, and potentially audio from the application window.
-     * See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
-     */
-    getDisplayMedia: (constraints?: MediaStreamConstraints | undefined) => Promise<MediaStream>;
-    /**
-     * Lists every available hardware device, including microphones, cameras,
-     * and speakers (depending on browser support). May contain redacted
-     * information depending on application permissions.
-     */
-    enumerateDevices: () => Promise<Array<DeviceInfo>>;
-    /**
-     * Returns an object containing every media constraint supported by the
-     * browser.
-     * See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getSupportedConstraints
-     */
-    getSupportedConstraints: () => MediaTrackSupportedConstraints;
-    private _checkForDeviceChanges;
-    /**
-     * Note: The device enumeration API may return null values for device IDs
-     * and labels. To avoid creating erroneous "Device Added" notifications,
-     * a best effort should be made to detect when devices are identical.
-     *
-     * Order is significant. Preferred devices are listed first, which helps
-     * correlate devices from permissioned requests with unpermissioned
-     * requests.
-     */
-    private _calculateDeviceDiff;
-}
-export declare type DeviceChange = DeviceAddEvent | DeviceRemoveEvent | DeviceUpdateEvent;
-interface DeviceAddEvent {
-    type: OperationType.Add;
-    device: DeviceInfo;
-}
-interface DeviceRemoveEvent {
-    type: OperationType.Remove;
-    device: DeviceInfo;
-}
-interface DeviceUpdateEvent {
-    type: OperationType.Update;
-    newInfo: DeviceInfo;
-    oldInfo: DeviceInfo;
-}
-export declare enum OperationType {
-    Add = "add",
-    Remove = "remove",
-    Update = "update"
-}
-interface DeviceChangeListener {
-    (update: {
-        changes: Array<DeviceChange>;
-        devices: Array<DeviceInfo>;
-    }): unknown;
-}
-export {};