after converting webm to mp4 using ffmpeg,video played is total black

[sRect]

• If you export mp4 directly,Windows Player cannot play, But you can play it in Chrome and mobile
• If you convert webm to mp4, the video played is all black,The code is working fine

package.json

{
  "@ffmpeg/core": "0.8.5",
  "@ffmpeg/ffmpeg": "0.9.8",
  "html2canvas": "^1.0.0",
  "recordrtc": "^5.6.2",
}

index.js:

import html2canvas from 'html2canvas';
import RecordRTC from 'recordrtc';
import FFmpeg from '@ffmpeg/ffmpeg';

window.html2canvas = html2canvas;

const elementToRecord = document.queryselector("#elementToRecord");

function download(blob) {
  // https://github.com/muaz-khan/RecordRTC/issues/349
  // const file = new File([blob], 'viewpoint.webm', {
  //    type: 'video/mp4',
  // });

  // If you export mp4 directly,Windows Player cannot play, But you can play it in Chrome
  // If you convert webm to mp4, video is total  black
  // RecordRTC.invokeSaveAsDialog(blob, 'viewpoint.mp4');

  const { createFFmpeg, fetchFile } = FFmpeg;
  const ffmpeg = createFFmpeg({
    // corePath: 'https://unpkg.com/@ffmpeg/core/dist/ffmpeg-core.js',
    log: true,
  });

  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'test', await fetchFile(blob));
  await ffmpeg.run('-i', 'test', 'viewpoint.mp4');

  const data = ffmpeg.FS('readFile', 'viewpoint.mp4');
  const newBlob = new Blob([data.buffer], { type: 'video/mp4' });
  RecordRTC.invokeSaveAsDialog(newBlob, 'viewpoint.mp4');
}

const recorder = new RecordRTC(elementToRecord, {
  type: 'canvas',
  mimeType: 'video/webm;codecs=h264',
  recorderType: RecordRTC.CanvasRecorder,
  disableLogs: true,
  // timeSlice: 30,
  // quality: 10,
  // frameInterval: 99999,
  // videoBitsPerSecond: 128000 * 3,
 });

 recorder.stopRecording(() => {
  const blob = this.recorder.getBlob();
  download(blob);
})