Как получить доступ к мобильному устройству с помощью javascript?

Question

Я хочу написать веб-приложение (html + css + javaScript), которое при работе на устройстве с камерой (например, мобильным телефоном) должно иметь возможность использовать эту камеру в качестве сканера штрих-кода. Я знаю, что есть библиотеки чтения штрих-кодов, но я хочу попробовать написать собственный сканер. (Потому что я хочу узнать, как это работает подробно.)

После загрузки веб-приложения пользователь должен разрешить приложению использовать кулачок. Но тогда все остальное должно работать без взаимодействия с пользователем, то есть нет необходимости нажимать на любую кнопку после разрешения использования камеры. Следующее задание пользователей состоит в том, чтобы удерживать камеру на штрих-кодах, пока он не нажмет кнопку «Готово» или пока он не закроет браузер. Но при сканировании не требуется нарезка.

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

Когда скрипт получает такой массив, он анализирует его и пытается идентифицировать штрих-код. Если код был успешно идентифицирован, этот код отправляется на сервер. Затем должен быть сделан следующий снимок. Также, если код не найден, должен быть сделан новый снимок. Это повторяется бесконечно, пока пользователь не прекратит сканирование.

Приятно иметь:
Мне не нужна полная площадь экрана, которую камера может видеть. Мне нужно только небольшое прямоугольное обрезание (например, 640x320 пикселей).

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

<form action="server.cgi" method="post" enctype="multipart/form-data"> 
    <input type="file" name="video" accept="video/*" capture> 
    <input type="submit" value="Upload"> 
</form> 

Но я понятия не имею, как это может помочь мне решить мою проблему. Вы можете мне помочь?

(я не знаю, если это имеет значение, но я использую JQuery.)

Answer 1

Посмотрите на getUserMedia API, что позволяет запрашивать у пользователей разрешение на использование камеры своего устройства в сети чисто через JS. Затем вы можете управлять им как поток.

Обратите внимание, что iOS по-прежнему не имеет поддержки для этого, и единственной реальной альтернативой является попросить пользователя щелкнуть изображение с помощью fileupload/blob, а затем выполнить поиск этого изображения для штрих-кода.

Редактировать: ссылка на none deprecated method