Video.js 和 Videojs-record - 要求按下按钮开始录制
Video.js and Videojs-record - requirement to press buttons to start recording
我继承了一个使用 video.js and videojs-record
的项目
在我继承的项目中,应用程序的用户在开始录制之前需要点击两次 - 第一次是在播放器中间的相机图标上,第二次是在圆圈上 'record'左下角的按钮。 (也有第一次接受权限的要求,但我个人并不担心这个要求,因为我理解它的必要性)。
但实际上,对于我的用例,我不想要求用户单击任何内容进行记录。一旦接受权限,我想通过 javascript 以编程方式开始录制。
But even all the examples have the user required to click those two buttons, so I'm starting to think there's no way around it. I looked through all the options 我找不到任何相关信息。我看到函数 start
和 stop
但是当我执行 player.start()
和 player.stop()
时它说未定义。
要启动设备,请使用 player.record().start()
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();
}
AfterViewInit:
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*
,这行对于启动录像机很重要,否则只会启动屏幕共享。
你的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();
}
我继承了一个使用 video.js and videojs-record
的项目在我继承的项目中,应用程序的用户在开始录制之前需要点击两次 - 第一次是在播放器中间的相机图标上,第二次是在圆圈上 'record'左下角的按钮。 (也有第一次接受权限的要求,但我个人并不担心这个要求,因为我理解它的必要性)。
但实际上,对于我的用例,我不想要求用户单击任何内容进行记录。一旦接受权限,我想通过 javascript 以编程方式开始录制。
But even all the examples have the user required to click those two buttons, so I'm starting to think there's no way around it. I looked through all the options 我找不到任何相关信息。我看到函数 start
和 stop
但是当我执行 player.start()
和 player.stop()
时它说未定义。
要启动设备,请使用 player.record().start()
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();
}
AfterViewInit:
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*
,这行对于启动录像机很重要,否则只会启动屏幕共享。
你的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();
}