Устранение проблем с Safari при использовании видео в приложении Angular - PullRequest
Новая
       10

Устранение проблем с Safari при использовании видео в приложении Angular

0 голосов
/ 28 марта 2019

Я создал веб-приложение на Angular, которое использует веб-камеру мобильного приложения пользователя для сканирования QR-кодов.Он работает так, как задумано на устройствах Android, но у меня странное поведение на устройствах ioS (в Safari), из-за которого у меня возникают проблемы с закреплением.Желаемое поведение ... 1) Пользователь заходит на веб-страницу, на которой размещено приложение Angular 2) Они нажимают кнопку, которая переводит их на страницу «сканирования» 3) У пользователя запрашивается разрешение на использование камеры 4) Запускается камера иотображается в виджете на веб-странице. 5) Когда распознается QR-код, в приложении выполняется некоторая логика

. Это работает точно так, как на устройствах Android (в Chrome)

ПоведениеЯ получаю на устройствах iOS следующее: 1) Использование идет на веб-страницу, на которой размещается приложение Angular 2) Они нажимают кнопку, которая переводит их на страницу «сканирования» 3) У пользователя запрашивается разрешение на использованиекамера (пока все хорошо)

Здесь опыт расходится ... После нажатия кнопки «разрешить» вместо открытия видео в виджете на веб-странице (как это происходит на устройстве Android) вместо этого открывается«полный экран», как если бы вы снимали видео.Также очевидно, что данные больше не отправляются в приложение, и единственный способ вернуться на веб-страницу - закрыть камеру.Извините за длинное описание, но пытаюсь предоставить как можно больше подробностей.

Здесь происходит множество вещей, но разбить их было бы замечательно, если бы у кого-нибудь были предложения, почему я получу эту другую камеруповедение (открытие полного экрана в приложении камеры вместо отображения в виджете).Вот код, выполняющий работу в приложении Angular ... 

//From component that is doing the scanning.

startCamera() {
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia(this.constraints).then(stream => {
      this.video.nativeElement.srcObject = stream;
      this.video.nativeElement.play();
      this.streamTracker = stream.getTracks()[0];
    });
  }
}


//From library that contains scanning logic.  Just including for completeness.  This also gets called when scanning starts
//It is passed the id 'video' from above
qrcode.setWebcam = function(videoId) {
    var n = navigator;
    qrcode.video = document.getElementById(videoId);

    var options = true;
    if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
      try {
        navigator.mediaDevices.enumerateDevices().then(function(devices) {
          devices.forEach(function(device) {
            if (device.kind === 'videoinput') {
              if (device.label.toLowerCase().search('back') > -1)
                options = [{
                  sourceId: device.deviceId
                }];
            }
          });
        });
      } catch (e) {}
    } else {}
<div class="embed-responsive embed-responsive-1by1 b-light border rounded">
  <video src="" class="embed-responsive-item" #video id="video" autoplay></video>

Любые предложения будут с благодарностью.Снова отлично работает в Android, просто пытаюсь исправить поведение в Safari.

...