|
<script lang="ts"> |
|
import { isLCMRunning, lcmLiveState, lcmLiveActions } from '$lib/lcmLive'; |
|
import { onFrameChangeStore } from '$lib/mediaStream'; |
|
import { PUBLIC_BASE_URL } from '$env/static/public'; |
|
|
|
$: streamId = $lcmLiveState?.streamId; |
|
$: { |
|
console.log('streamId', streamId); |
|
} |
|
</script> |
|
|
|
<div class="relative overflow-hidden rounded-lg border border-slate-300"> |
|
|
|
{#if $isLCMRunning} |
|
<img class="aspect-square w-full rounded-lg" src={PUBLIC_BASE_URL + '/stream/' + streamId} /> |
|
{:else} |
|
<div class="aspect-square w-full rounded-lg" /> |
|
{/if} |
|
<div class="absolute left-0 top-0 aspect-square w-1/4"> |
|
<slot /> |
|
</div> |
|
</div> |
|
|