For this we use the binding property called this allows you to obtain a reference to the rendered elements such as Canva, Video, etc.
<script>
let videoSource = null;
let loading = false;
const obtenerVideoCamara = async () => {
try {
loading = true;
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
});
videoSource.srcObject = stream;
videoSource.play();
loading = false;
} catch (error) {
console.log(error);
}
};
</script>
<div>
{#if loading}
<h1>LOADING</h1>
{/if}
<!-- svelte-ignore a11y-media-has-caption -->
<video bind:this={videoSource} />
<button on:click={obtenerVideoCamara}>CLICK</button>
</div>
GitHub
Top comments (0)