Javascript

Question

我正在尝试使用 Canvas 和 MediaRecorder 开发类似 canva 的 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 或 ffmpeg 的 wasm 版本）或将您的数据发送到后端并在那里处理（我最终这样做了）

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

Javascript | MediaRecorder API - Recorded video file on Desktop does not play in Mobile

mp4

codec

mediarecorder

web-mediarecorder