我已经集成了 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,
}
}
};
}