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

问题描述

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

HTML 文件：

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

Component.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,}
      }
    };
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）