⬅️ Back to Table of Contents

📄 useDisplayMedia

📊 Analysis Summary

Metric	Count
🔧 Functions	5
📦 Imports	9
⚡ Async/Await Patterns	4
🟢 Vue Composition API	1
📐 Interfaces	2

📚 Table of Contents

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

🛠️ File Location:

📂 packages/core/useDisplayMedia/index.ts

📦 Imports

Name	Source
MaybeRef	vue
ShallowRef	vue
ConfigurableNavigator	../_configurable
Supportable	../types
shallowRef	vue
watch	vue
defaultNavigator	../_configurable
useEventListener	../useEventListener
useSupported	../useSupported

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
await-expression	useDisplayMedia	navigator!.mediaDevices.getDisplayMedia(constraint), _start()	none
async-function	_start	navigator!.mediaDevices.getDisplayMedia(constraint)	none
async-function	_stop	none	none
async-function	start	_start()	none

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

useDisplayMedia(options: UseDisplayMediaOptions): UseDisplayMediaReturn

Reactive mediaDevices.getDisplayMedia streaming

Parameters:

• options any: No description

See: https://vueuse.org/useDisplayMedia

Raw JSDoc

/**
 * Reactive `mediaDevices.getDisplayMedia` streaming
 *
 * @see https://vueuse.org/useDisplayMedia
 * @param options
 */

Calls:

• shallowRef (from vue)
• useSupported (from ../useSupported)
• navigator!.mediaDevices.getDisplayMedia
• stream.value?.getTracks().forEach
• useEventListener (from ../useEventListener)
• t.stop
• _stop
• _start
• watch (from vue)

Code

export function useDisplayMedia(options: UseDisplayMediaOptions = {}): UseDisplayMediaReturn {
  const enabled = shallowRef(options.enabled ?? false)
  const video = options.video
  const audio = options.audio
  const { navigator = defaultNavigator } = options
  const isSupported = useSupported(() => navigator?.mediaDevices?.getDisplayMedia)

  const constraint: MediaStreamConstraints = { audio, video }

  const stream = shallowRef<MediaStream | undefined>()

  async function _start() {
    if (!isSupported.value || stream.value)
      return
    stream.value = await navigator!.mediaDevices.getDisplayMedia(constraint)
    stream.value?.getTracks().forEach(t => useEventListener(t, 'ended', stop, { passive: true }))
    return stream.value
  }

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

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

  return {
    isSupported,
    stream,
    start,
    stop,
    enabled,
  }
}

Internal helpers

Declared inside another function in this file.

_start(): Promise<any>

Returns: Promise<any>

Calls:

• navigator!.mediaDevices.getDisplayMedia
• stream.value?.getTracks().forEach
• useEventListener (from ../useEventListener)

Code

async function _start() {
    if (!isSupported.value || stream.value)
      return
    stream.value = await navigator!.mediaDevices.getDisplayMedia(constraint)
    stream.value?.getTracks().forEach(t => useEventListener(t, 'ended', stop, { passive: true }))
    return stream.value
  }

_stop(): Promise<void>

Returns: Promise<void>

Calls:

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

Code

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

---

Interfaces

UseDisplayMediaOptions

Interface Code

export interface UseDisplayMediaOptions extends ConfigurableNavigator {
  /**
   * If the stream is enabled
   * @default false
   */
  enabled?: MaybeRef<boolean>

  /**
   * If the stream video media constraints
   */
  video?: boolean | MediaTrackConstraints | undefined
  /**
   * If the stream audio media constraints
   */
  audio?: boolean | MediaTrackConstraints | undefined
}

Properties

Name	Type	Optional	Description
enabled	MaybeRef<boolean>	✓	not shown
video	boolean \| MediaTrackConstraints \| undefined	✓	not shown
audio	boolean \| MediaTrackConstraints \| undefined	✓	not shown

UseDisplayMediaReturn

Interface Code

export interface UseDisplayMediaReturn extends Supportable {
  stream: ShallowRef<MediaStream | undefined>
  start: () => Promise<MediaStream | undefined>
  stop: () => void
  enabled: ShallowRef<boolean>
}

Properties

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

---

Generated by Syntax Scribe