Блог

Я использую getUserMedia для записи аудио от пользователя следующим образом:

 stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  

После выполнения этой строки запрашивается разрешение пользователя на запись звука. Я хочу сделать этот шаг вперед, например, сначала запросить разрешение, и если разрешение не предоставлено, я не показываю пользовательский интерфейс записи. Как мы можем этого добиться?

В обычном коде веб-страницы он работает, чтобы получить поток, а затем остановить его дорожки. Подобная функция должна сделать это за вас.

 async function getUserMediaPermission (constraints) {
    try {
        const stream = await navigator.mediaDevices.getUserMedia (constraints)
        if (stream) {
            stream.tracks.forEach(track => track.stop())
            return true
        }
        return false
    } 
    catch(error) {
        return false
    }
}
  

Затем вы вызываете функцию с таким кодом

  const permissionGranted = getUserMediaPermission ({audio:true})
 if (!permissionGranted) console.log ('Hey! to use this you must grant permission!')
  

Что это делает: он получает поток. await getUserMedia() не завершается, пока пользователь не предоставит разрешение. Вызывается catch{} , если пользователь отказывает в разрешении.

Но в настольных браузерах разрешение является постоянным, поэтому оно уже было предоставлено await getUserMedia() сразу. То же самое верно, если в нем уже было отказано.

Как только у вас есть поток, вы должны закрыть его. Нет никакой stream.close() функции: способ, которым вы «закрываете» поток, — это остановить все его дорожки и позволить stream объекту выйти из области видимости.

Я не знаю, работает ли это в веб-расширениях; Я знаю, что это работает в настольных и мобильных браузерах. Если у вас это работает в вашем веб-расширении, пожалуйста, оставьте комментарий или ответ, в котором говорится, как вы это сделали.