Instascan: IOS safari 11.4 - проблема с открытием задней камеры

У вас есть доступ к устройству Apple? Вы знаете, работает ли демо?

Похоже, это была проблема с сафари iOS, но я читал, что люди смогли решить эту проблему, добавив метатеги. Просто покопайтесь в этом форуме, и вы увидите. Я работаю над чем-то подобным, поэтому мне интересно. Что меня сдерживает, так это то, что у меня нет легкодоступного устройства.

Я пробовал демо на iPhone, это не сработало.

Да, работал над этим, я не могу заставить это работать. Пытаюсь вернуться и перечитать темы. Я заставил фронтальную камеру работать, добавив последний веб-адаптер RTC и добавив атрибут _playsinline_ к тегу видео. Он может читать камеры, но ничего не делает при переключении на заднюю камеру.

Я добавил атрибут внутри тега видео и также упомянул метатег.

Я добавил атрибут playsinline внутри тега видео и также упомянул метатег.

Кто-то на самом деле исправил это в одной из веток. Я пробую это прямо сейчас, но мне нужно ждать, пока кто-то с iPhone выйдет на работу.

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

Вот что я сделал!

Я добавил метатег.
<meta name="apple-mobile-web-app-capable" content="yes">

Добавлен этот атрибут:
<video id="scanner" class="video-back" playsinline></video>

Добавил этот JS файл:
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

А затем упаковал это для выпуска: https://github.com/JoseCDB/instascan/tree/ios-rear-camera. Не уверен, что знаете, как использовать Gulp с node.js, но это просто. Я заработал за 15 минут! Я использую эту персональную версию Instascan. Он знал об этой проблеме и смог ее исправить. Надеюсь это поможет. Удачи.

Я использовал метатег, тег видео и адаптер-latest.js.
Я использую instscan.min.js и не знаю, как использовать отдельно ".js - scanner.js - camara.js".

Я использовал метатег, тег видео и адаптер-latest.js.
Я использую instscan.min.js и не знаю, как использовать отдельно ".js - scanner.js - camara.js".

Вы должны установить node.js. Есть командная строка, которая упаковывает все эти файлы вместе, конечным результатом будет минифицированный JS-файл программы instascanner.

Это отличный продукт, и он оказался действительно полезным, так что спасибо за то, что сделали его замечательным. Вот проблема с этим instascan из моего исследования:

• Класс Camera при вызове getCameras возвращает коллекцию объектов Camera, созданных из объектов MediaDeviceInfo, собранных посредством вызова navigator.mediaDevices.enumerateDevices (). Это НЕ объекты id _ и _ name _ и ничего более. Они используются для создания массива объектов Camera.

Когда вы вызываете _scanner.start (camera) _, вы передаете объект Camera , который вызовет метод _camera.start () _ камеры.

• Метод _camera.start () _ THEN вызывает _navigator.mediaDevices.getUserMedia (contraints) _, который возвращает массив объектов
• _scanner.start () _ вызывает _scanner._enableScan (camera) _, передавая ему объект First MediaStream, возвращенный из вышеуказанного вызова в камере. Он устанавливает

                  **This Part Is the Disconnect and what is messing it all up!**

Проблема ограничения:

Переданный объект Camera использует свой идентификатор в ограничениях как _ "обязательный" _ для поиска устройств. Если он не найден, видео не будет отображаться. Также устанавливаются другие «обязательные» ограничения.

Различные устройства НЕ ПОДДЕРЖИВАЮТ используемые ограничения!
Запустите эту ссылку на устройстве, которое вы хотите использовать, и она расскажет вам, какие ограничения оно поддерживает:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Запустите эту ссылку на устройстве, которое вы хотите использовать, и введите ограничение. Он сообщит вам, поддерживается ли он:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Поддерживаемые iPad / Iphone / IOS Ограничения:

аспектRatio, FaceMode, _deviceId * _, высота, ширина, аспектRatio и другие.

