useDisplayMedia

类别

Sensors

导出体积

926 B

上次更改

6 months ago

示例

源码 playground (beta)

用法

vue

<script setup lang="ts">
import { useDisplayMedia
 } from '@vueuse/core'
import { useTemplateRef
 } from 'vue'

const { stream
, start
 } = useDisplayMedia
()

// start streaming
start
()

const videoRef
 = useTemplateRef
('video')
watchEffect
(() => {
  // preview on a video element
  videoRef
.value
.srcObject
 = stream
.value

})
</script>

<template>
  <video
 ref
="video
" />
</template>

类型声明

export interface UseDisplayMediaOptions extends ConfigurableNavigator {
  /**
   * 流是否已启用
   * @default false
   */
  enabled
?: MaybeRef
<boolean>
  /**
   * 流的视频媒体约束条件
   */
  video
?: boolean | MediaTrackConstraints | undefined
  /**
   * 流的音频媒体约束条件
   */
  audio
?: boolean | MediaTrackConstraints | undefined
}
/**
 * 响应式 `mediaDevices.getDisplayMedia` 获取屏幕共享流
 *
 * @see https://vueuse.org/useDisplayMedia
 * @param options
 */
export declare function useDisplayMedia
(options
?: UseDisplayMediaOptions): {
  isSupported
: ComputedRef
<boolean>
  stream
: ShallowRef
<MediaStream | undefined, MediaStream | undefined>
  start
: () => Promise
<MediaStream | undefined>
  stop
: () => void
  enabled
:
    | Ref
<boolean, boolean>
    | ShallowRef
<boolean, boolean>
    | WritableComputedRef
<boolean, boolean>
    | ShallowRef
<true, true>
    | ShallowRef
<false, false>
}
export type UseDisplayMediaReturn
 = ReturnType
<typeof useDisplayMedia
>