useDisplayMedia

リアクティブなmediaDevices.getDisplayMediaストリーミング。

使用法

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

const { stream, start } = useDisplayMedia()

// ストリーミングを開始
start()

const videoRef = useTemplateRef('video')
watchEffect(() => {
  // ビデオ要素でプレビュー
  videoRef.value.srcObject = stream.value
})
</script>

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