⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	5
📦 Imports	7
📊 Variables & Constants	3
⚡ Async/Await Patterns	4
🟢 Vue Composition API	1
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Variables & Constants
• Async/Await Patterns
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useDisplayMedia/index.ts

📦 Imports

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

---

Variables & Constants

Name	Type	Kind	Value	Exported
video	boolean | MediaTrackConstraints	const	options.video	✗
audio	boolean | MediaTrackConstraints	const	options.audio	✗
constraint	MediaStreamConstraints	const	{ audio, video }	✗

---

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): { isSupported: any; stream: any; start: () => Promise<any>; stop: () => void; enabled: any; }

Code

export function useDisplayMedia(options: UseDisplayMediaOptions = {}) {
  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,
  }
}

• JSDoc:

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

• Parameters:

• options: UseDisplayMediaOptions
• Return Type: { isSupported: any; stream: any; start: () => Promise<any>; stop: () => void; enabled: any; }
• Calls:
• shallowRef (from vue)
• useSupported (from ../useSupported)
• navigator!.mediaDevices.getDisplayMedia
• stream.value?.getTracks().forEach
• useEventListener (from ../useEventListener)
• t.stop
• _stop
• _start
• watch (from vue)

_start(): Promise<any>

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
  }

• Return Type: Promise<any>
• Calls:
• navigator!.mediaDevices.getDisplayMedia
• stream.value?.getTracks().forEach
• useEventListener (from ../useEventListener)

_stop(): Promise<void>

Code

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

• Return Type: Promise<void>
• Calls:
• stream.value?.getTracks().forEach
• t.stop

stop(): void

Code

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

• Return Type: void
• Calls:
• _stop

start(): Promise<any>

Code

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

• Return Type: Promise<any>
• Calls:
• _start

---

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>	✓
video	boolean | MediaTrackConstraints | undefined	✓
audio	boolean | MediaTrackConstraints | undefined	✓

---

Type Aliases

UseDisplayMediaReturn

type UseDisplayMediaReturn = ReturnType<typeof useDisplayMedia>;

---