<template>
  <div class="cursor-pointer hover:outline outline-primary rounded overflow-hidden flex items-center justify-center">
    <video :srcObject="mediaStream" muted autoplay />
  </div>
</template>

<script setup lang="ts">
import type { Consumer } from '#shared/types'

const props = defineProps<{
  consumer: Consumer
}>()

const mediaStream = computed(() => {
  return new MediaStream([props.consumer.raw.track])
})
</script>

<style>

</style>
