Creating a media stream with the combination of camera and window

mediarecorder-api-screenflow-record.js

getStreamForCamera().then(streamCamera => {
    // we know have access to the camera, let's append it to the DOM
    appendCamera(streamCamera);
    getStreamForWindow().then(streamWindow => {
      // we now have access to the screen too
      // we generate a combined stream with the video from the
      // screen and the audio from the camera
      var finalStream = new MediaStream();
      const videoTrack = streamWindow.getVideoTracks()[0];
      finalStream.addTrack(videoTrack);
      const audioTrack = streamCamera.getAudioTracks()[0];
      finalStream.addTrack(audioTrack);
      this.recorder = new MediaRecorder(finalStream);
      // we subscribe to 'ondataavailable'.
      // this gets called when the recording is stopped.
      this.recorder.ondataavailable = function(e) {
        // let's create a blob with e.data which has the
        // contents of the video in webm
        var link = document.createElement('a');
        link.setAttribute('href', window.URL.createObjectURL(e.data));
        link.setAttribute('download', 'video_' + Math.floor((Math.random() * 999999)) + '.webm');
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
      // start recording
      this.recorder.start();
    });
  });