Spaces:
Runtime error
Runtime error
File size: 1,316 Bytes
3dd0aef 246efdb 3dd0aef 246efdb cb60b56 3dd0aef 246efdb cb60b56 246efdb cb60b56 12ffaf3 246efdb 12ffaf3 c640c48 246efdb 12ffaf3 3dd0aef 246efdb 3dd0aef 246efdb 3dd0aef 246efdb 3dd0aef |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script lang="ts">
import { mediaDevices, mediaStreamActions } from "$lib/mediaStream";
import Screen from "$lib/icons/screen.svelte";
import AspectRatioSelect from "./AspectRatioSelect.svelte";
import { onMount } from "svelte";
let deviceId: string = "";
let aspectRatio: number = 1;
onMount(() => {
deviceId = $mediaDevices[0].deviceId;
});
</script>
<div
class="flex items-center justify-center text-xs backdrop-blur-sm backdrop-grayscale"
>
<AspectRatioSelect
bind:aspectRatio
change={(value) => mediaStreamActions.switchCamera(deviceId, value)}
/>
<button
title="Share your screen"
class="my-1 flex cursor-pointer gap-1 rounded-md border border-gray-500/50 bg-slate-100/30 p-1 font-medium text-white"
onclick={() => mediaStreamActions.startScreenCapture()}
>
<span>Share</span>
<Screen />
</button>
{#if $mediaDevices}
<select
bind:value={deviceId}
onchange={() => mediaStreamActions.switchCamera(deviceId, aspectRatio)}
id="devices-list"
class="block cursor-pointer rounded-md border border-gray-800/50 bg-slate-100/30 p-1 font-medium text-white"
>
{#each $mediaDevices as device (device.deviceId)}
<option value={device.deviceId}>{device.label}</option>
{/each}
</select>
{/if}
</div>
|