_Когда я тестировал это, _deviceId будет проигнорирован как ограничение. _ Попробуйте это в приведенной выше ссылке для ограничений, и вы увидите, что он устанавливает deviceId = "". Когда я схватил его в javascript и отобразил, iphone всегда возвращал пустой deviceId.

Итак, чтобы захватить заднюю камеру на Iphone, вы должны использовать FaceMode и НЕ использовать deviceId.

Ограничения, поддерживаемые Android:

deviceId, _facingMode * _, aspectRatio, height, width и многие другие.

Я тестировал это на планшете Samsung и телефоне Android. FaceMode по умолчанию является "пользовательской" фронтальной камерой. Я поэкспериментировал с этим кодом и обнаружил, что по какой-то причине, которая пока не обнаружена, FaceMode для Android не работает. Тем не менее, это работает в приведенной выше ссылке. Я собираюсь продолжить исследование этой части и, возможно, исправить этот код для правильной работы с FaceMode и android.

* * ОТВЕТ НА ПРОБЛЕМУ ANDROID * * *
Сборка Gulp этого проекта включает в себя webrtc-адаптер версии ^ 1.4.0, который портит FaceMode в Android Chrome. Просматривая код, он фактически удалил режим облицовки.

• Чтобы исправить в этом проекте - в _index.js_ удалите строку 2 require('webrtc-adapter'); Затем следуйте процедурам сборки ниже. Когда я тестировал планшет и 4 разных телефона Android в Chrome, все снова работало, чтобы захватить заднюю камеру.

Чтобы захватить заднюю камеру на Android с помощью этого инстаскан-кода, вы можете использовать deviceId.
Убедитесь, что deviceId является ограничением _video_, например

video: {
  devideId: this.id
}

Код ограничения камеры:

Вот код из проекта, который устанавливает ограничения и получает объекты MediaStream.
Причина, по которой этот код не работает должным образом, заключается в том, что sourceId _video constraint_ не поддерживается для _Android_ или _Iphone_. Его нужно изменить на deviceId . Также необходимо убрать все обязательные элементы, если они не подходят для вашего устройства.

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

Как изменить InstaScan и минимизировать его:

чтобы получить и изменить это, я использовал VSCode.
1) Установите Node.js и vsCode.
2) на терминале в каталоге, который вы хотите загрузить, запустите:
git clone https://github.com/JoseCDB/instascan.git

3) на компакт-диске терминала в каталог instascan:
cd instascan

4) измените javascript и запустите gulp, чтобы выпустить код:
gulp release

5) Это даст вам новый миниатюрный элемент instascan.min.js в папке _dist_.

Я собираюсь разобраться с этой проблемой Android, надеюсь, в эти выходные. Я надеюсь, что это даст вам достаточно информации для любых будущих проектов с этой замечательной библиотекой.

Привет, это должно хорошо работать.
Сначала добавьте adapter.js из https://github.com/webrtc/adapter.

После этого клонируйте это:
git clone https://github.com/quocthai95/instascan.git
Запустить:
npm i
установить необходимое

Используйте gulp, чтобы выпустить окончательный код:
gulp release

Я проверил Iphone 6 plus (iOS 11.4) и Iphone 8 plus (iOS 11.3), и он работал хорошо. Вы можете поменять местами камеры обычным образом.

Надеюсь, ты сможешь решить свою проблему.

Привет, это должно хорошо работать.
Сначала добавьте adapter.js из https://github.com/webrtc/adapter.

После этого клонируйте это:
git clone https://github.com/quocthai95/instascan.git
Запустить:
npm i
установить необходимое

Используйте gulp, чтобы выпустить окончательный код:
gulp release

Я проверил Iphone 6 plus (iOS 11.4) и Iphone 8 plus (iOS 11.3), и он работал хорошо. Вы можете поменять местами камеры обычным образом.

Надеюсь, ты сможешь решить свою проблему.

