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