Browser MCU mix recording

browser_mcu_mix_record.js

let remoteVideo0 = document.getElementById('webrtc-remote-video-0');
let remoteVideo1 = document.getElementById('webrtc-remote-video-1');
let remoteVideo2 = document.getElementById('webrtc-remote-video-2');
let remoteVideo3 = document.getElementById('webrtc-remote-video-3');

let canvasMix = document.getElementById('canvas_mix');
let ctxMix = canvasMix.getContext('2d');
ctxMix.fillStyle = 'rgb(128, 192, 128)';
let mixStream = null;
let animationId = null;

let audioContext = new window.AudioContext();
let micNodes = [];
let outputNodes = [];
let audioMixSterams = [];


// mixed stream
mixStream = canvasMix.captureStream(15);
animationId = window.requestAnimationFrame(drawCanvas)


// ---- recording ---
let recorder =  null;
let blobUrl = null;
let chunks = [];
let playbackVideo =  document.getElementById('playback_video');
let anchor = document.getElementById('downloadlink');
let recordingStream = null
let recOutputNode = null;
let recAudioMixStream = null;

if (! window.MediaStream) {
  window.MediaStream = window.webkitMediaStream;
}

function startRecording() {
  recordingStream = new MediaStream();
  recordingStream.addTrack(mixStream.getVideoTracks()[0]);

  // -- audio mix --
  recOutputNode = audioContext.createMediaStreamDestination();
  recAudioMixStream = recOutputNode.stream;
  for (let key in micNodes) {
    let mic = micNodes[key];
    mic.connect(recOutputNode);
  }
  recordingStream.addTrack(recAudioMixStream.getAudioTracks()[0]);

  if (recorder) {
    console.warn("recorder already exist");
    return;
  }

  recorder = new MediaRecorder(recordingStream);
  chunks = [];
  recorder.ondataavailable = function(evt) {
    console.log("data available: evt.data.type=" + evt.data.type + " size=" + evt.data.size);
    chunks.push(evt.data);
  };

  recorder.onstop = function(evt) {
    console.log('recorder.onstop() evt:', evt);
  };

  recorder.start(2000); // OK
  console.log("start recording");
}

function stopRecording() {
  if (recorder) {
    recorder.stop();
    console.log("stop recording. playback");
    recorder = null;
    playRecorded();
  }
}

function playRecorded() {
  if (! blobUrl) {
    window.URL.revokeObjectURL(blobUrl);
    blobUrl = null;
  }

  var videoBlob = new Blob(chunks, { type: "video/webm" });
  blobUrl = window.URL.createObjectURL(videoBlob);
  anchor.download = 'mix_recorded.webm';
  anchor.href = blobUrl;

  if (blobUrl) {
    playbackVideo.src = blobUrl;
    playbackVideo.onended = function() {
      playbackVideo.pause();
      playbackVideo.src = "";
    };

    playbackVideo.play();
  }
}