use-user-media-hook

A React hook for accessing user audio and video devices via the MediaStream API. Resource cleanup is handled automatically on unmount. This hook requires no additional dependencies.

Installation

npm install use-user-media-hook

Usage

import { useUserMedia } from 'use-user-media-hook';

function VideoApp() {
  const {
    stream,
    mediaAvailable,
    isLoading,
    error,
    getUserMediaStream,
    stopUserMediaStream,
  } = useUserMedia();

  return (
    <div>
      <button onClick={() => getUserMediaStream({ audio: true, video: true })}>
        Start Stream
      </button>
      <button onClick={stopUserMediaStream}>Stop Stream</button>
      {error && <p>Error: {error.message}</p>}
      {isLoading && <p>Loading...</p>}
    </div>
  );
}

API

useUserMedia(): UseUserMediaReturn

Returns an object with the following properties:

• stream: MediaStream | null - The active media stream
• mediaAvailable: boolean - Whether media devices are available
• isLoading: boolean - Loading state while requesting permissions
• error: Error | null - Any errors that occurred
• hasAudio: boolean - Whether audio tracks are present
• hasVideo: boolean - Whether video tracks are present
• isAudioEnabled: boolean - Whether audio is currently enabled
• isVideoEnabled: boolean - Whether video is currently enabled
• getUserMediaStream(constraints?: MediaStreamConstraints): Promise<void> - Request media stream, defaults to request 1080p video and audio if no constraints are provided
• stopUserMediaStream(): void - Stop and release the media stream
• setAudioState(enabled: boolean): void - Toggle audio tracks
• setVideoState(enabled: boolean): void - Toggle video tracks

More details on constraints that can be passed can be found here

Development

Build

npm run build

Lint

npm run lint
npm run lint:fix

Format

npm run format

Testing

npm run test

CI/CD

This project uses GitHub Actions for continuous integration and automated releases:

• CI Workflow (.github/workflows/ci.yml): Runs linting and builds on pull requests and pushes to main and develop branches
• Release Workflow (.github/workflows/release.yml): Automatically publishes releases to npm using semantic-release

Release Process

Releases are automatically managed by semantic-release based on commit messages:

• feat: - Minor version bump (features)
• fix: - Patch version bump (bug fixes)
• BREAKING CHANGE: - Major version bump

License

MIT