Не могу добавить куски данных MediaRecorder в массив

Question

У меня проблема при попытке добавить чанки с предопределенным массивом в Angular. Я получаю сообщение об ошибке:

Uncaught TypeError: Cannot read property 'push' of undefined
    at MediaRecorder.push../src/app/webrtc/webrtc.component.ts.WebrtcComponent.handleDataAvailable

Что не имеет смысла. Вот мой полный component.ts, чтобы показать, что определение массива. Я также запускаю this.runMedia () в хуке жизненного цикла ngAfterViewInit.

declare var MediaRecorder: any;
@Component({
  selector: 'app-webrtc',
  templateUrl: './webrtc.component.html',
  styleUrls: ['./webrtc.component.scss']
})
export class WebrtcComponent implements AfterViewInit, OnInit {
  constraints; video; mediaRecorder; options;
  private recordedChunks: any[] = [];
  streams: string[] = [];
  audioChunks: any[];
  videoChunks: any[];

  constructor(private signalHub: WebRTCServiceService) {
    this.constraints = { audio: true, video: true };
  }

  ngOnInit() {
    this.video = document.getElementsByClassName('video')[0];
  }

  ngAfterViewInit() {
    this.runMedia();
  }

  successCallback(stream) {
    if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
      this.options = { mimeType: 'video/webm; codecs=vp9' };
    } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
      this.options = { mimeType: 'video/webm; codecs=vp8' };
    } else {
      // ...
    }
    this.video.srcObject = stream;
    this.video.play();
    this.mediaRecorder = new MediaRecorder(stream, this.options);
    this.mediaRecorder.ondataavailable = this.handleDataAvailable;
    this.mediaRecorder.start(3000);
  }

  stopVideo() {
    this.mediaRecorder.stop();
  }
  handleDataAvailable(blob) {
    // POST/PUT "Blob" using FormData/XHR2
    console.log(blob);
    //this.signalHub.sendStream(blob);
    this.recordedChunks.push(blob.data);
  }

  errorCallback(error) {
    console.log('navigator.getUserMedia error: ', error);
  }

  runMedia() {

    this.streams.push("f");
    navigator.mediaDevices.getUserMedia(this.constraints)
      .then((stream) => {
        this.successCallback(stream);
      })
      .catch(this.errorCallback);
  }

}

Я погуглил, чтобы убедиться, как инициализировать массив в Angular на всякий случай. Все еще не изменилось. Я также выдвинул любой массив за пределами handledataAvailable, чтобы убедиться. Что мне здесь не хватает в WebRTC MediaRecorder?