Cannot find name 'MediaRecorder' inTypeScript

I am building vue3js web typescript project. And I need to save user's camera and microphone after when user click the button. My node version is 16.14.0 and MediaRecorder is not working.

There is not syntax error before running project but vscode says "cannot find name 'MediaRecorder' && cannot find name 'BlobEvent'.." when I run my project. I search another alternatives but everybody write that "there is not alternative, you have to use MediaRecorder." How can i make runable this?

tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

package.json:

{
  "name": "ai-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "rtl": "webpack --config webpack-rtl.config.js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@fullcalendar/core": "^5.9.0",
    "@fullcalendar/daygrid": "^5.9.0",
    "@fullcalendar/interaction": "^5.9.0",
    "@fullcalendar/list": "^5.9.0",
    "@fullcalendar/timegrid": "^5.9.0",
    "@fullcalendar/vue": "^5.9.0",
    "@fullcalendar/vue3": "^5.9.0",
    "@popperjs/core": "^2.9.1",
    "@soerenmartius/vue3-clipboard": "^0.1.2",
    "@tinymce/tinymce-vue": "^4.0.4",
    "@types/object-path": "^0.11.0",
    "@vueform/multiselect": "^1.2.5",
    "@yaireo/tagify": "^3.23.1",
    "animate.css": "^4.1.1",
    "apexcharts": "3.23.1",
    "array-sort": "^1.0.0",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.18.1",
    "bootstrap": "5.0.1",
    "bootstrap-icons": "^1.4.0",
    "clipboard": "^2.0.6",
    "css-loader": "^5.2.0",
    "dropzone": "^5.7.2",
    "element-plus": "^1.0.2-beta.52",
    "i18n": "^0.13.3",
    "line-awesome": "^1.3.0",
    "nouislider": "^14.6.3",
    "object-path": "^0.11.4",
    "popper.js": "^1.16.1",
    "prism-themes": "^1.5.0",
    "prismjs": "^1.23.0",
    "quill": "^1.3.6",
    "rtlcss-webpack-plugin": "^4.0.6",
    "socicon": "^3.0.5",
    "sweetalert2": "^9.10.12",
    "vee-validate": "^4.2.1",
    "vue": "^3.0.0",
    "vue-axios": "^3.2.2",
    "vue-clipboard3": "^1.0.1",
    "vue-currency-input": "^2.0.2",
    "vue-i18n": "^9.1.6",
    "vue-inline-svg": "^3.0.0-beta.2",
    "vue-prism-component": "^1.2.0",
    "vue-router": "^4.0.0-0",
    "vue3-apexcharts": "^1.2.1",
    "vue3-clipboard": "^1.0.0",
    "vue3-highlightjs": "^1.0.5",
    "vuex": "^4.0.0-0",
    "webpack-messages": "^2.0.4",
    "webpack-rtl-plugin": "^2.0.0",
    "yup": "^0.32.8"
  },
  "devDependencies": {
    "@types/dom-mediacapture-record": "^1.0.19",
    "@types/prismjs": "^1.16.2",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "1.32.1",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vuex-module-decorators": "^1.0.1",
    "webpack-cli": "^4.7.2"
  }
}

And my errors:

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.111.8:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

ERROR in src/ui/views/crafted/authentication/basic-flow/ChatWithAI.vue:417:35
TS2552: Cannot find name 'MediaRecorder'. Did you mean 'mediaRecorder'?
    415 |         });
    416 |
  > 417 |         const mediaRecorder = new MediaRecorder(stream, options);
        |                                   ^^^^^^^^^^^^^
    418 |         let audioChunks: Blob[];

ERROR in src/ui/views/crafted/authentication/basic-flow/ChatWithAI.vue:421:65
TS2304: Cannot find name 'BlobEvent'.
  > 421 |         mediaRecorder.addEventListener("dataavailable", (event: BlobEvent) => {
        |                                                                 ^^^^^^^^^
    422 |           const blobData = event.data;
    423 |           if (blobData && blobData.size > 0) {
    424 |             audioChunks.push(blobData);

I wish these commands worked, no one had such problems...

I've tried update my project's typescript version and solved the problem.

Just tried:

npm i typescript@4.5.2    

This is working.