Как вручную остановить поток getDisplayMedia для завершения захвата экрана?

Question

Мне интересно получить от пользователя снимок экрана , и я использую API getDisplayMedia для захвата экрана пользователя:

const constraints = { video: true, audio: false };

if (navigator.mediaDevices["getDisplayMedia"]) {
  navigator.mediaDevices["getDisplayMedia"](constraints).then(startStream).catch(error);
} else {
  navigator.getDisplayMedia(constraints).then(startStream).catch(error);
}

При выполнении браузер запрашивает у пользователя, хотят ли они поделиться своим дисплеем. После того, как пользователь принимает приглашение, предоставленный обратный вызов получает MediaStream. Для визуализации я привязываю его непосредственно к элементу:

  const startStream = (stream: MediaStream) => {
    this.video.nativeElement.srcObject = stream;
  };

Это пока просто и очень эффективно. Тем не менее, меня интересует только один кадр , и поэтому я хотел бы вручную остановить поток, как только я его обработаю.

Я попытался удалитьvideo элемент из DOM, но Chrome продолжает отображать сообщение о том, что экран в данный момент захвачен. Таким образом, это затронуло только элемент видео, но не сам поток:

Я смотрел статью API Capture Screen на MDN но не смог найти никаких подсказок о том, как остановить поток.

Как правильно завершить поток, чтобы приглашение также остановилось?

Answer 1

Вместо остановки самого потока вы можете остановить его дорожки .
Итерировать по дорожкам с помощью метода getTracks и вызывать stop() для каждой из них:

stream.getTracks()
  .forEach(track => track.stop())

Как только все дорожки останавливаются, приглашение Chrome также исчезает.