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

Question

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

<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 в консоль пришли следующие результаты

h ttps://stackru.com/images/6d408cd0fd7cca82f689209e5f60687c39114062.png

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

Answer 1

Это служба записи экрана, из вашего компонента вы можете использовать предоставленные методы, вы можете использовать только startRecording, stopRecording и в вашем компоненте getRecordedBlog для подписки или .then для ответа blob

      import * as RecordRTC from 'recordrtc';
import * as moment from 'moment';
import { Observable, Subject } from 'rxjs';
import { isNullOrUndefined } from 'util';

interface RecordedVideoOutput {
  blob: Blob;
  url: string;
  title: string;
}

@Injectable({ providedIn: 'root' })
export class ScreenRecordingService {
  private stream: any;
  private recorder: any;
  private interval: any;
  private startTime: any;
  private _stream = new Subject<MediaStream>();
  private _recorded = new Subject<RecordedVideoOutput>();
  private _recordedUrl = new Subject<string>();
  private _recordingTime = new Subject<string>();
  private _recordingFailed = new Subject<string>();

  getRecordedUrl(): Observable<string> {
    return this._recordedUrl.asObservable();
  }

  getRecordedBlob(): Observable<RecordedVideoOutput> {
    return this._recorded.asObservable();
  }

  getRecordedTime(): Observable<string> {
    return this._recordingTime.asObservable();
  }

  recordingFailed(): Observable<string> {
    return this._recordingFailed.asObservable();
  }

  getStream(): Observable<MediaStream> {
    return this._stream.asObservable();
  }

  startRecording() {
    var browser = <any>navigator;
    if (this.recorder) {
      // It means recording is already started or it is already recording something
      return;
    }

    this._recordingTime.next('00:00');

    return new Promise((resolve, reject) => {
      browser.mediaDevices
        .getDisplayMedia({
          video: {
            displaySurface: 'monitor', // monitor, window, application, browser
            logicalSurface: true,
            cursor: 'always', // never, always, motion
          },
        })
        .then((screenStream: any) => {
          navigator.mediaDevices.getUserMedia({ audio: true }).then((mic) => {
            screenStream.addTrack(mic.getTracks()[0]);
            this.stream = screenStream;
            this.record();
            resolve(this.stream);
          });
        })
        .catch((error: any) => {
          this._recordingFailed.next();
          reject;
        });
    });
  }

  abortRecording() {
    this.stopMedia();
  }

  private record() {
    this.recorder = new RecordRTC(this.stream, {
      type: 'video',
      mimeType: 'video/webm',
      bitsPerSecond: 44000,
    });
    this.recorder.startRecording();
    this.startTime = moment();
    this.interval = setInterval(() => {
      const currentTime = moment();
      const diffTime = moment.duration(currentTime.diff(this.startTime));
      const time =
        this.toString(diffTime.minutes()) +
        ':' +
        this.toString(diffTime.seconds());
      this._recordingTime.next(time);
      this._stream.next(this.stream);
    }, 500);
  }

  private toString(value: any) {
    let val = value;
    if (!value) {
      val = '00';
    }
    if (value < 10) {
      val = '0' + value;
    }
    return val;
  }

  stopRecording() {
    if (this.recorder) {
      this.recorder.stopRecording(this.processVideo.bind(this));
      //this.processVideo.bind(this.recorder)
      //this.processVideo(this.recorder);
      //this.stopMedia();
    }
  }

  private processVideo(audioVideoWebMURL: any) {
    // console.log(audioVideoWebMURL);
    const recordedBlob = this.recorder.getBlob();
    this.recorder.getDataURL(function (dataURL: any) {});
    const recordedName = encodeURIComponent(
      'video_' + new Date().getTime() + '.webm'
    );
    this._recorded.next({
      blob: recordedBlob,
      url: audioVideoWebMURL,
      title: recordedName,
    });
    this.stopMedia();
    //this.recorder.save(recordedName);
  }

  private stopMedia() {
    if (this.recorder) {
      this.recorder = null;
      clearInterval(this.interval);
      this.startTime = null;
      if (this.stream) {
        this.stream.getAudioTracks().forEach((track: any) => track.stop());
        this.stream.getVideoTracks().forEach((track: any) => track.stop());
        this.stream.stop();
        this.stream = null;
      }
    }
  }
}