При установке необходимого я получаю «12 уязвимостей (1 низкая, 5 умеренных, 6 высоких)».
Некоторые команды «$ npm install --save-dev [package-name]», похоже, устраняют эти уязвимости, но я не могу создать их из-за следующего исключения:

$ gulp release assert.js: 351 throw err; ^ AssertionError [ERR_ASSERTION]: функция задачи должна быть указана в Gulp.set [как _setTask] (C: \ Users \ John \ Downloads \ instascan-ios-rear-camera \ instascan-ios-rear-camera \ node_modules \ undertaker \ lib \ set-task.js: 10: 3)

Как мне продолжить, я бы очень хотел попробовать эту сборку. Он так хорошо работает с моим телефоном Android?

/Джон

Привет @johnatitide!
Вы установили последнюю версию gulp (4.0.0)? Если да, попробуйте ограничить его до 3.9.1. К вашему сведению:
https://github.com/ampproject/docs/issues/793#issuecomment -354836162
Или вы можете указать, какие команды вы использовали для его создания.

Привет @ quocthai95

Сборка работает с помощью следующих команд:
git clone https://github.com/quocthai95/instascan.git
npm установить [email protected]
нпм я
выпуск глотка

Теперь я могу переключать камеру в Safari на iPad и iPhone. Отлично.

Есть ли шанс, что исправления ограничений будут возвращены в репо Schmich?

Есть ли шанс, что исправления ограничений будут возвращены в репо Schmich?

Я создал новый запрос на перенос. Дождитесь принятия ^^

@ quocthai95 привет, ive выполнил ваши шаги с https://github.com/schmich/instascan/issues/182#issuecomment -447198290.

Мне было интересно, я получаю фронтальную камеру по умолчанию на моем Android Chrome. Думаете, как сделать заднюю камеру по умолчанию? у вас есть пример кода?

@fariskas ,
Используйте регулярное выражение, чтобы проверить, соответствует ли оно / назад /, затем запустите его, чтобы вы могли использовать заднюю камеру по умолчанию.

