Can't add chunks of MediaRecorder data to array

Question

I'm having a problem when trying to add chunks with a predefined array in Angular. I keep getting an error:

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

Which doesn't make sense. Here is my full component.ts to show that the array definition. I also run this.runMedia() in the ngAfterViewInit lifecycle hook.

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);
  }

}

I googled just to make sure how to initialize an array in Angular just in case. Still hasn't changed. I also pushed to any array outside of handledataAvailable to make sure. What fundamental thing am I missing here about WebRTC MediaRecorder?

`this.mediaRecorder.ondataavailable = this.handleDataAvailable.bind(this);` should help with binding the right context `this` — yurzui, Jun 24 '19 at 03:07
This worked. Thank you. It's stuff like this that throws me off about WebRTC. But looking at your profile brings the question whether it's angular specific or not. Why did this work? — JD333, Jun 24 '19 at 03:10
Nope, it's javascript specific thing. You can go over this thread https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback for better understanding — yurzui, Jun 24 '19 at 03:16

Can't add chunks of MediaRecorder data to array

0 Answers0