2019-ый способ доступа к navigator.mediaDevices.getUserMedia ()

Question

В настоящее время я занимаюсь разработкой приложения angular7, разработал его стандартным способом через 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

}