I've been trying to get the data from the media stream of a microphone when a user speaks into it. My goal is to continually send that data over to a web server as until the user closes the mic by a button. I've tried a lot like this from mdn unfortunately its in javascript and I try to rewrite it in typescript which I think is where my problem arises. At the moment this is what I have mediaRecorder?: MediaRecorder chunks: any = [] dest?: MediaStreamAudioDestinationNode constraints = { audio:true, video: false } async record_audio() { if (navigator.mediaDevices){ var $this = this; navigator.mediaDevices.getUserMedia(this.constraints).then((stream)=>{ this.mediaRecorder = new MediaRecorder(stream) this.mediaRecorder.start(); //this.mediaRecorder.ondataavailable = this.pushChunks; this.mediaRecorder.ondataavailable = function (e) { console.log("pushing chunk") $this.chunks.push(e.data); }; console.log('starting recorder...') }) } else { alert('getUserMedia not supported.'); } } The method is called but the mediaRecorder.ondataavailable is never called. I don't know if the method gets destroyed after it exits or something. How do I continually get the data in this stream so I can upload it to a web server? Continue reading...
