Logo
v0.6.2
DEMO

useMediaStream

Reactive mediaDevices.getUserMedia streaming.

Usage

import { useMediaStream } from '@react-hooks-library/core'

export function Demo() {
  const { ref, pause, restart, resume, play, stop } = useMediaStream()

  return (
    <div>
      <video
        ref={ref}
        width="500"
        height="280"
        muted
        autoPlay
        playsInline></video>
      <div>
        <button onClick={play}>Start</button>
        <button onClick={stop}>Stop</button>
        <button onClick={restart}>Restart</button>
        <button onClick={pause}>Pause</button>
        <button onClick={resume}>Resume</button>
      </div>
    </div>
  )
}

Params

  • autoSwitch (optional | default: true)

    Recreate stream when the input devices id changed.

  • videoDeviceId (optional | default: undefined)

    The device id of video input. When passing with undefined the default device will be used. Pass false or "none" to disabled video input.

  • audioDeviceId (optional | default: undefined)

    The device id of audio input. When passing with undefined the default device will be used. Pass false or "none" to disabled audio input.

Returns

  • isSupported (boolean)

    Is mediaDevices.getUserMedia supported or not.

  • ref

    The ref to attach the video element.

  • stream MediaStream)

    The stream object, wrapped in a react ref.

  • isPlaying (boolean)

    Is the stream playing or not.

  • play (function)

    Start playing the stream.

  • stop (function)

    End the stream, will need restart to play again. Different from pause.

  • restart (function)

    Restart the stream.

  • isAudioMuted (boolean)

    Is the audio muted or not.

  • muteAudio (function)

    Mute the audio track.

  • unMuteAudio (function)

    UnMute the audio track.

  • isVideoMuted (boolean)

    Is the video muted or not.

  • muteVideo (function)

    Mute the video track.

  • unMuteVideo (function)

    UnMute the video track.

  • pause (function)

    Pause the stream, (mutes both audio and video). Does not stop the stream.

  • resume (function)

    Resume the stream, (un-mutes both audio and video).

  • isPaused (boolean)

    Is the stream paused or not.

Type Declarations

interface UseMediaStreamOptions {
  /**
   * Recreate stream when the input devices id changed
   *
   * @default true
   */
  autoSwitch?: boolean
  /**
   * The device id of video input
   *
   * When passing with `undefined` the default device will be used.
   * Pass `false` or "none" to disabled video input
   *
   * @default undefined
   */
  videoDeviceId?: string | undefined | false | 'none'
  /**
   * The device id of audio input
   *
   * When passing with `undefined` the default device will be used.
   * Pass `false` or "none" to disabled audio input
   *
   * @default undefined
   */
  audioDeviceId?: string | undefined | false | 'none'
}
/**
 * Reactive `mediaDevices.getUserMedia` streaming
 *
 * @param options
 *
 * @see https://react-hooks-library.vercel.app/core/useMediaStream
 */
declare function useMediaStream(options?: UseMediaStreamOptions): {
  isSupported: boolean
  ref: react.MutableRefObject<HTMLVideoElement | null>
  stream: react.MutableRefObject<MediaStream | null>
  isPlaying: boolean
  play: () => Promise<MediaStream | null | undefined>
  stop: () => void
  restart: () => Promise<MediaStream | null | undefined>
  isAudioMuted: boolean
  muteAudio: () => void
  unMuteAudio: () => void
  isVideoMuted: boolean
  muteVideo: () => void
  unMuteVideo: () => void
  pause: () => void
  resume: () => void
  isPaused: boolean
}

Source

Source | Demo | Docs