Как записать экран с помощью RecordRTC в Angular 6 - PullRequest
Новая
       69

Как записать экран с помощью RecordRTC в Angular 6

0 голосов
/ 06 декабря 2018

Я пытаюсь записать экран со следующим фрагментом кода 

<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, в консоль

* 1007 приходят следующие результаты*enter image description here

Пожалуйста, руководство, где я делаю ошибку?

...