VueUse useDisplayMedia 共享屏幕

VueUse useDisplayMedia 可以获取你指定的屏幕或应用并进行录屏或者共享屏幕。

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

const video = ref<HTMLVideoElement>()
const { stream, enabled } = useDisplayMedia()

watchEffect(() => {
  if (video.value)
    video.value.srcObject = stream.value!
})
</script>
<template>
  <div class="flex flex-col gap-4 text-center">
    <div>
      <button @click="enabled = !enabled">
        {{ enabled ? 'Stop' : 'Start' }} sharing my screen
      </button>
    </div>


    <div>
      <video
        ref="video"
        muted
        autoplay
        controls
        class="h-100 w-auto"
      />
    </div>
  </div>
</template>

类型定义

//参数
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
}
/**
 * Reactive `mediaDevices.getDisplayMedia` streaming
 *
 * @see https://vueuse.org/useDisplayMedia
 * @param options
 */
export declare function useDisplayMedia(options?: UseDisplayMediaOptions): {
  isSupported: ComputedRef<boolean>
  stream: Ref<MediaStream | undefined>
  start: () => Promise<MediaStream | undefined>
  stop: () => void
  enabled: Ref<boolean>
}
export type UseDisplayMediaReturn = ReturnType<typeof useDisplayMedia>