Доступ к микрофону с помощью getUsermedia на iOS Safari

Question

Я пытаюсь получить доступ к микрофону в iOS Safari с помощью getUserMedia. Ниже вы можете найти фрагмент моего кода.

if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}

if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {
    // First get ahold of the legacy getUserMedia, if present
    let getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    // Some browsers just don't implement it - return a rejected promise with an error
    // to keep a consistent interface
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }
}

navigator.mediaDevices.getUserMedia({
  audio: true
}).then(function(stream) {
  successCallBack(.......);
}).catch(function(error) {
  debug.log(error);
  ..........
});

Тем не менее, обещание всегда ловит ошибку, а точнее - OverConstraintError.

{message: "Invalid constraint", constraint: ""}

Это поведение уникально для iOS Safari, во всех других браузерах (Chrome, Firefox, Safari osX) оно работает без каких-либо проблем. На самом деле моя проблема похожа на эту: => Как решить проблему iOS 11 Safari getUserMedia «Недопустимое ограничение» , но я не пытаюсь использовать камеру. Меня интересует только микрофон.

Я тестирую на реальном iPhone (5 и X, оба обновлены до последней версии), поэтому он не связан с симулятором iPhone.

Доступ к микрофону предоставлен, и всплывающее окно с запросом разрешений также отображается, поэтому это не проблема с разрешениями.

Answer 1

web rtc или getusermedia имеют некоторые проблемы, и они работают не на всех платформах, как вы ожидаете - у вас такие же проблемы с обнаружением камеры, как в samsung s5 тот же код работает нормально, но на более новом устройстве он не работает.

Мой совет - использовать адаптер webrtc js. Попробуйте просто включить этот скрипт:

<script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.js" type="text/javascript"></script>

перед использованием getusermedia api. Я думаю, что 99% проблем просто исчезают.

Answer 2

Эта проблема может быть связана с отчетом об ошибке под названием Сбой getUserMedia с ошибкой OverConstrainedError, когда устройства не найдены :

https://bugs.webkit.org/show_bug.cgi?id=177126

Вот ваш код, работающий в Codepen. Как вы сказали, аудио включено и работает. Обратите внимание, что вызов enumerateDevices() возвращает пустой массив. Как говорится в сообщении об ошибке, это вызывает ошибку в вашем вопросе:

.catch(function(error) {
  navigator.mediaDevices.enumerateDevices().then(devices=>{console.log(devices)});
  console.log('error: ',error);
});

https://codepen.io/anon/pen/rQWRyZ?editors=0011