Web MediaAPI-MediaRecorder：在父类作用域而不是内联回调中添加具有处理程序的AddEventListener

Question

我有一个用Angular 8编写的音频处理“主”类。在其Init（）中，我正在初始化MediaRecorder。我正在为“ datavailable”事件添加一个侦听器。该侦听器函数需要从“ master”类调用我的实用程序函数。也就是说，它必须从回调转到父类的作用域。

代码：公共音频处理器（事件）{handledata（event.data）;}

LocalStreamInit()
{

  ...//mediarecorder create function and start function
    this.localStream.init(() => {
      //..some more init code 
        client.on('stream-published', function (evt) {
            console.log("Publish local stream successfully");
           this.mediaRecorder.addEventListener("dataavailable",  (event) => 
           {
             console.log("callbackfn: data vailable");
            return function () {
                   console.log("Calling this.audioprocessor(event)");
                   return this.audioprocessor(event);
                            }
           });

问题：

已触发dataavailable事件。但是内部作用域部分没有被调用。

 return function () {
 console.log("Calling this.audioprocessor(event)");
return this.audioprocessor(event);
}

我根据文章https://www.pluralsight.com/guides/javascript-callbacks-variable-scope-problem尝试了此方法。

[请提出如何调用我的类函数的方法，而不必将所有内容都放在内联回调函数中，这对我来说并不实际。

编辑：这是我的整体类和回调结构。 AudioProcessingUtility类是我的“外部”类。它具有mediaRecorder对象成员，该成员是标准MediaStreaming API的实例。该类还具有2个功能-a。 StreamingInit（）b。 audoProcessor（）。里面StreaminingInit（），我具有流就绪事件的回调。流准备好后->我需要添加事件监听器以获取可用数据。一旦数据可用->我需要调用'audioprocessor（）函数。

因此，我有2个级别的回调。在callback里面，我需要添加事件回调的第二层。在此第二级回调中，我需要能够调用顶级类成员函数。

Answer 1

不确定是否需要在回调中使用return。考虑一下：

LocalStreamInit() {
  this.mediaRecorder.addEventListener("dataavailable", event => {
    console.log("callbackfn: data vailable");
    console.log("Calling this.audioprocessor(event)");
    this.audioprocessor(event);
  });
}

一旦触发callback，它将触发this.audioprocessor。由于您使用的是箭头功能，因此this的上下文将为class