Skip to content
On this page

useUserMedia

Category
Export Size
1.2 kB
Last Changed
5 months ago
Related

Reactive mediaDevices.getUserMedia streaming.

Demo

Usage

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

const { stream, start } = useUserMedia()

start()
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
})
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({
  videoDeviceId: currentCamera,
  audioDeviceId: currentMicrophone,
})
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({
  videoDeviceId: currentCamera,
  audioDeviceId: 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 the input devices id changed
   *
   * @default true
   */
  autoSwitch?: MaybeRef<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?: MaybeRef<string | undefined | false | "none">
  /**
   * The device id of audi input
   *
   * When passing with `undefined` the default device will be used.
   * Pass `false` or "none" to disabled audi input
   *
   * @default undefined
   */
  audioDeviceId?: MaybeRef<string | undefined | false | "none">
}
/**
 * Reactive `mediaDevices.getUserMedia` streaming
 *
 * @see https://vueuse.org/useUserMedia
 * @param options
 */
export declare function useUserMedia(options?: UseUserMediaOptions): {
  isSupported: Ref<boolean>
  stream: Ref<MediaStream | undefined>
  start: () => Promise<MediaStream | undefined>
  stop: () => void
  restart: () => Promise<MediaStream | undefined>
  videoDeviceId: Ref<string | false | undefined>
  audioDeviceId: Ref<string | false | undefined>
  enabled: Ref<boolean>
  autoSwitch: Ref<boolean>
}
export declare type UseUserMediaReturn = ReturnType<typeof useUserMedia>
export interface UseUserMediaOptions extends ConfigurableNavigator {
  /**
   * If the stream is enabled
   * @default false
   */
  enabled?: MaybeRef<boolean>
  /**
   * Recreate stream when the input devices id changed
   *
   * @default true
   */
  autoSwitch?: MaybeRef<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?: MaybeRef<string | undefined | false | "none">
  /**
   * The device id of audi input
   *
   * When passing with `undefined` the default device will be used.
   * Pass `false` or "none" to disabled audi input
   *
   * @default undefined
   */
  audioDeviceId?: MaybeRef<string | undefined | false | "none">
}
/**
 * Reactive `mediaDevices.getUserMedia` streaming
 *
 * @see https://vueuse.org/useUserMedia
 * @param options
 */
export declare function useUserMedia(options?: UseUserMediaOptions): {
  isSupported: Ref<boolean>
  stream: Ref<MediaStream | undefined>
  start: () => Promise<MediaStream | undefined>
  stop: () => void
  restart: () => Promise<MediaStream | undefined>
  videoDeviceId: Ref<string | false | undefined>
  audioDeviceId: Ref<string | false | undefined>
  enabled: Ref<boolean>
  autoSwitch: Ref<boolean>
}
export declare type UseUserMediaReturn = ReturnType<typeof useUserMedia>

Source

SourceDemoDocs

Contributors

Anthony Fu
Jelf
wheat
Shinigami
Alex Kozack

Changelog

v8.9.2 on 7/12/2022
81d92 - fix(all)!: isSupported becomes Ref instead of boolean for SSR compatibility (#1800)

Released under the MIT License.