save mp4 file in nodejs is saved with some error-CodePudding

I am creating a video/mp4 from a canvas in the front with react:

const canvasResult = document.getElementById(
          "canvasResult"
        ) as HTMLCanvasElement;
const createVideo = () => {
// create video:
        const chunks: any[] = []; // here we will store our recorded media chunks (Blobs)
        const stream = canvasResult.captureStream(); // grab our canvas MediaStream
        const rec = new MediaRecorder(stream); // init the recorder
        // every time the recorder has new data, we will store it in our array
        rec.ondataavailable = (e) => chunks.push(e.data);
        // only when the recorder stops, we construct a complete Blob from all the chunks
        rec.onstop = (e) => {
          setLoadingCanvaGif(100);
          resolve(new Blob(chunks, { type: "video/mp4" }));
        };
        rec.start();
        setTimeout(() => {
          clearInterval(canvaInterval);
          setShowCanva(false);
          rec.stop();
        }, 6000); // stop recording in 6s
}

const blobvideo = await createVideo();
const fileVideo = new File([blobvideo], "video.mp4" , {
          type: blobvideo.type,
        });
let formData = new FormData();
    formData.append("file", file);
    
await axios.post(
      `/uploadFile`,
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    );

and receiving it in the backend with nodejs, I save it like this:

// using express-fileupload 

const file: UploadedFile = req?.files?.file;
const targetPath = path.join(
        __dirname,
        `../../uploads`
      );
const fileName = path.join(targetPath, `/design_${ms}.mp4`); // ms is a ramdon id
await new Promise<void>((resolve, reject) => {
          file.mv(fileName, function (err: any) {
            if (err) {
              throw {
                code: 400,
                message: err,
              };
            }
            resolve();
          });
        });

the problem I have is that when it is saved with the .mp4 extension, the file is not saved correctly, windows shows it like this (case 3):

If i save it as webm

If the .mp4 file (of the case 3) is passed through a video to mp4 converter (https://video-converter.com/es/)

if i save it as mp4

The problem is that when I want to use case 3 (I need it in mp4 and not in webm and I can't manually upload each video to a converter) I can't use it correctly, it generates errors.

note: the three files are played correctly by opening it with vlc or any video player

CodePudding user response：

I believe MediaRecorder in Chrome only supports video/webm mimeType. Your node service will need to convert the file to mp4.

You can use MediaRecorder.isTypeSupported('video/mp4') to check if it is supported.

const getMediaRecorder = (stream) => {
  // If video/mp4 is supported
  if (MediaRecorder.isTypeSupported('video/mp4')) {
    return new MediaRecorder(stream, { mimeType: 'video/mp4' });
  }

  // Let the browser pick default
  return new MediaRecorder(stream);
};