useDisplayMedia

Demo

用法

import { useDisplayMedia } from '@vueuse/core'

const { stream, start } = useDisplayMedia()

// 开始流式传输

start()

const video = document.getElementById('video')

watchEffect(() => {
  // 在视频元素上预览
  video.srcObject = stream.value
})

类型声明

typescript

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: Ref<MediaStream | undefined, MediaStream | undefined>
  start: () => Promise<MediaStream | undefined>
  stop: () => void
  enabled: Ref<boolean, MaybeRef<boolean>>
}
export type UseDisplayMediaReturn = ReturnType<typeof useDisplayMedia>