angular 9 video record is not supporting

[dineshmaths1]

i am using angular 9

import videojs from 'video.js';
import * as RecordRTC from 'recordrtc';
import * as Record from 'videojs-record/dist/videojs.record.js';
import * as WaveSurfer from 'wavesurfer.js';
import * as MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
WaveSurfer.microphone = MicrophonePlugin;
import * as Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';

angular.json
   "customWebpackConfig": {
            "path": "custom-webpack.config.js",
            "mergeStrategies": {
              "externals": "replace"
            }
          },

custom-webpack.config.js file

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
    entry: 'src/main.ts',
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            videojs: 'video.js',
            WaveSurfer: 'wavesurfer.js',
            RecordRTC: 'recordrtc'
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader']
            },
            {
                test: /\.(html|css)$/,
                use: 'raw-loader'
            }
        ]
    },
    plugins: [
        new ProvidePlugin({
            videojs: 'video.js/dist/video.cjs.js',
            RecordRTC: 'recordrtc'
        }),
        new HtmlWebpackPlugin({ template: 'src/index.html' })
    ]
}

i am getting this error

WARNING in ./node_modules/RecordRTC/RecordRTC.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/apple/Documents/audio/node_modules/RecordRTC/RecordRTC.js
    Used by 1 module(s), i. e.
    /Users/apple/Documents/audio/node_modules/videojs-record/dist/videojs.record.js
* /Users/apple/Documents/audio/node_modules/recordrtc/RecordRTC.js
    Used by 3 module(s), i. e.
    /Users/apple/Documents/audio/node_modules/@ngtools/webpack/src/index.js!/Users/apple/Documents/audio/src/app/audio/audio.component.ts

ERROR in ./node_modules/videojs-record/dist/videojs.record.js
Module not found: Error: Can't resolve 'videojs' in '/Users/apple/Documents/audio/node_modules/videojs-record/dist'

package.json

"dependencies": {
    "@angular/animations": "~9.1.1",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "@types/video.js": "^7.3.10",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "videojs-record": "^4.0.0",
    "videojs-wavesurfer": "^3.2.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^9.2.0",
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }

[pyrchJ]

I have exactly the same issue as @dineshmaths1 with Angular 9

[thijstriemstra]

I found a solution for this issue, stay tuned.

[thijstriemstra]

Fixed in v4.1.0.