如何在Angular 6中使用RecordRTC录制屏幕

时间:2018-12-06 11:47:02

标签: angular angular6 recordrtc

我正在尝试使用以下代码段录制屏幕

<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之后,以下结果进入了控制台

enter image description here

请指导,我在哪里犯错?

0 个答案:

没有答案