Files
chad/client/app/pages/index.vue
opti1337 47a464f08f
All checks were successful
Deploy / publish-web (push) Successful in 48s
screen sharing
2025-12-26 18:22:22 +06:00

50 lines
1.1 KiB
Vue

<template>
<div>
<div class="flex items-center justify-center">
<PrimeCard>
<template #content>
The chat is under development.
</template>
</PrimeCard>
</div>
<video
v-if="!!shareConsumer"
ref="shareVideo"
class="w-full aspect-video border border-surface-700 rounded mt-6 cursor-pointer"
autoplay
playsinline
@click="toFullscreen"
/>
</div>
</template>
<script setup lang="ts">
import { unrefElement } from '@vueuse/core'
definePageMeta({
name: 'Index',
})
const shareVideoRef = useTemplateRef('shareVideo')
const { consumers } = useMediasoup()
const shareConsumer = computed(() => {
return consumers.value.values().find(consumer => consumer.kind === 'video' && consumer.appData?.source === 'share')
})
watchEffect(() => {
if (!shareVideoRef.value || !shareConsumer.value)
return
const stream = new MediaStream([shareConsumer.value.track])
unrefElement(shareVideoRef)!.srcObject = stream
})
function toFullscreen() {
unrefElement(shareVideoRef)?.requestFullscreen()
}
</script>