VueUse

Appearance

useUserMedia ​

Category
Export Size
569 B
Last Changed
2 months ago
Related

Reactive mediaDevices.getUserMedia streaming.

Demo ​

source

ReferenceError: reactive is not defined

Usage ​

js
import { useUserMedia } from '@vueuse/core'

const { stream, start } = useUserMedia()

start()
ts
const video = document.getElementById('video')

watchEffect(() => {
  // preview on a video element
  video.srcObject = stream.value
})

Devices ​

js
import { useDevicesList, useUserMedia } from '@vueuse/core'

const {
  videoInputs: cameras,
  audioInputs: microphones,
} = useDevicesList({
  requestPermissions: true,
})
const currentCamera = computed(() => cameras.value[0]?.deviceId)
const currentMicrophone = computed(() => microphones.value[0]?.deviceId)

const { stream } = useUserMedia({
  constraints: reactive({
    video: { deviceId: currentCamera },
    audio: { deviceId: currentMicrophone, }
  })
})

Type Declarations ​

Show Type Declarations
typescript
export interface UseUserMediaOptions extends ConfigurableNavigator {
  /**
   * If the stream is enabled
   * @default false
   */
  enabled?: MaybeRef<boolean>
  /**
   * Recreate stream when deviceIds or constraints changed
   *
   * @default true
   */
  autoSwitch?: MaybeRef<boolean>
  /**
   * MediaStreamConstraints to be applied to the requested MediaStream
   * If provided, the constraints will override videoDeviceId and audioDeviceId
   *
   * @default {}
   */
  constraints?: MaybeRef<MediaStreamConstraints>
}
/**
 * Reactive `mediaDevices.getUserMedia` streaming
 *
 * @see https://vueuse.org/useUserMedia
 * @param options
 */
export declare function useUserMedia(options?: UseUserMediaOptions): {
  isSupported: ComputedRef<boolean>
  stream: Ref<MediaStream | undefined, MediaStream | undefined>
  start: () => Promise<MediaStream | undefined>
  stop: () => void
  restart: () => Promise<MediaStream | undefined>
  constraints: Ref<
    | MediaStreamConstraints
    | {
        audio?:
          | boolean
          | {
              advanced?:
                | {
                    aspectRatio?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    autoGainControl?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    channelCount?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    deviceId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    displaySurface?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    echoCancellation?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    facingMode?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    frameRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    groupId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    height?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    noiseSuppression?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    sampleRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    sampleSize?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    width?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                  }[]
                | undefined
              aspectRatio?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              autoGainControl?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              channelCount?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              deviceId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              displaySurface?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              echoCancellation?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              facingMode?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              frameRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              groupId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              height?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              noiseSuppression?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              sampleRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              sampleSize?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              width?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
            }
          | undefined
        peerIdentity?: string | undefined
        preferCurrentTab?: boolean | undefined
        video?:
          | boolean
          | {
              advanced?:
                | {
                    aspectRatio?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    autoGainControl?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    channelCount?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    deviceId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    displaySurface?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    echoCancellation?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    facingMode?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    frameRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    groupId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    height?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    noiseSuppression?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    sampleRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    sampleSize?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    width?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                  }[]
                | undefined
              aspectRatio?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              autoGainControl?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              channelCount?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              deviceId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              displaySurface?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              echoCancellation?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              facingMode?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              frameRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              groupId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              height?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              noiseSuppression?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              sampleRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              sampleSize?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              width?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
            }
          | undefined
      }
    | undefined,
    | MaybeRef<MediaStreamConstraints>
    | {
        audio?:
          | boolean
          | {
              advanced?:
                | {
                    aspectRatio?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    autoGainControl?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    channelCount?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    deviceId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    displaySurface?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    echoCancellation?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    facingMode?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    frameRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    groupId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    height?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    noiseSuppression?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    sampleRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    sampleSize?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    width?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                  }[]
                | undefined
              aspectRatio?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              autoGainControl?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              channelCount?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              deviceId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              displaySurface?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              echoCancellation?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              facingMode?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              frameRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              groupId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              height?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              noiseSuppression?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              sampleRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              sampleSize?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              width?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
            }
          | undefined
        peerIdentity?: string | undefined
        preferCurrentTab?: boolean | undefined
        video?:
          | boolean
          | {
              advanced?:
                | {
                    aspectRatio?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    autoGainControl?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    channelCount?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    deviceId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    displaySurface?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    echoCancellation?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    facingMode?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    frameRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    groupId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    height?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    noiseSuppression?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    sampleRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    sampleSize?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    width?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                  }[]
                | undefined
              aspectRatio?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              autoGainControl?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              channelCount?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              deviceId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              displaySurface?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              echoCancellation?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              facingMode?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              frameRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              groupId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              height?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              noiseSuppression?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              sampleRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              sampleSize?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              width?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
            }
          | undefined
      }
    | undefined
  >
  enabled: Ref<boolean, MaybeRef<boolean>>
  autoSwitch: Ref<boolean, MaybeRef<boolean>>
}
export type UseUserMediaReturn = ReturnType<typeof useUserMedia>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
IlyaL
Anthony Fu
Waleed Khaled
Martin
Jelf
wheat
Shinigami
Alex Kozack

Changelog ​

v10.8.0 on 2/20/2024
6d44d - fix: stop stream on scope dispose (#3757)
v10.0.0-beta.3 on 4/12/2023
85468 - fix!: remove deprecated apis
v10.0.0-beta.0 on 3/14/2023
8f2a3 - feat!: add constraints - remove deviceIds (#2032)

Released under the MIT License.

Copyright © 2020-PRESENT Anthony Fu and VueUse contributors