⬅️ Back to Table of Contents

📄 useUserMedia

📊 Analysis Summary

Metric	Count
🔧 Functions	7
📦 Imports	11
⚡ Async/Await Patterns	4
🟢 Vue Composition API	2
📐 Interfaces	2

📚 Table of Contents

• Imports
• Async/Await Patterns
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useUserMedia/index.ts

📦 Imports

Name	Source
MaybeRef	vue
Ref	vue
ShallowRef	vue
ConfigurableNavigator	../_configurable
Supportable	../types
tryOnScopeDispose	@vueuse/shared
deepRef	vue
shallowRef	vue
watch	vue
defaultNavigator	../_configurable
useSupported	../useSupported

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
await-expression	useUserMedia	navigator!.mediaDevices.getUserMedia({ video: getDeviceOptions('video'), audi...	none
async-function	_start	navigator!.mediaDevices.getUserMedia({ video: getDeviceOptions('video'), audi...	none
async-function	start	_start()	none
async-function	restart	start()	none

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none
watch	watch	none	none

---

Functions

useUserMedia(options: UseUserMediaOptions): UseUserMediaReturn

Reactive mediaDevices.getUserMedia streaming

Parameters:

• options any: No description

See: https://vueuse.org/useUserMedia

Raw JSDoc

/**
 * Reactive `mediaDevices.getUserMedia` streaming
 *
 * @see https://vueuse.org/useUserMedia
 * @param options
 */

Calls:

• shallowRef (from vue)
• deepRef (from vue)
• useSupported (from ../useSupported)
• navigator!.mediaDevices.getUserMedia
• getDeviceOptions
• stream.value?.getTracks().forEach
• t.stop
• _stop
• _start
• start
• watch (from vue)
• restart
• tryOnScopeDispose (from @vueuse/shared)
• stop

Code

export function useUserMedia(options: UseUserMediaOptions = {}): UseUserMediaReturn {
  const enabled = shallowRef(options.enabled ?? false)
  const autoSwitch = shallowRef(options.autoSwitch ?? true)
  const constraints = deepRef(options.constraints)
  const { navigator = defaultNavigator } = options
  const isSupported = useSupported(() => navigator?.mediaDevices?.getUserMedia)

  const stream: Ref<MediaStream | undefined> = shallowRef()

  function getDeviceOptions(type: 'video' | 'audio') {
    switch (type) {
      case 'video': {
        if (constraints.value)
          return constraints.value.video || false
        break
      }
      case 'audio': {
        if (constraints.value)
          return constraints.value.audio || false
        break
      }
    }
  }

  async function _start() {
    if (!isSupported.value || stream.value)
      return
    stream.value = await navigator!.mediaDevices.getUserMedia({
      video: getDeviceOptions('video'),
      audio: getDeviceOptions('audio'),
    })
    return stream.value
  }

  function _stop() {
    stream.value?.getTracks().forEach(t => t.stop())
    stream.value = undefined
  }

  function stop() {
    _stop()
    enabled.value = false
  }

  async function start() {
    await _start()
    if (stream.value)
      enabled.value = true
    return stream.value
  }

  async function restart() {
    _stop()
    return await start()
  }

  watch(
    enabled,
    (v) => {
      if (v)
        _start()
      else _stop()
    },
    { immediate: true },
  )

  watch(
    constraints,
    () => {
      if (autoSwitch.value && stream.value)
        restart()
    },
    { immediate: true, deep: true },
  )

  tryOnScopeDispose(() => {
    stop()
  })

  return {
    isSupported,
    stream,
    start,
    stop,
    restart,
    constraints,
    enabled,
    autoSwitch,
  }
}

Internal helpers

Declared inside another function in this file.

getDeviceOptions(type: 'video' | 'audio'): any

Parameters:

• type 'video' | 'audio'

Returns: any

Code

function getDeviceOptions(type: 'video' | 'audio') {
    switch (type) {
      case 'video': {
        if (constraints.value)
          return constraints.value.video || false
        break
      }
      case 'audio': {
        if (constraints.value)
          return constraints.value.audio || false
        break
      }
    }
  }

_start(): Promise<any>

Returns: Promise<any>

Calls:

• navigator!.mediaDevices.getUserMedia
• getDeviceOptions

Code

async function _start() {
    if (!isSupported.value || stream.value)
      return
    stream.value = await navigator!.mediaDevices.getUserMedia({
      video: getDeviceOptions('video'),
      audio: getDeviceOptions('audio'),
    })
    return stream.value
  }

_stop(): void

Returns: void

Calls:

• stream.value?.getTracks().forEach
• t.stop

Code

function _stop() {
    stream.value?.getTracks().forEach(t => t.stop())
    stream.value = undefined
  }

stop(): void

Returns: void

Calls:

• _stop

Code

function stop() {
    _stop()
    enabled.value = false
  }

start(): Promise<any>

Returns: Promise<any>

Calls:

• _start

Code

async function start() {
    await _start()
    if (stream.value)
      enabled.value = true
    return stream.value
  }

restart(): Promise<any>

Returns: Promise<any>

Calls:

• _stop
• start

Code

async function restart() {
    _stop()
    return await start()
  }

---

Interfaces

UseUserMediaOptions

Interface Code

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>
}

Properties

Name	Type	Optional	Description
enabled	MaybeRef<boolean>	✓	not shown
autoSwitch	MaybeRef<boolean>	✓	not shown
constraints	MaybeRef<MediaStreamConstraints>	✓	not shown

UseUserMediaReturn

Interface Code

export interface UseUserMediaReturn extends Supportable {
  stream: Ref<MediaStream | undefined>
  start: () => Promise<MediaStream | undefined>
  stop: () => void
  restart: () => Promise<MediaStream | undefined>
  constraints: Ref<MediaStreamConstraints | undefined>
  enabled: ShallowRef<boolean>
  autoSwitch: ShallowRef<boolean>
}

Properties

Name	Type	Optional	Description
stream	Ref<MediaStream \| undefined>	✗	not shown
start	() => Promise<MediaStream \| undefined>	✗	not shown
stop	() => void	✗	not shown
restart	() => Promise<MediaStream \| undefined>	✗	not shown
constraints	Ref<MediaStreamConstraints \| undefined>	✗	not shown
enabled	ShallowRef<boolean>	✗	not shown
autoSwitch	ShallowRef<boolean>	✗	not shown

---

Generated by Syntax Scribe