DEV Community

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

Posted on • Updated on

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.

  let videoSource = null;
  let loading = false;
  const obtenerVideoCamara = async () => {
    try {
      loading = true;
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
      videoSource.srcObject = stream;;
      loading = false;
    } catch (error) {

  {#if loading}
  <!-- svelte-ignore a11y-media-has-caption -->
  <video bind:this={videoSource} />
  <button on:click={obtenerVideoCamara}>CLICK</button>
Enter fullscreen mode Exit fullscreen mode


Top comments (0)