Video.js 和 Videojs-record - 要求按按钮开始录制

Question

我继承了一个使用 video.js 和 videojs-record

的项目

在我继承的项目中，应用程序的用户需要在录制开始之前单击两次 - 首先单击播放器中间的相机图标，然后单击左下角的圆形“录制”按钮。 （还有一个要求是第一次接受权限，但我个人并不担心这个要求，因为我理解它的必要性）。

但实际上，对于我的用例，我不想要求用户单击任何内容来记录。一旦接受权限，我想开始通过 JavaScript 以编程方式录制。

但即使所有示例都要求用户单击这两个按钮，所以我开始认为没有办法解决它。我浏览了所有的选项，但找不到任何与此相关的选项。我看到了函数

start

和

stop

，但是当我看到

player.start()

和

player.stop()

时，它说未定义。

Answer 1

要启动设备，请使用player.record().start()

Answer 2

HTML：

<div class="video-js">
    <button (click)="startRecording()" class="btn btn-primary">Start</button>
    <button (click)="stopRecording()" class="btn btn-warn">Stop</button>

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

共享屏幕并启动录音机：

startRecording(){
        this.player.record().getDevice();
    }

停止录音机：

stopRecording(){
        this.player.record().stop();
    }

ViewInit 之后：

ngAfterViewInit() {
      ....

      // device is ready
      this.player.on('deviceReady', () => {
        console.log('device is ready!');
        this.player.record().start(); // <-- IMPORTANT*
      });
  
      // 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', () => {
        // show save as dialog
        console.log('finished recording: ', this.player.recordedData);
        this.player.record().saveAs({'video': 'my-video-file-name.webm'});
    });
  
      ....
    }

我指定了一行为

IMPORTANT*

，这一行对于启动录音机很重要，否则只会启动屏幕共享。

Answer 3

您的 HTML

<button class="btn btn-primary" (click)="startRecord()">Start</button>
<button (click)="camOn()" class="btn btn-primary">i am ready</button>
<button (click)="stopRecording()" class="btn btn-warn">Stop</button>

TS/JS

startRecord() {
this.player.record().start();
}
camOn() {
this.player.record().getDevice();
}
stopRecording() {
this.player.record().stop();
}