微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决屏幕共享 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 举报,一经查实,本站将立刻删除。