partey_workadventure/front/src/Components/MyCamera.svelte

47 lines
1.3 KiB
Svelte
Raw Normal View History

2021-05-28 15:48:58 +02:00
<script lang="typescript">
import {localStreamStore} from "../Stores/MediaStore";
import SoundMeterWidget from "./SoundMeterWidget.svelte";
import {onDestroy} from "svelte";
2021-06-15 18:34:11 +02:00
function srcObject(node: HTMLVideoElement, stream: MediaStream) {
2021-05-28 15:48:58 +02:00
node.srcObject = stream;
return {
2021-06-15 18:34:11 +02:00
update(newStream: MediaStream) {
2021-05-28 15:48:58 +02:00
if (node.srcObject != newStream) {
node.srcObject = newStream
}
}
}
}
let stream : MediaStream|null;
/*$: {
if ($localStreamStore.type === 'success') {
stream = $localStreamStore.stream;
} else {
stream = null;
}
}*/
const unsubscribe = localStreamStore.subscribe(value => {
if (value.type === 'success') {
stream = value.stream;
} else {
stream = null;
}
});
onDestroy(unsubscribe);
</script>
<div>
<div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
2021-06-15 18:34:11 +02:00
{#if $localStreamStore.type === "success" && $localStreamStore.stream }
<video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
2021-05-28 15:48:58 +02:00
<SoundMeterWidget stream={stream}></SoundMeterWidget>
2021-06-15 18:34:11 +02:00
{/if}
2021-05-28 15:48:58 +02:00
</div>
</div>