javascript - 屏幕共享 VideoJs-record 中未触发开始/停止共享按钮

Question

我已经集成了 videojs-record 插件以在 Angular 中与音频共享屏幕录制。在进行屏幕录制时，我可以进行屏幕录制，但需要单击两次开始按钮进行录制并且不会触发停止共享按钮。有什么帮助吗？下面是我的代码。

html文件：

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

组件.ts 文件

   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);
    });

    this.player.on('deviceError', () => {
        console.error('device error:', this.player.deviceErrorCode);
    });
  }

  setDefaultSetupOfVideo() {
    this.player = false;

    // save reference to plugin (so it initializes)
    this.plugin = Record;

   // video.js configuration
   this.config = {
    controls: true,
    autoplay: false,
    fluid: false,
    loop: false,
    width: 506,
    height: 380,
    bigPlayButton: true,
    controlBar: {
        volumePanel: true
    },
    plugins: {
        // configure videojs-record plugin
        record: {
          screen: true,
          displayMilliseconds: false,
          audio: true,
          debug: true,
          maxLength: 60,
        }
      }
    };
  }

标签： javascriptangularvideo.jsvideojs-record