Запись видео в Edge с использованием HTML5

Я пытаюсь записывать видео с помощью HTML5 API. Я хочу, чтобы это решение было кроссплатформенным и должно работать, по крайней мере, в браузерах Chrome, Firefox и Edge. Я пробовал со следующим кодом

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
}).then((mediaStream) => {

  const video = document.querySelector('video');
  const url = window.URL.createObjectURL(mediaStream);
  video.src = url;
});

Приведенный выше код отображает видео в Chrome и Edge. Когда я пытаюсь захватить байты с помощью MediaRecorder API, он работает только в Chrome, а не в Edge. Подскажите, пожалуйста, что можно сделать.

const recorder = new MediaRecorder(mediaStream);
recorder.ondataavailable = onDataAvailable
...
function onDataAvailable(d){
   //d.data is populated in Chrome but not in Edge.
}

Пожалуйста, предложите, как я могу захватить байты, чтобы их можно было сохранить на сервере.

Я попробовал MediaStreamRecorder, но это тоже не сработало с Edge.

Обновление: я нашел несколько подходов, которые указывают на использование Canvas в качестве опции для рендеринга кадров и захвата байтов. Затем используйте requestAnimationFrame, чтобы продолжить захват видео. Хотя это может сработать, я все же открыт для любых других лучших предложений.