react-user-media

A collection of hooks and components for easier access to getUserMedia, getDisplayMedia, and enumerateDevices in React.

Requirements

• Consumers: React 19+ (peerDependencies: react >= 19) and a secure context / modern browser APIs for getUserMedia, getDisplayMedia, and enumerateDevices
• Contributing to this package: Node.js 22.12+ (toolchain / CI for this monorepo; required by Vite 7)

Hooks

• useMedia('user')

• useMedia('display')

• useMediaTracks(...)

  • useMediaAudioTracks(...)
  • useMediaVideoTracks(...)
  • useTrackMuteState(...)

• useMediaDevices()

  • useMediaAudioInputDevices()
  • useMediaAudioOutputDevices()
  • useMediaVideoDevices()

• useMediaRecorder()

Components

• AudioPlayer
• VideoPlayer

Utility functions

• getSupportedConstraints()
• closeMedia(...)

Contributing

Please feel free to open any issues or PRs!

Building locally

This project uses pnpm for dependency management. Local development requires Node.js 22.12+ (Vite 7) and React 19 for the workspace packages.

Toolchain:

• Lint / format: Biome (pnpm lint, pnpm format)
• Tests: Vitest 3 with Playwright browser mode
• Examples / bundling: Vite 7

Then just pnpm run:

• build - builds the project
• dev - starts hosting the examples for local development
• test - runs tests
• lint - runs Biome checks
• format - applies Biome formatting fixes

License

Dual-licensed under Apache 2.0 + MIT.