Start/Stop Sharing button is not triggered in Screen Sharing VideoJs-record in Angular 10

[maneeshrao66]

I have integrated the videojs-record plugin to share the screen recording with audio in Angular. While doing the recording of screen, I am able to do screen recording but need to click on Start button twice for recording and Stop Sharing button is not triggered. any help? Below is my code.

 <video id="video_{{idx}}" class="video-js vjs-default-skin text-center" playsinline></video>

idx = 'clip1';
   config: any;
   player: any;
   plugin: any;

  constructor() {
     this.setDefaultSetupOfVideo();
  }
  ngAfterViewInit() {
    this.loadVideoSetup();
  }

  loadVideoSetup() {
    // ID with which to access the template's video element
    const el = 'video_' + this.idx;

    // setup the player via the unique element ID
    this.player = videoJs(document.getElementById(el), this.config, () => {
        console.log('player ready! id:', el);

        // print version information at startup
        const msg = 'Using video.js ' + videoJs.VERSION +
            ' with videoJs-record ' + videoJs.getPluginVersion('record') +
            ' and recordrtc ' + RecordRTC.version;
        videoJs.log(msg);
    });

    // device is ready
    this.player.on('deviceReady', () => {
        console.log('device is ready!');
    });

    // user clicked the record button and started recording
    this.player.on('startRecord', () => {
        console.log('started recording!');
    });

    // user completed recording and stream is available
    this.player.on('finishRecord', () => {
        // recordedData is a blob object containing the recorded data that
        // can be downloaded by the user, stored on server etc.
        console.log('finished recording: ', this.player.recordedData);
    });

    // error handling
    this.player.on('error', (element, error) => {
        console.warn(error);
    });