无法将MediaRecorder数据块添加到数组

时间:2019-06-24 03:05:41

标签: javascript angular webrtc

尝试在Angular中添加具有预定义数组的块时遇到问题。我不断收到错误消息:

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

这没有道理。这是我完整的component.ts,用于显示数组定义。我还在ngAfterViewInit生命周期挂钩中运行this.runMedia()。

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,我在这里缺少什么基本知识?

0 个答案:

没有答案