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

Question

I am trying to develop a canva-like Insta story creator using Canvas and MediaRecorder The app is working perfectly on a desktop browser - I am able to download the file, and play it on desktop. However, when I send that file to my mobile, it doesn't play(even on Insta). I figure this is an issue with codecs - but don't know how to solve the same.

This is the function that handles the mediaRecorderAPI

Is there any mime type that I can use, that is universal and can play for any device?

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

Figured this out: Different browsers use different transcoding. Insta only accepts MP4 transcoding. Hence, you need to use either a transcoder on the frontend(ffmpeg.js or wasm version of ffmpeg) or send your data to backend and handle there(which I ended up doing)