Javascript | MediaRecorder API -在桌面上录制的视频文件不能在移动设备上播放

Question

我正在尝试使用画布和MediaRecorder开发一个类似画布的Insta故事创建者这个应用程序在桌面浏览器上运行得很好——我可以下载文件，并在桌面上播放。然而，当我将该文件发送到我的手机时，它却无法播放(即使是在Insta上)。我认为这是编解码器的问题-但不知道如何解决相同的问题。

这是处理mediaRecorderAPI的函数

是否有任何mime类型，我可以使用，这是通用的，可以在任何设备上播放?

initRecorder () {
var dl = document.querySelector("#dl")
let videoStream = this.canvas.captureStream(60);
if(this.isAudioPresent) {
videoStream.addTrack(this.audioStream.getAudioTracks()[0])
}
let mediaRecorder = new MediaRecorder(videoStream, {
videoBitsPerSecond : 2500000,
mime: 'video/webm'
});
let chunks = [];
mediaRecorder.onstop = function(e) {
var blob = new Blob(chunks, { 'type' : 'video/webm' });
chunks = [];
var videoURL = URL.createObjectURL(blob);
dl.href = videoURL;
};
mediaRecorder.ondataavailable = function(e) {
e.data.size && chunks.push(e.data);
};
mediaRecorder.start();
setTimeout(function (){ mediaRecorder.stop(); },this.storytime);
}
```

Answer 1

发现:不同的浏览器使用不同的转码。Insta只接受MP4转码。因此，您需要在前端使用转码器(ffmpeg.js或wasm版本的ffmpeg)或将数据发送到后端并在那里处理(我最终这样做)