Получение разрешения браузера на использование микрофона

• Предыдущая
• Следующая

После создания пары вы захотите получить разрешение браузера на доступ к микрофону. Мы будем использовать метод getUserMedia() объекта navigator.mediaDevices. Конечная точка getUserMedia() принимает объект constraints, который определяет необходимые разрешения. getUserMedia() — это обещание, которое при успешном выполнении возвращает объект MediaStream. В нашем случае он будет содержать аудио из потока. Если обещание не выполняется успешно, вам нужно перехватить и отобразить ошибку.

1. Добавьте следующий код в конец вашего файла script.js:

   function getLocalStream() {
     navigator.mediaDevices
       .getUserMedia({ video: false, audio: true })
       .then((stream) => {
         window.localStream = stream; // A
         window.localAudio.srcObject = stream; // B
         window.localAudio.autoplay = true; // C
       })
       .catch((err) => {
         console.error(`you got an error: ${err}`);
       });
   }
   

   Давайте объясним самые важные строки:

   • window.localStream = stream прикрепляет объект MediaStream (который мы присвоили stream в предыдущей строке) к окну в качестве localStream.
   • window.localAudio.srcObject = stream устанавливает атрибут src элемента <audio> с идентификатором localAudio на значение MediaStream , возвращаемое обещанием, чтобы он воспроизводил наш поток.
   • window.localAudio.autoplay = true устанавливает атрибут autoplay элемента <audio> в значение true, чтобы аудио воспроизводилось автоматически.

   Предупреждение: Если вы искали информацию в интернете, вы, возможно, наткнулись на navigator.getUserMedia и решили, что можете использовать его вместо navigator.mediaDevices.getUserMedia. Вы ошибаетесь. Первый метод устарел и требует использования колбэков, а также ограничений в качестве аргументов. Последний использует обещание, поэтому вам не нужно использовать колбэки.

2. Попробуйте вызвать вашу функцию getLocalStream, добавив следующую строку в конец вашего кода:

   getLocalStream();
   

3. Обновите приложение, которое должно по-прежнему работать по адресу localhost:8000; должно появиться следующее окно запроса разрешений:

   

4. Подключите наушники перед разрешением использования микрофона, чтобы при последующем отключение звука не было обратной связи. Если окно запроса разрешений не появилось, откройте инструменты разработчика, чтобы проверить наличие ошибок. Убедитесь, что ваш JavaScript-файл правильно связан с вашим файлом index.html.

Вот как всё должно выглядеть вместе:

/* global Peer */

/**
 * Gets the local audio stream of the current caller
 * @param callbacks - an object to set the success/error behavior
 * @returns {void}
 */

function getLocalStream() {
  navigator.mediaDevices
    .getUserMedia({ video: false, audio: true })
    .then((stream) => {
      window.localStream = stream;
      window.localAudio.srcObject = stream;
      window.localAudio.autoplay = true;
    })
    .catch((err) => {
      console.error(`you got an error: ${err}`);
    });
}

getLocalStream();

• Предыдущая
• Следующая