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>
|
2021-05-30 15:29:28 +02:00
|
|
|
<div class="video-container nes-container is-rounded is-dark div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
|
2021-06-15 18:34:11 +02:00
|
|
|
{#if $localStreamStore.type === "success" && $localStreamStore.stream }
|
2021-06-03 14:31:21 +02:00
|
|
|
<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>
|