mediadevices

Enumerate media devices and request camera/microphone access via the MediaDevices API.

Import: @rtorcato/browser-common/mediadevices

📖 MDN: MediaDevices · 📊 caniuse: stream

getUserMedia needs a secure context (HTTPS/localhost) and prompts for permission.

Browser support

API	Chrome	Edge	Firefox	Safari	iOS Safari	Baseline
MediaDevices.getUserMedia	✅ 53+ [1]	✅ 12+	✅ 36+ [2,3,4,5]	✅ 11+	✅ 11+	Widely available
MediaDevices.enumerateDevices	✅ 47+	✅ 12+	✅ 116+ [6,7]	✅ 11+	✅ 11+	Widely available

1. Chrome: If you need this capability before version 53, refer to navigator.webkitGetUserMedia, a prefixed form of the deprecated navigator.getUserMedia API.
2. Firefox: If you need this capability before version 36, refer to navigator.mozGetUserMedia, a prefixed form of the deprecated navigator.getUserMedia API.
3. Firefox: Before Firefox 55, getUserMedia() incorrectly returns NotSupportedError when the list of constraints specified is empty, or has all constraints set to false. Starting in Firefox 55, this situation now correctly calls the failure handler with a TypeError.
4. Firefox: When using the Firefox-specific video constraint called mediaSource to request display capture, Firefox 66 and later consider values of screen and window to both cause a list of screens and windows to be shown.
5. Firefox: Starting in Firefox 66, getUserMedia() can no longer be used in sandboxed <iframe>s or data URLs entered in the address bar by the user.
6. Firefox: enumerateDevices() enumerates both input and output devices. Previously only input devices were returned.
7. Firefox: The promise returned by enumerateDevices() only resolves when the document has focus. See bug 1818588.

Needs: secure context (HTTPS)

✅ supported · ◐ partial · ❌ not supported · [n] see note. Generated from MDN browser-compat-data and web-features. caniuse: MediaDevices.getUserMedia · MediaDevices.enumerateDevices

Example

import {
  isMediaDevicesAvailable,
  getMediaDevices,
  getUserMedia,
  stopMediaStream,
} from '@rtorcato/browser-common/mediadevices'

if (isMediaDevicesAvailable()) {
  const devices = await getMediaDevices()
  const cams = devices.filter((d) => d.kind === 'videoinput')

  const stream = await getUserMedia({ video: true, audio: true })
  // ... use stream
  stopMediaStream(stream)
}

Exports

• isMediaDevicesAvailable() — feature check
• getMediaDevices() — lists available input/output devices
• getUserMedia(constraints) — requests camera/microphone access, returns a MediaStream
• stopMediaStream(stream) — stops all tracks in a MediaStream
• getMediaPermissionStatus(name) — checks 'camera' or 'microphone' permission status

See the API reference for full signatures.