How to convert webm blob to mp4 blob in angular 11?

Question

I Have recorded the video using MediaRecorder after recording its storing that blob in webm format but after downloading the video its not supporting to share as media.

I tried ffmpeg but its not working showing below error

Error: ./node_modules/@ffmpeg/ffmpeg/src/browser/fetchFile.js 29:51
Module parse failed: Unexpected token (29:51)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|     /* From remote server/URL */
|     } else {
>       const res = await fetch(new URL(_data, import.meta.url).href);
|       data = await res.arrayBuffer();
|     }

Error: ./node_modules/@ffmpeg/ffmpeg/src/browser/getCreateFFmpegCore.js 33:52
Module parse failed: Unexpected token (33:52)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|       throw Error('corePath should be a string!');
|     }
>     const coreRemotePath = new URL(_corePath, import.meta.url).href;
|     const corePath = await toBlobURL(
|       coreRemotePath,

Error: ./node_modules/@ffmpeg/ffmpeg/src/browser/defaultOptions.js 7:68
Module parse failed: Unexpected token (7:68)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|  */
| const corePath = typeof process !== 'undefined' && process.env.NODE_ENV === 'development'
>   ? new URL('/node_modules/@ffmpeg/core/dist/ffmpeg-core.js', import.meta.url).href
|   : `https://unpkg.com/@ffmpeg/core@${pkg.devDependencies['@ffmpeg/core'].substring(1)}/dist/ffmpeg-core.js`;

Im not able to resolve this error.

here is the package.json

{
  "name": "convert",
  "version": "1.0.0",
  "private": true,
  "description": "Motor",
  "scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng serve --port 4300",
    "test": "ng test",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "e2e": "ng e2e"
  },
  "keywords": [],
  "author": "",
  "dependencies": {
    "@angular/animations": "~11.2.14",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/localize": "^11.2.14",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~11.2.14",
    "@ffmpeg/ffmpeg": "^0.11.6",
    "@ng-bootstrap/ng-bootstrap": "4.2.1",
    "@ngui/auto-complete": "^3.0.0",
    "angular-in-memory-web-api": "~0.8.0",
    "angular2-toaster": "^8.0.0",
    "core-js": "2.6.5",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.17",
    "mux.js": "^6.3.0",
    "ng-circle-progress": "1.6.0",
    "ng2-toastr": "^4.1.2",
    "ngui-angular2-auto-complete": "^0.1.1",
    "ngx-device-detector": "^2.0.10",
    "ngx-spinner": "^7.2.0",
    "rxjs": "6.6.7",
    "rxjs-compat": "^6.0.0-rc.0",
    "systemjs": "3.1.0",
    "tslib": "^2.0.0",
    "video.js": "^8.3.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.13",
    "@angular/cli": "^11.2.13",
    "@angular/compiler-cli": "^11.2.14",
    "@types/dom-mediacapture-record": "^1.0.16",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "canonical-path": "1.0.0",
    "codelyzer": "^6.0.0",
    "concurrently": "^4.1.0",
    "jasmine-core": "~3.6.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "^2.0.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "lite-server": "^2.4.0",
    "lodash": "^4.16.4",
    "protractor": "~7.0.0",
    "raw-loader": "^4.0.2",
    "rimraf": "^2.6.3",
    "tslint": "~6.1.0",
    "typescript": "4.0.7"
  },
  "repository": {}
}

and here is ffmpeg code

const ffmpeg = createFFmpeg({
      log: true,
    });