Question

我目前正在开发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的一些库来录制音频？

Answer 1

据我所知，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年访问navigator.mediaDevices.getUserMedia（）的方式

1 个答案: