如何使用ReportRtc / WebRTC在Angular 4中将屏幕和音频一起录制？

Question

我正在做一个项目。主要要求是以视频格式记录屏幕以及音频记录。并能够记录不同的屏幕，例如桌面/正在运行的应用程序（例如Power Point，Excel）。我已经使用ReportRTC完成了此操作。我没有收到任何错误，但录制无法正常工作。它显示了一个视频空白框和按钮。

我的HTML代码：

    <div class="row">
        <div class="col-xs-12">
            <button md-raised-button color="primary" (click)="startRecording()"> Record </button>
            <button md-raised-button color="primary" (click)="stopRecording()"> Stop</button>
            <button md-raised-button color="primary" (click)="download()"> Download</button>
        </div>
    </div>    

和ts代码

   import {
  Component,
  OnInit,
  ViewChild, 
  AfterViewInit
} from '@angular/core';

import * as RecordRTC from 'recordrtc';
@Component({
  selector: 'recordrtc',
  templateUrl: './record-rtc.component.html',
})
enter code here

private stream: MediaStream;
private recordRTC: any;

@ViewChild('video') video;

constructor() {
  // Do stuff
}

ngAfterViewInit() {
  // set the initial state of the video
  let video: HTMLVideoElement = this.video.nativeElement;
  video.muted = false;
  video.controls = true;
  video.autoplay = false;
}

toggleControls() {
  let video: HTMLVideoElement = this.video.nativeElement;
  video.muted = !video.muted;
  video.controls = !video.controls;
  video.autoplay = !video.autoplay;
}

successCallback(stream: MediaStream) {
  var options = {
    mimeType: 'video/webm', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
    audioBitsPerSecond: 128000,
    videoBitsPerSecond: 128000,
    bitsPerSecond: 128000 // if this line is provided, skip above two
  };
  this.stream = stream;
  this.recordRTC = RecordRTC(stream, options);
  this.recordRTC.startRecording();
  let video: HTMLVideoElement = this.video.nativeElement;
  video.src = window.URL.createObjectURL(stream);
  this.toggleControls();
}

errorCallback() {
  //handle error here
}

processVideo(audioVideoWebMURL) {
  let video: HTMLVideoElement = this.video.nativeElement;
  let recordRTC = this.recordRTC;
  video.src = audioVideoWebMURL;
  this.toggleControls();
  var recordedBlob = recordRTC.getBlob();
  recordRTC.getDataURL(function(dataURL) {});
}

startRecording() {
  debugger;
  let mediaConstraints = {
    video: {
      width: 1280,
      height: 720
    },
    audio: true
  };
  navigator.mediaDevices
    .getUserMedia(mediaConstraints)
    .then(this.successCallback.bind(this), this.errorCallback.bind(this));
}

stopRecording() {
  let recordRTC = this.recordRTC;
  recordRTC.stopRecording(this.processVideo.bind(this));
  let stream = this.stream;
  stream.getAudioTracks().forEach(track => track.stop());
  stream.getVideoTracks().forEach(track => track.stop());
}

download() {
  this.recordRTC.save('video.webm');
}
}