我正在尝试使用以下代码段录制屏幕
<canvas #canvas></canvas>
<video #video controls></video>
<div class="row">
<div class="col d-flex justify-content-between">
<button mat-raised-button color="primary" (click)="startRecording()">Record</button>
<button mat-raised-button color="warn" (click)="stopRecording()">Stop</button>
</div>
</div>
export class ScreenRecordComponent implements OnInit {
@ViewChild('canvas') canvasRef: ElementRef
@ViewChild('video') videoRef: ElementRef
constructor() {
}
canvas: HTMLCanvasElement
video: HTMLVideoElement
recorder: CanvasRecorder
ngOnInit() {
this.video = this.videoRef.nativeElement
this.canvas = this.canvasRef.nativeElement
this.canvas.width = 640
this.canvas.height = 460
}
startRecording() {
let CanvasRecorder = RecordRTC.CanvasRecorder
this.recorder = new CanvasRecorder(this.canvas, { disableLogs: true });
this.recorder.record()
}
stopRecording() {
this.recorder.stop((blob: Blob) => {
console.log(blob)
console.log(URL.createObjectURL(blob))
this.video.src = URL.createObjectURL(blob)
});
}
}
当我按下start
按钮,然后过一会儿stop
之后,以下结果进入了控制台
请指导,我在哪里犯错?