DEV Community

Cover image for How to use the webcam with Svelte JS
Nelson Hernández
Nelson Hernández

Posted on • Edited on

4 1

How to use the webcam with Svelte JS

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>
Enter fullscreen mode Exit fullscreen mode

GitHub

https://github.com/NelsonCode/webcam-svelte

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more