title: Overlay face with javascript screen recording then save it?
body: <p>I am making a screen recorder in JavaScript. I got the code that I have so far from <a href="https://dev.to/sebastianstamm/screen-recording-in-10-lines-of-vanilla-js-3bo8" rel="nofollow noreferrer">https://dev.to/sebastianstamm/screen-recording-in-10-lines-of-vanilla-js-3bo8</a>.</p>
  <p>Is there any way to record the face, then overlap the video of the user's face with the screen recording, and save it in a .webm file?
  The full code from the post that I found is this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const start = document.getElementById("start");
  const stop = document.getElementById("stop");
  const video = document.querySelector("video");
  let recorder, stream;
  
  async function startRecording() {
    stream = await navigator.mediaDevices.getDisplayMedia({
      video: { mediaSource: "screen" }
    });
    recorder = new MediaRecorder(stream);
  
    const chunks = [];
    recorder.ondataavailable = e =&gt; chunks.push(e.data);
    recorder.onstop = e =&gt; {
      const completeBlob = new Blob(chunks, { type: chunks[0].type });
      video.src = URL.createObjectURL(completeBlob);
    };
  
    recorder.start();
  }
  
  start.addEventListener("click", () =&gt; {
    start.setAttribute("disabled", true);
    stop.removeAttribute("disabled");
  
    startRecording();
  });
  
  stop.addEventListener("click", () =&gt; {
    stop.setAttribute("disabled", true);
    start.removeAttribute("disabled");
  
    recorder.stop();
    stream.getVideoTracks()[0].stop();
  });</code></pre>
  </div>
  </div>
  </p>
  <p>And the HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="start"&gt;
        Start Recording
      &lt;/button&gt;
      &lt;button id="stop" disabled&gt;
        Stop Recording
      &lt;/button&gt;
      &lt;video autoplay /&gt;</code></pre>
  </div>
  </div>
  </p>