Как решить проблему iOS 11 Safari getUserMedia "недопустимое ограничение"

Я пытаюсь запустить следующий код в Safari в iOS 11. Он должен предложить пользователю предоставить доступ к камере своих устройств, а затем отобразить ее в my <video autoplay id="video"></video> элемент. Однако при работе в iOS 11 это приводит к OverconstrainedError быть брошенным:

{message: "Invalid constraint", constraint: ""}
  • код отлично работает в Android и успешно открывает камеру.
  • я попытался несколько допустимых конфигураций без успеха.

Я знаю, что iOS 11 только что вышел так это может быть ошибка, но какие-то мысли? Кто-нибудь еще сталкивался с этим?

код:

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
     navigator.mediaDevices.getUserMedia({video: true})
         .then(function(stream) {
             video.src = window.URL.createObjectURL(stream);
             video.play();
         })
         .catch(function(err) {
             console.log(err);
         });
}

изменить 1

Я navigator.mediaDevices.getSupportedConstraints() и он возвращает следующее:

{
    aspectRatio: true,
    deviceid: true,
    echoCancellation: false,
    facingMode: true,
    frameRate: true,
    groupId: true,
    height: true,
    sampleRate: false,
    sampleSize: false,
    volume: true,
    width: true
}

Я пробовал конфигурации, опуская video собственность, но не повезло.

8
camera ios11 javascript media

3 ответов

недопустимая ошибка ограничения в safari заключается в том, что браузер ожидает, что вы передадите правильную ширину, одну из:

  • 320
  • 640
  • 1280

высота автоматически вычисляется в соотношении сторон 4:3 для 320 или 640 и 16: 9 для 1280, затем, если вы передаете ширину 320, вы устанавливаете видеопоток в:

  • 320x240

Если вы установили ширину 640, Вы видео поток установлен в:

  • 640x480

и если вы установите ширину 1280, то Вы видео поток установлен в:

  • 1280x720

в любом другом случае вы получили ошибку "InvalidConstrain" для значения ширины.

также вы можете использовать минимальные, максимальные, точные или идеальные ограничения для ширины, пожалуйста, проверьте документация MDN

вот пример в этой сайт CodePen

var config = { video: { width: 320/*320-640-1280*/ } };
var start = () => navigator.mediaDevices.getUserMedia(config)
  .then(stream => v.srcObject = stream)
  .then(() => new Promise(resolve => v.onloadedmetadata = resolve))
  .then(() => log("Success: " + v.videoWidth + "x" + v.videoHeight))
  .catch(log);

var log = msg => div.innerHTML += "<p>" + msg + "</p>";

PD: в chrome вы можете установить ширину высоты, и видеопоток установлен в этих размерах, Firefox делает фитнес, и Safari ожидают точного совпадения.

2

похоже, это была ошибка, которая была исправлена, потому что я просто попробовал ее снова, и сообщение об ошибке больше не появляется.

обратите внимание, что, хотя сообщение об ошибке исчезло, мне пришлось сделать еще одно изменение для его работы, которое добавляло video.srcObject = stream; на then обратный.

1

помните, что симулятор iOS, который поставляется с Xcode, не поддерживает веб-камеру или микрофон ,поэтому вы можете получить OverconstrainedError (согласно https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia docs, это означает, что ни одно устройство не соответствует переданным параметрам, даже если вы не ставите специфику)

1