Редактировать
Вкратце: PWA или любому веб-сайту, используемому на iOS за пределами собственного приложения Safari, не будет разрешен доступ к getUserMedia, поскольку Apple намеренно блокирует доступ для «безопасности».проблемы».Это включает в себя любые веб-сайты, сохраненные на домашний экран и / или просмотренные в другом приложении, таком как Facebook.Те же ограничения применяются к Android, однако на Android разработчик приложения может запросить разрешения камеры и обойти это.(Это означает, что если вы разработчик веб-сайта и вам нужна функциональность камеры, вам нужно будет попросить Facebook и т. Д. Перестроить свое приложение, чтобы разрешить это на Android).
См. Их трекер ошибок здесь: http://www.openradar.me/33571214 и https://forums.developer.apple.com/thread/88052
От веб-приложений Safari до Native Android и т. Д. Я делаю кроссплатформенные приложения в Интернете и на нативномдля жизни.Есть несколько потенциальных проблем, с которыми вы столкнетесь с getUserMedia.Чтобы выяснить, что вызывает потенциальные проблемы, вы должны следовать этому списку, чтобы создать успешное приложение.
Ваша проблема конкретно 1. потому что вы не запрашиваете API.Тем не менее MediaCapture из getUserMedia должен завершиться сбоем, потому что после исправления 1. вы столкнетесь с 2. и 3.
- API Polyfil - всегда убедитесь, что вы включаете новейший getUserMedia адаптер , чтобы остановить любойкросс-платформенные несоответствия в API getUserMedia.Некоторые браузеры могут использовать старый API getUserMedia (через «navigator.getUserMedia)» и не были обновлены (для использования navigator.mediaDevices.getUserMedia).Вам также следует проверить эту ссылку на наличие других необходимых заполнений.
- Support - отметьте CanIUse для поддержки getUserMedia для вашей целевой аудитории и убедитесь, что у вас есть необходимые запасные варианты.Ваш запасной вариант для
if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false; возвращает false, и если getUserMedia throws и error в идеале должны быть одинаковыми. - Разрешения - Даже если вы включите pwacompat , это не означает, что у окна браузера есть разрешения на доступ к камере.Это потому, что не все браузеры одинаковы!iOS 11 разрешает доступ getUserMedia только внутри собственного приложения Safari.Однако вы не можете получить доступ к getUserMedia на iOS 11 WKWebView или UIWebViews.Когда вы сохраняете приложение на домашней странице, оно размещается внутри WKWebView.Таким образом, опыт, который работает внутри Safari, не будет работать при сохранении на домашнем экране или внутри другого приложения.Смущает, а? ..!Таким образом, если вы хотите, чтобы ваш опыт работал, вы должны сообщить пользователю, когда он откроет другое приложение, что он должен открыть веб-сайт в Safari для доступа к камере в режиме реального времени.Обойти это невозможно.В Android производитель приложений может переопределить это разрешение и разрешить доступ к getUserMedia.Если вы используете macOS или Windows, вам нужно убедиться, что оболочка браузера также имеет совместимость с getUserMedia (например, Edge +, Chrome, Firefox и т. Д.)
- Безопасность - веб-сайты HTTPS могут получить доступ только к камере (кроме локального хоста).Проверьте местоположение prototcol
'(location.protocol === 'https:') ? true : false;', чтобы узнать, разрешено ли вам получать MediaCapture запрос
Ниже приводится тестовая ссылка, которую я использую для поддержки платформы: https://github.com/marcusbelcher/wasm-asm-camera-webgl-test
В моем GitHub есть также Android и React-родные решения getUserMedia