Svelte.js Example to Access Webcam of User Using getUserMedia() in Browser Using Javascript Full Project For Beginners

App.svelte`

<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>CARGANDO</h1>
  {/if}
  <!-- svelte-ignore a11y-media-has-caption -->
  <video bind:this={videoSource} />
  <button on:click={obtenerVideoCamara}>CLICK</button>
</div>

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>CARGANDO</h1>

{/if}

<button on:click={obtenerVideoCamara}>CLICK</button>

</div>

Related posts:

You Might Also Like

Svelte.js SPA Router Example to Implement Private & Protected Routes & Pages in Browser Full Project For Beginners

Build a Svelte.js Text Editor or Converter to UpperCase or LowerCase Deployed to Netlify Web App Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a Svelte.js Digital Stopwatch Clock Component in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Leave a Reply Cancel reply