I am currently working on a Vue3.js web project using TypeScript. I am facing an issue where I need to save the user's camera and microphone data after they click a button. Running my project with node version 16.14.0, I encountered a problem with MediaRecorder not functioning properly.
Prior to running the project, there are no syntax errors detected. However, when I run the project, Visual Studio Code shows errors stating "cannot find name 'MediaRecorder' & 'BlobEvent'" I have looked for alternative solutions, but the general consensus is that MediaRecorder must be used. How can I resolve this and make it functional?
Here is my tsconfig.json configuration:
{
"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"]
}
This is how my package.json file looks like:
{
"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": {
// List of dependencies here...
},
"devDependencies": {
// List of devDependencies here...
}
}
The errors I am encountering specifically point out issues related to 'MediaRecorder' and 'BlobEvent':
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);
Hoping to find a solution as many others did not face similar challenges...