Use Media Stream

use-media-stream is a powerful React hook designed to streamline the integration and management of media streams within your React applications. It offers a comprehensive set of features and options for effortless control and manipulation of media streams. It provides a convenient interface for handling media devices, initiating media streams, and controlling audio and video tracks.

Demo - Link

Installation

Install the hook using your preferred package manager:

npm install use-media-stream
or
yarn add use-media-stream

Usage

Import the hook into your React component and leverage its capabilities to manage your media streams:

import useMediaStream from 'use-media-stream';

function MyComponent() {
  const {
    stream,
    isSupported,
    isStreaming,
    isAudioMuted,
    isVideoMuted,
    // ... other properties and handlers
  } = useMediaStream();

  // ... your component logic
}

Props Values

| Prop | Type | Description | | ------------------------ | -------------------------------- | -------------------------------------------------------------------- | | mediaDeviceConstraints | MediaStreamConstraints \| null | The constraints for the media device to be used in the media stream. |

Return Values

| Property | Type | Description | | ------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | stream | MediaStream \| null | The current media stream object. | | isStreaming | boolean | Indicates whether the media stream is currently active. | | isAudioMuted | boolean | Indicates whether audio tracks are muted. | | isVideoMuted | boolean | Indicates whether video tracks are muted. | | devices | MediaDeviceInfo[] | An array of available media devices. | | audioInputDevices | MediaDeviceInfo[] | An array of available audio input devices. | | audioOutputDevices | MediaDeviceInfo[] | An array of available audio output devices. | | videoInputDevices | MediaDeviceInfo[] | An array of available video input devices. | | getStreamRequest | REQUEST_STATES | The state of the request to obtain the media stream (IDLE, PENDING, FULFILLED, or REJECTED). | | getMediaDevicesRequest | REQUEST_STATES | The state of the request to obtain media devices (IDLE, PENDING, FULFILLED, or REJECTED). | | error | unknown | Any error that occurred during media stream or device retrieval. | | start | () => Promise<MediaStream \| null> | Initiates the media stream if not already streaming. | | stop | () => void | Stops the media stream if currently streaming. | | getMediaDevices | () => Promise<MediaDeviceInfo[]> | Retrieves a list of available media devices. | | updateMediaDeviceConstraints | ({ constraints, resetStream }) => Promise<void> | Updates media device constraints and optionally resets the media stream. | | muteAudio | () => void | Mutes all audio tracks in the media stream. | | unmuteAudio | () => void | Unmutes all audio tracks in the media stream. | | muteVideo | () => void | Mutes all video tracks in the media stream. | | unmuteVideo | () => void | Unmutes all video tracks in the media stream. | | addVideoEndedEventListener | (fn: EventListenerOrEventListenerObject) => void | Adds an event listener for 'ended' events on video tracks. | | addAudioEndedEventListener | (fn: EventListenerOrEventListenerObject) => void | Adds an event listener for 'ended' events on audio tracks. | | addVideoMuteEventListener | (fn: EventListenerOrEventListenerObject) => void | Adds an event listener for 'mute' events on video tracks. | | addAudioMuteEventListener | (fn: EventListenerOrEventListenerObject) => void | Adds an event listener for 'mute' events on audio tracks. | | removeVideoEndedEventListener | (fn: EventListenerOrEventListenerObject) => void | Removes an event listener for 'ended' events on video tracks. | | removeAudioEndedEventListener | (fn: EventListenerOrEventListenerObject) => void | Removes an event listener for 'ended' events on audio tracks. | | removeVideoMuteEventListener | (fn: EventListenerOrEventListenerObject) => void | Removes an event listener for 'mute' events on video tracks. | | removeAudioMuteEventListener | (fn: EventListenerOrEventListenerObject) => void | Removes an event listener for 'mute' events on audio tracks. |

Example

Demo - Link

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments

Feel free to use and contribute! If you encounter any issues or have suggestions, please open an issue.