CODEWITHSUNDEEP
htmlhtml5-videomicrosoft-edgeweb-mediarecorder
CuriousMind
CuriousMind

Reputation: 3173

Video recording with Edge using HTML5

I am trying to record video using HTML5 API. I want this solution to be cross platform and it should atleast work on Chrome, Firefox and Edge browser. I tried with following code

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

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

Above code displays video in Chrome and Edge. When I try to capture bytes using MediaRecorder API, it only works in Chrome and not in Edge. Please suggest what can be done.

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

Please suggest, how can I capture bytes so that it can be saved on server.

I tried MediaStreamRecorder but that too didn't work with Edge.

Update : I found few approaches which indicate use of Canvas as an option to render frames and capture the bytes. Then use requestAnimationFrame to continue capturing video. While this might work, I am still open to any other better suggestions.

Upvotes: 2

Views: 1791

Answers (1)

Zouhir
Zouhir

Reputation: 226

The MediaRecorder API seem to be only implemented in FireFox & Chrome

https://caniuse.com/#search=MediaRecorder

I'd always check caniuse.com for browser support for new APIs!

Upvotes: 1

Related Questions