edge html5播放,html - Video recording with Edge using HTML5 - Stack Overflow

曾经终败给现在 2022-10-07 15:58 113阅读 0赞

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.

发表评论

表情：
评论列表 （有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读