Видеозапис с 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. Когато се опитвам да заснема байтове с помощта на API на MediaRecorder, той работи само в 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, за да продължите да заснемате видео. Въпреки че това може да работи, все още съм отворен за всякакви други по-добри предложения.