`Instascan.Camera.getCameras (). Then (function (камеры) {
if (камеры [0] .name.match (/ back / i)) {
scanner.start (камеры [0]);
} else if (camera [1] .name.match (/ back / i)) {
scanner.start (камеры [1]);
}
}

Это может быть полезно: я использую цикл for, чтобы найти «назад» в cameras[i].name но мне это не удалось, и я не смог выбрать заднюю камеру на iPad, пока не написал cameras[i].name в console.log и обнаружил, что мне нужно искать «ахтерзийде» (что по-голландски «назад»).
Поэтому, если вам не удалось выбрать заднюю камеру в iOS, попробуйте перевести «назад» или напишите cameras[i].name в console.log чтобы узнать, как называется задняя камера.

Я могу подтвердить, что демонстрация работает только с фронтальной камерой. Это с Safari на iOS 12.2

Кто-нибудь придумал, как использовать заднюю камеру с Safari на iOS 12+?

Кто-нибудь придумал, как использовать заднюю камеру с Safari на iOS 12+?

Я использую модифицированную версию этой библиотеки около 7 месяцев на более чем 30 типах телефонов и планшетов iOS и Android. Посмотрите на комментарии, которые я оставил выше, о модифицированной версии, чтобы получить любую камеру из операционной системы, с которой вы работаете. Комментарии продолжают говорить о добавлении webrtc после, что, как я обнаружил, составляет всю проблему этой библиотеки.

Я полностью удалил webrtc из проекта и перекомпилировал его. webrtc больше не нужен с этим кодом при переносе на es5 или выше. Использование webrtc в библиотеке и то, как он был закодирован, не позволили получить правильную камеру.

Я включил исправленные и перенесенные обычные и миниатюрные js-файлы, которые я использую уже некоторое время. Я использую его для посещения школы с помощью QR-кодов на любых телефонах студентов и учителей, которые на данный момент насчитывают около 30+ моделей. Он может захватить любую камеру.

Надеюсь, это поможет.

Код задней камеры
`` ''
scanner = new Instascan.Scanner ({video: video, scanPeriod: 4, mirror: false})
.then (handleSuccess)
.catch (handleError);
// Запускаем сканирование
scanner.addListener ('сканирование', foundCode);

            Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    scanner.start(cameras[0]);
                }
                else {
           ...        
                }
            }).catch (function (e) {
             ...  
            });

`` ''
instascan.min.zip

https://github.com/schmich/instascan/issues/182#issuecomment -443388022

Это отличный продукт, и он оказался действительно полезным, так что спасибо за то, что сделали его замечательным. Вот проблема с этим instascan из моего исследования:

• Класс Camera при вызове getCameras возвращает коллекцию объектов Camera, созданных из объектов MediaDeviceInfo, собранных посредством вызова navigator.mediaDevices.enumerateDevices (). Это НЕ объекты id _ и _ name _ и ничего более. Они используются для создания массива объектов Camera.

Когда вы вызываете _scanner.start (camera) _, вы передаете объект Camera , который вызовет метод _camera.start () _ камеры.

• Метод _camera.start () _ THEN вызывает _navigator.mediaDevices.getUserMedia (contraints) _, который возвращает массив объектов
• _scanner.start () _ вызывает _scanner._enableScan (camera) _, передавая ему объект First MediaStream, возвращенный из вышеуказанного вызова в камере. Он устанавливает элемент src для этого объекта медиапотока.
  **This Part Is the Disconnect and what is messing it all up!**

Проблема ограничения:

Переданный объект Camera использует свой идентификатор в ограничениях как _ "обязательный" _ для поиска устройств. Если он не найден, видео не будет отображаться. Также устанавливаются другие «обязательные» ограничения.

Различные устройства НЕ ПОДДЕРЖИВАЮТ используемые ограничения!
Запустите эту ссылку на устройстве, которое вы хотите использовать, и она расскажет вам, какие ограничения оно поддерживает:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Запустите эту ссылку на устройстве, которое вы хотите использовать, и введите ограничение. Он сообщит вам, поддерживается ли он:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Поддерживаемые iPad / Iphone / IOS Ограничения:

аспектRatio, FaceMode, _deviceId * _, высота, ширина, аспектRatio и другие.

_Когда я тестировал это, _deviceId будет проигнорирован как ограничение. _ Попробуйте это в приведенной выше ссылке для ограничений, и вы увидите, что он устанавливает deviceId = "". Когда я схватил его в javascript и отобразил, iphone всегда возвращал пустой deviceId.

Итак, чтобы захватить заднюю камеру на Iphone, вы должны использовать FaceMode и НЕ использовать deviceId.

Ограничения, поддерживаемые Android:

deviceId, _facingMode * _, aspectRatio, height, width и многие другие.

Я тестировал это на планшете Samsung и телефоне Android. FaceMode по умолчанию является "пользовательской" фронтальной камерой. Я поэкспериментировал с этим кодом и обнаружил, что по какой-то причине, которая пока не обнаружена, FaceMode для Android не работает. Тем не менее, это работает в приведенной выше ссылке. Я собираюсь продолжить исследование этой части и, возможно, исправить этот код для правильной работы с FaceMode и android.

* _ * ОТВЕТ НА ПРОБЛЕМУ ANDROID * _ **
Сборка Gulp этого проекта включает в себя webrtc-адаптер версии ^ 1.4.0, который портит FaceMode в Android Chrome. Просматривая код, он фактически удалил режим облицовки.

• Чтобы исправить в этом проекте - в _index.js_ удалите строку 2 require('webrtc-adapter'); Затем следуйте процедурам сборки ниже. Когда я тестировал планшет и 4 разных телефона Android в Chrome, все снова работало, чтобы захватить заднюю камеру.

Чтобы захватить заднюю камеру на Android с помощью этого инстаскан-кода, вы можете использовать deviceId.
Убедитесь, что deviceId является ограничением _video_, например

video: {
  devideId: this.id
}

Код ограничения камеры:

Вот код из проекта, который устанавливает ограничения и получает объекты MediaStream.
Причина, по которой этот код не работает должным образом, заключается в том, что sourceId _video constraint_ не поддерживается для _Android_ или _Iphone_. Его нужно изменить на deviceId . Также необходимо убрать все обязательные элементы, если они не подходят для вашего устройства.

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

Как изменить InstaScan и минимизировать его:

чтобы получить и изменить это, я использовал VSCode.

1. Установите Node.js и vsCode.
2. на терминале в каталоге, который вы хотите загрузить, запустите:
   git clone https://github.com/JoseCDB/instascan.git
3. на компакт-диске терминала в каталог instascan:
   cd instascan
4. измените javascript и запустите gulp, чтобы выпустить код:
   gulp release
5. Это даст вам новый миниатюрный элемент instascan.min.js в папке _dist_.

Я собираюсь разобраться с этой проблемой Android, надеюсь, в эти выходные. Я надеюсь, что это даст вам достаточно информации для любых будущих проектов с этой замечательной библиотекой.

Я выполнил вышеуказанные шаги, затем отредактировал файл camera.js (в строке 29), как
facingMode: { exact: "environment" },
Это работает для меня. Спасибо @apchandler

Я рада, что у вас есть над чем поработать! Спасибо @glorynguyen за публикацию этого исправления!

К сожалению, эти решения не работают на iOS 13. Он просто пустой (даже не черный).
При удаленной отладке Safari также не отображаются ошибки в консоли.

Кто-нибудь придумал, как использовать заднюю камеру с Safari на iOS 12+?

Я использую модифицированную версию этой библиотеки около 7 месяцев на более чем 30 типах телефонов и планшетов iOS и Android. Посмотрите на комментарии, которые я оставил выше, о модифицированной версии, чтобы получить любую камеру из операционной системы, с которой вы работаете. Комментарии продолжают говорить о добавлении webrtc после, что, как я обнаружил, составляет всю проблему этой библиотеки.

Я полностью удалил webrtc из проекта и перекомпилировал его. webrtc больше не нужен с этим кодом при переносе на es5 или выше. Использование webrtc в библиотеке и то, как он был закодирован, не позволили получить правильную камеру.

Я включил исправленные и перенесенные обычные и миниатюрные js-файлы, которые я использую уже некоторое время. Я использую его для посещения школы с помощью QR-кодов на любых телефонах студентов и учителей, которые на данный момент насчитывают около 30+ моделей. Он может захватить любую камеру.

Надеюсь, это поможет.

Код задней камеры

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

# 182 (комментарий)

Это решает мою проблему, большое вам спасибо.

Какое последнее исправление для этого? Я попробовал несколько из ветки, но мне кажется, что у меня только передняя камера.
Не знаю, как использовать Gulp или на самом деле компилировать проекты .js .git, я в основном кодирую C # / Asp.net Mvc, поэтому для меня это немного в новинку.
Решение apchandler дает мне ошибки. (Видео не определено)
В настоящее время загружается «исправленный» файл instascan.min.js для устройств Android и его версия для IOS, но я не могу заставить его работать.

Какое последнее исправление для этого? Я попробовал несколько из ветки, но мне кажется, что у меня только передняя камера.
Не знаю, как использовать Gulp или на самом деле компилировать проекты .js .git, я в основном кодирую C # / Asp.net Mvc, поэтому для меня это немного в новинку.
Решение apchandler дает мне ошибки. (Видео не определено)
В настоящее время загружается «исправленный» файл instascan.min.js для устройств Android и его версия для IOS, но я не могу заставить его работать.

У вас есть элемент видео html?
`` ''

When you run instascan you need to speficy a video element like:

var self = this;
self.scanner = новый Instascan.Scanner ({video: document.getElementById ('preview'), scanPeriod: 5});
self.scanner.addListener ('сканирование', функция (контент, изображение) {
self.scans.unshift ({date: + (Date.now ()), content: content});
});
Instascan.Camera.getCameras (). Then (function (камеры) {
self.cameras = камеры;
if (camera.length> 0) {
self.activeCameraId = камеры [0] .id;
self.scanner.start (камеры [0]);
} еще {
console.error («Камеры не найдены.»);
}
}). catch (function (e) {
console.error (е);
});
`` ''

Да, я работал с:

<video class="player" style="max-width:100%" id="preview" playsinline></video>

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
</script>

Стартовые камеры [0] для устройств Iphone / Ios. А это для Android:

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    var selectedCam = cameras[0];
                    $.each(cameras, (i, c) => {
                        if (c.name.indexOf('back') != -1) {
                            selectedCam = c;
                            return false;
                        }
                    });
                    scanner.start(selectedCam);
                }
                else {
                    console.error('No cameras found.');
                }
              });
</script>

Похоже, проблема заключалась в том, что я проверял только Request.UserAgent.Contains («ios»), а не «iphone», поэтому я также запустил Android-скрипт для Iphone.

Это хорошо знать. Спасибо за информацию.

@apchandler Привет, Вы знаете, существует ли способ выбора «основной» задней камеры?

У меня есть веб-сайт, на котором мои пользователи будут сканировать QR-коды с помощью instascan. Я занимался разработкой веб-сайта и выполнял некоторые тесты. Я захожу на веб-сайт с помощью мобильного телефона с 4 задними камерами (HUAWEI P30 PRO).

Я попробовал $ .each, и, выбрав первую заднюю камеру, я ничего не могу сканировать, потому что зрение такое нечеткое и с большим увеличением.

Но если я выберу камеры [2], я могу сканировать все.

Существует ли универсальный способ выбора «основной» задней камеры?

Я имею в виду, что моим веб-приложением будет пользоваться очень много пользователей с разными мобильными телефонами, с разным количеством камер и порядком расположения камер.

Или вы рекомендуете сделать выборку со всеми камерами, а затем позволить пользователю выбрать ту, которая идеально ему подходит?

Спасибо

@apchandler Привет, Вы знаете, существует ли способ выбора «основной» задней камеры?

У меня есть веб-сайт, на котором мои пользователи будут сканировать QR-коды с помощью instascan. Я занимался разработкой веб-сайта и выполнял некоторые тесты. Я захожу на веб-сайт с помощью мобильного телефона с 4 задними камерами (HUAWEI P30 PRO).

Я попробовал $ .each, и, выбрав первую заднюю камеру, я ничего не могу сканировать, потому что зрение такое нечеткое и с большим увеличением.

Но если я выберу камеры [2], я могу сканировать все.

Существует ли универсальный способ выбора «основной» задней камеры?

Я имею в виду, что моим веб-приложением будет пользоваться очень много пользователей с разными мобильными телефонами, с разным количеством камер и порядком расположения камер.

Или вы рекомендуете сделать выборку со всеми камерами, а затем позволить пользователю выбрать ту, которая идеально ему подходит?

Спасибо

Мне жаль. Я не знаю какого-либо значения, которое указывается как «основная» камера при наличии нескольких камер. Вы можете дать функции выбора камеры объект критериев, указав, что она должна иметь как минимум определенное разрешение и другие характеристики. Это может дать вам хотя бы камеру с минимальными способностями. В противном случае ваше решение звучит хорошо с учетом того, как вы хотите к нему подойти.

@apchandler Привет, Вы знаете, существует ли способ выбора «основной» задней камеры?
У меня есть веб-сайт, на котором мои пользователи будут сканировать QR-коды с помощью instascan. Я занимался разработкой веб-сайта и выполнял некоторые тесты. Я захожу на веб-сайт с помощью мобильного телефона с 4 задними камерами (HUAWEI P30 PRO).
Я попробовал $ .each, и, выбрав первую заднюю камеру, я ничего не могу сканировать, потому что зрение такое нечеткое и с большим увеличением.
Но если я выберу камеры [2], я могу сканировать все.
Существует ли универсальный способ выбора «основной» задней камеры?
Я имею в виду, что моим веб-приложением будет пользоваться очень много пользователей с разными мобильными телефонами, с разным количеством камер и порядком расположения камер.
Или вы рекомендуете сделать выборку со всеми камерами, а затем позволить пользователю выбрать ту, которая идеально ему подходит?
Спасибо

Мне жаль. Я не знаю какого-либо значения, которое указывается как «основная» камера при наличии нескольких камер. Вы можете дать функции выбора камеры объект критериев, указав, что она должна иметь как минимум определенное разрешение и другие характеристики. Это может дать вам хотя бы камеру с минимальными способностями. В противном случае ваше решение звучит хорошо с учетом того, как вы хотите к нему подойти.

Большое спасибо за ответ! Я попробую с разрешением. Instascan может вернуть разрешение камеры?

В соответствии с методами, предоставленными @glorynguyen и @apchandler.
Теперь можно включить заднюю камеру
Измените instascan.min
До
case 0:return i={audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}
После
case 0:return i=(/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream)?{audio:!1,video:{facingMode:{exact:"environment"},mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}:{audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}

Кто-нибудь придумал, как использовать заднюю камеру с Safari на iOS 12+?

Я использую модифицированную версию этой библиотеки около 7 месяцев на более чем 30 типах телефонов и планшетов iOS и Android. Посмотрите на комментарии, которые я оставил выше, о модифицированной версии, чтобы получить любую камеру из операционной системы, с которой вы работаете. Комментарии продолжают говорить о добавлении webrtc после, что, как я обнаружил, составляет всю проблему этой библиотеки.

Я полностью удалил webrtc из проекта и перекомпилировал его. webrtc больше не нужен с этим кодом при переносе на es5 или выше. Использование webrtc в библиотеке и то, как он был закодирован, не позволили получить правильную камеру.

Я включил исправленные и перенесенные обычные и миниатюрные js-файлы, которые я использую уже некоторое время. Я использую его для посещения школы с помощью QR-кодов на любых телефонах студентов и учителей, которые на данный момент насчитывают около 30+ моделей. Он может захватить любую камеру.

Надеюсь, это поможет.

Код задней камеры

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

# 182 (комментарий)

Вы, сэр, только что сохранили работу младшего разработчика, у вас есть фанат на всю жизнь.

Спасибо. Я был там, где был ты, когда увидел этот код. Был крайний срок и потребовались камеры 30 разных типов. Я рад, что они это написали.

Работает 15 месяцев с 45 различными моделями телефонов и только один сбой на телефоне Samsung, который был исправлен, когда Samsung установил для него исправления. Значит, это была ошибка Samsung WebKit.

Привет,
Я также сталкиваюсь с проблемой задней камеры с IOS, как и другие люди. Моя задняя камера не открывается на iPhone, по умолчанию передняя камера работает. Пожалуйста, помогите мне, если кто-нибудь решил эту проблему с помощью обновленной версии (13.xx. Xx) сафари.

Кто-нибудь придумал, как использовать заднюю камеру с Safari на iOS 12+?

Я использую модифицированную версию этой библиотеки около 7 месяцев на более чем 30 типах телефонов и планшетов iOS и Android. Посмотрите на комментарии, которые я оставил выше, о модифицированной версии, чтобы получить любую камеру из операционной системы, с которой вы работаете. Комментарии продолжают говорить о добавлении webrtc после, что, как я обнаружил, составляет всю проблему этой библиотеки.

Я полностью удалил webrtc из проекта и перекомпилировал его. webrtc больше не нужен с этим кодом при переносе на es5 или выше. Использование webrtc в библиотеке и то, как он был закодирован, не позволили получить правильную камеру.

Я включил исправленные и перенесенные обычные и миниатюрные js-файлы, которые я использую уже некоторое время. Я использую его для посещения школы с помощью QR-кодов на любых телефонах студентов и учителей, которые на данный момент насчитывают около 30+ моделей. Он может захватить любую камеру.

Надеюсь, это поможет.

Код задней камеры

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

# 182 (комментарий)

отлично работает как на Android, так и на iOS! Я только что скачал оригинальную ветку master instascan, поместил ваши файлы в папку dist, и все! Спасибо большое, сэр !

отлично работает как на Android, так и на iOS! Я только что скачал оригинальную ветку master instascan, поместил ваши файлы в папку dist, и все! Спасибо большое, сэр !

@ antworks-hub вы использовали весь код из ветки или минифицированный js?
откуда у тебя папка "dist"?

отлично работает как на Android, так и на iOS! Я только что скачал оригинальную ветку master instascan, поместил ваши файлы в папку dist, и все! Спасибо большое, сэр !

@ antworks-hub вы использовали весь код из ветки или минифицированный js?
откуда у тебя папка "dist"?

@ Sandi2211 Думаю, я создал папку "dist" в корне исходной основной ветки instascan и поместил в нее содержимое файла instasca, min.zip.

Кто-нибудь придумал, как использовать заднюю камеру с Safari на iOS 12+?

Я использую модифицированную версию этой библиотеки около 7 месяцев на более чем 30 типах телефонов и планшетов iOS и Android. Посмотрите на комментарии, которые я оставил выше, о модифицированной версии, чтобы получить любую камеру из операционной системы, с которой вы работаете. Комментарии продолжают говорить о добавлении webrtc после, что, как я обнаружил, составляет всю проблему этой библиотеки.
Я полностью удалил webrtc из проекта и перекомпилировал его. webrtc больше не нужен с этим кодом при переносе на es5 или выше. Использование webrtc в библиотеке и то, как он был закодирован, не позволили получить правильную камеру.
Я включил исправленные и перенесенные обычные и миниатюрные js-файлы, которые я использую уже некоторое время. Я использую его для посещения школы с помощью QR-кодов на любых телефонах студентов и учителей, которые на данный момент насчитывают около 30+ моделей. Он может захватить любую камеру.
Надеюсь, это поможет.
Код задней камеры

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip
# 182 (комментарий)

Это решает мою проблему, большое вам спасибо.

Спасибо, мужик, у меня все хорошо, просто добавьте свои новые js.

Без проблем. Я рад, что здесь все еще работает.

Кто-нибудь придумал, как использовать заднюю камеру с Safari на iOS 12+?

Я использую модифицированную версию этой библиотеки около 7 месяцев на более чем 30 типах телефонов и планшетов iOS и Android. Посмотрите на комментарии, которые я оставил выше, о модифицированной версии, чтобы получить любую камеру из операционной системы, с которой вы работаете. Комментарии продолжают говорить о добавлении webrtc после, что, как я обнаружил, составляет всю проблему этой библиотеки.

Я полностью удалил webrtc из проекта и перекомпилировал его. webrtc больше не нужен с этим кодом при переносе на es5 или выше. Использование webrtc в библиотеке и то, как он был закодирован, не позволили получить правильную камеру.

Я включил исправленные и перенесенные обычные и миниатюрные js-файлы, которые я использую уже некоторое время. Я использую его для посещения школы с помощью QR-кодов на любых телефонах студентов и учителей, которые на данный момент насчитывают около 30+ моделей. Он может захватить любую камеру.

Надеюсь, это поможет.

Код задней камеры

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

# 182 (комментарий)

Спасибо, @ apchandler11! Вы спасли мою работу. Боже, дмс!