1

我目前正在开发一个 angular7-app，通过 CLI 以标准方式创建它并开始编码。现在我想录制一些在现代浏览器中不难的音频。我正在使用getUserMedia(). 现在问题来了：zone.js 捕获了对then()回调的所有调用，并且不允许执行内部的自定义代码。

但是：有 zone.js 提供的补丁，所以这个特殊的回调被称为：https ://github.com/angular/zone.js/blob/master/dist/zone-patch-user-media.js

不幸的是，这指的是getUserMedia()（https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia）的折旧实现。所以这个脚本不起作用。我尝试更改它，但没有任何效果。之所以调用补丁，是因为console.log()已显示并且在调试器中，我可以通过该函数。我认为，这可能是执行回调的一个小改动。在调试器中，回调再次被 zone.js 中的一个函数捕获，正如我假设的那样，当补丁工作时不应调用该函数。我的实现与此处相同（https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia）：

navigator.mediaDevices.getUserMedia(constraints).then(
function(stream) {
    /* use the stream */ 
}).catch(
function(err) { 
    /* handle the error */ 
});

那么，目前让回调起作用的方法是什么？还是我理解错了？或者我应该使用 npm 中的一些库来录制音频？

4

1 回答 1

3

据我所知，zone.js如果与方法一起使用应该不会引起问题navigator，因为它们是众所周知的并且已正确修补。顺便说一句，如果你确定你说的话，你仍然可以使用zone.runOutsideAngular从一个区域出去：

constructor(private zone: NgZone) { }

yourMethod() {
  this.zone.runOutsideAngular(() => {
    navigator.mediaDevices.getUserMedia(constraints)
      .then(stream => console.log(stream))
      .catch(err => console.error(err));
  });

}

如果你想重新进入一个区域，你可以调用：

this.zone.run(() => {
  // again inside a zone
});

但请注意，仅当您想继续异步流程时才需要它。同步代码将继续在区域内执行：

yourMethod() {
  // this is inside a zone

  this.zone.runOutsideAngular(() => {
    navigator.mediaDevices.getUserMedia(constraints)
      .then(stream => {

        // this is outside a zone

        this.zone.run(() => {

           // and again inside a zone

        });
      })
      .catch(err => console.error(err));
  });

 // this is still inside a zone

}
于 2019-05-17T07:54:13.000 回答