MediaRecorder.stop () не очищает значок записи на вкладке

Я запускаю и останавливаю поток MediaRecorder. Красный значок «записи» появляется на вкладке Chrome при запуске, но не исчезает при остановке.

Значок выглядит так:

введите описание изображения здесь

Мой код выглядит так:

const mediaRecorder = new MediaRecorder(stream);
...
// Recording icon in the tab becomes visible.
mediaRecorder.start();
...
// Recording icon is still visible.
mediaRecorder.stop();

У меня также определен mediaRecorder.onstop обработчик. Он ничего не возвращает и не мешает объекту события.

Как правильно очистить индикатор «запись» для вкладки после запуска и остановки экземпляра MediaRecorder?


javascript google-chrome web-mediarecorder web-audio-api
person Rick Viscomi    schedule 31.05.2017    source источник

Ответы (1)


arrow_upward
40
arrow_downward

Это связано с тем, что этот значок записи относится к getUserMedia потоковой передаче, а не к MediaRecorder.
Когда вы stop MediaRecorder, поток все еще активен.

Чтобы остановить этот поток gUM (или любой другой MediaStream), вы должны вызвать MediaStreamTrack.stop().

stream.getTracks() // get all tracks from the MediaStream
  .forEach( track => track.stop() ); // stop each of them

Fiddle, поскольку stacksnippets не поддерживает gUM даже с https ...

И другой скрипт, доступ к которому осуществляется через MediaRecorder.stream.

person Kaiido    schedule 31.05.2017
comment
Я пробовал этот код, но красный значок все еще виден. Любая идея? - person Harsh Patel; 22.01.2019
comment
@HarshPatel, возможно, вам придется подождать несколько секунд, пока значок не исчезнет. Если он все еще там, это означает, что у вас все еще работает другой MediaStream. - person Kaiido; 22.01.2019
comment
в любом случае, если работает какой-то другой MediaStream, то есть ли способ остановить весь MediaStream? Да, я жду несколько раз, но функция запускается, а красный значок все еще отображается как есть - person Harsh Patel; 22.01.2019
comment
@HarshPatel Я расширил свой комментарий к вашему вопросу. - person Kaiido; 22.01.2019
comment
Мне все еще не удалось удалить этот значок. Вы можете мне в этом помочь? Я использую эту библиотеку, полагаю, она использует API веб-речи - person Harsh Patel; 22.01.2019
comment
Удалось убрать иконку? - person Webwoman; 06.02.2019
comment
Этот ответ должен быть правильным, однако я вполне уверен, что в Chrome есть ошибка, при которой значок застревает после того, как вся запись действительно останавливается (хотя я не смог найти ничего, что могло бы это подтвердить) . Кажется, что значок записи застревает, если входной MediaStream остается работать дольше некоторой произвольной случайной продолжительности. Если я останавливаю MediaStream не более чем через несколько секунд после его запуска, значок почти всегда исчезает, и у него тем выше вероятность зависания, чем дольше остается MediaStream. - person John Weisz; 09.12.2019
comment
Интересно, является ли это функцией безопасности, потому что при использовании я замечаю, что если я продолжу запись в течение нескольких минут, а затем остановлюсь, значок немедленно исчезнет. Однако, если я записываю всего несколько секунд, а затем останавливаюсь, значок ненадолго задерживается. Возможно, это функция безопасности, чтобы веб-сайты не пытались скрытно делать короткие снимки с камеры. - person Dave Patrick; 08.02.2020
comment
Это устранило проблему для меня в последних версиях Chromium и Firefox. - person Will59; 09.10.2020
comment
Это решение сработало для меня, но каким-то образом обратный вызов успеха getUserMedia вызывается дважды, и поэтому в моем случае из потока были созданы два экземпляра MediaRecorder. Поэтому мне пришлось затолкать их в массив и при остановке текущего используемого, затем перебрать массив и остановить треки обоих потоков с помощью ответа. После этого значок очистился. Надеюсь, это сэкономит кому-то несколько часов времени - person ronatory; 27.03.2021
comment
@ronatory, если позволите, вам, вероятно, следует выяснить, почему вам делают два звонка. Одновременный запрос двух медиапотоков вызывает проблемы позже (например, если вы хотите применить разные ограничения после запроса), а запуск двух MediaRecorders, записывающих одно и то же, просто тратит впустую ЦП и память. - person Kaiido; 28.03.2021
comment
@Kaiido Большое спасибо за то, что снова обратил внимание на то, почему было сделано два звонка. У меня действительно были проблемы из-за реализации таких функций, как возобновление / пауза, поэтому я снова посмотрел на свой код. В конце концов, когда я начал запись, я вызвал getUserMedia () два раза. Один раз в операторе if и второй раз, когда я хотел получить доступ к потоку через обратный вызов успеха. См. Следующий комментарий. - person ronatory; 01.04.2021
comment
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) { // do whatever you want with the stream })} Я удалил вызов в операторе if, и теперь выполняется только один вызов, который имеет смысл. - person ronatory; 01.04.2021