Как сканировать через браузер

Обновлено: 07.07.2024

У меня есть сканеры TWAIN /ISIS Fujitsu fi-6130, которые я хочу активировать с помощью кнопки на веб-странице jQuery Rails. Я не только хотел бы, чтобы страница говорила сканеру "идти", я также хотел бы загрузить полученный файл через Paperclip после того, как (одна) страница будет отсканирована - в идеале, не требуя, чтобы пользователь перемещался с виджетом проводника по найти файл вручную.

Каждый сканер подключен по USB к рабочему столу Windows XP, хотя мы можем заменить эти рабочие столы центра обработки вызовов на Google Chrome OS.

4 ответа

Это невозможно сделать напрямую со стандартной страницы HTML /js - у js нет прав доступа к периферийным устройствам, таким как сканеры.

Это вполне возможно при использовании вспышки или серебристого света, но есть подозрения, что у вас возникли проблемы с разрешениями. Здесь есть статьи здесь и здесь , но это может быть а) слишком сложно и б) не совсем то, что вы ищете.

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

Изменить . Что касается написания клиентского компьютера, у вас есть несколько вариантов. Я лично рекомендую вам не пытаться делать это в PERL /PHP, так как они не кажутся подходящим инструментом для работы, и я подозреваю, что вы в конечном итоге загрузите COM-объекты, чтобы попытаться получить доступ к устройствам TWAIN (и мы все знаю, как это весело . )

В комментариях вы указали, что вам не нравится Visual Studio - поэтому, если вы знакомы с Java, я бы посоветовал вам взглянуть на JTwain (коммерческий, но, похоже, хорошего качества) или начните читать здесь . NB: я не частый разработчик Java, поэтому не могу гарантировать, что что-то из перечисленного - именно то, что вам нужно.

Кроме того, я бы предложил C ++ с использованием другой IDE (хотя это не будет зависеть от ОС)

Существует решение под названием Dynamic Web TWAIN от Dynamsoft , которое предоставляет браузер на основе TWAIN SDK для получения изображений с устройств TWAIN, их редактирования и сохранения в удаленных базах данных.

Как упоминал @Basic, для создания такого решения можно использовать JTwain . На самом деле разработчик JTwain создал ScannerJS, который позволяет сканировать напрямую из браузеров, таких как IE, Chrome и Firefox, используя JavaScript . Чтобы использовать его на своих веб-страницах, вам необходимо:

и вызовите scanner.scan :

Похоже, для сканеров Fujitsu серии fi доступен инструментарий Web API. В основном это приложение, которое вы устанавливаете на клиентском компьютере, где находится сканер, который принимает вызовы через JSON или Silverlight и отправляет их драйверам сканера.

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

В этой статье мы, как вы уже догадались, поговорим про Screen Capture API. Этот API появился на свет в 2014 году, и новым его назвать сложно, однако поддержка браузерами все еще достаточно слабая. Тем не менее его вполне можно использовать для персональных проектов или там, где эта поддержка не так важна.

Немного ссылок для начала:

На случай если ссылка с демо отвалится (или если вам лень туда перейти) — вот так выглядит готовое демо:

Мотивация

Некоторые продукты, такие как 1Password, включают в себя интересное решение для этой ситуации. При необходимости настроить аккаунт из QR-кода, они открывают полупрозрачное окно, которое можно перетащить поверх изображения с кодом, и он автоматически распознается. Вот как это выглядит:

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

Встречайте — getDisplayMedia

Ну почти. Здесь нам и поможет Screen Capture API с его единственным методом getDisplayMedia . getDisplayMedia — это как getUserMedia , только для экрана устройства, вместо его камеры. К сожалению, поддержка браузерами, как уже было сказано выше, далеко не такая распространенная, как у доступа к камере. Согласно MDN использовать его можно в Firefox, Chrome, Edge (правда, там оно находится в неправильном месте — сразу в navigator , а не в navigator.mediaDevices ) + Edge Mobile и… Opera for Android.

Довольно любопытная подборка мобильных браузеров рядом с ожидаемой большой двойкой.

Само по себе API крайне простое. Оно работает также, как и getUserMedia , но позволяет захватывать видеопоток с одной из определенных display surface:

c монитора (экран целиком),
с окна или всех окон определенного приложения,
с браузера, или точнее с конкретного документа. В Chrome этим документом является отдельная вкладка, а в FF такая опция отсутствует.

Браузерное API, которое позволяет заглянуть за пределы браузера… Звучит знакомо и обычно сулит одни неприятности, но в данном случае может быть достаточно удобно. Можно захватывать картинку из других окон и, например, в реальном времени распознавать и переводить текст, как Google Translate Camera. Ну и, наверное, есть еще много интересных применений.

Собираем

Итак, с возможностями, которые нам дает API, разобрались. Что дальше?

А дальше нам нужно перегнать этот видеопоток в изображения, над которыми можно работать. Для этого мы используем элементы <video> , <canvas> и еще немного JS.

Крупным планом процесс выглядит примерно так:

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

Опуская все не относящееся к делу, чтобы запустить поток и вытащить из него фрейм, нам понадобится примерно следующий код:

Как и говорилось выше: сначала мы создаем элементы <video> и <canvas> и просим у канваса 2D контекст ( CanvasRenderingContext2D ).

Затем мы определяем ограничения/условия потока. В отличие от потоков с камеры, тут их немного. Мы говорим, что не хотим видеть курсор, и что нам не нужно аудио. Хотя на момент написания этой статьи захват аудио все равно никем не поддерживается.

После этого мы цепляем полученный поток типа MediaStream к элементу <video> . Обратите внимание, что getDisplayMedia возвращает Promise.

Наконец, из полученных данных о потоке мы запоминаем разрешение видео, чтобы правильно отрисовать его на канвас, отрисовываем фрейм и вытаскиваем из канваса объект ImageData .

Для полноценного использования вам, скорее всего, захочется обрабатывать кадры в цикле, нежели один раз. Например, пока вы ждете когда необходимое изображение появится в кадре. И здесь нужно сказать пару слов.

Когда речь заходит об "обработке чего-то в DOM в постоянном цикле", первое, что приходит на ум — это, скорее всего, requestAnimationFrame . Однако в нашем случае использовать его не выйдет. Все дело в том, что когда вкладка перестает быть активной — браузеры ставят обработку циклов rAF на паузу. В нашем случае, именно в это время мы будем хотеть обрабатывать изображения.

В связи с этим вместо rAF мы будем использовать старый добрый setInterval . Но и с ним не так все гладко. В неактивной вкладке интервал между срабатываниями коллбэка составляет минимум 1 секунду. Тем не менее нам этого достаточно.

Наконец, добравшись до кадров, мы можем обрабатывать их как нам заблагорассудится. Для целей этого демо мы будем использовать библиотеку jsQR. Она крайне проста: на вход принимает ImageData , ширину и высоту изображения. Если в полученном изображении есть QR-код — назад вы получите JS-объект с распознанными данными.
Давайте дополним наш предыдущий пример еще буквально парой строк кода:

Я подумал, что основной код за этим примером можно упаковать в npm-библиотеку и сэкономить в последующем использовании немного времени на первоначальную настройку. Библиотека очень проста, на данном этапе она всего лишь принимает коллбэк, на который будет отправляться ImageData , и один дополнительный параметр — частоту отправки данных. Весь процессинг нужно приносить свой. Я подумаю, есть ли смысл расширять ее функционал.

Библиотека называется stream-display : NPM | Github.

Ее использование сводится буквально к трем строчкам кода и коллбэку:

Демо можно посмотреть здесь. Также есть CodePen версия для быстрых экспериментов. Оба примера используют упомянутый выше NPM-пакет.

Немного о тестировании

Упаковывая этот код в библиотеку мне пришлось задуматься о том, как же ее тестировать. Совершенно не хотелось тянуть 50МБ безголового Chrome, чтобы запускать в нем несколько маленьких тестов. И хотя идея писать заглушки для всех составных частей казалась слишком мучительной, в итоге я так и поступил.
В качестве тест-раннера был выбран tape . Вот что в итоге пришлось имитировать:

Также я использовал sinon для всех заглушек функций, за вызовами которых нужно было следить. Остальное было реализовано пустыми JS-функциями.

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

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

Заключение

Решение получилось не столь элегантным, как упомянутое в начале статьи прозрачное окно, но, возможно, однажды веб дойдет и до этого. Остается только надеяться, что когда браузеры научатся видеть сквозь свои окна — эти возможности будут строго подконтрольны нам. А пока что помните, что когда вы шарите экран в Chrome — его могут парсить, записывать, и т.д. Так что не шарьте больше чем нужно!

Надеюсь, кто-то после этой статьи выучил для себя новый трюк. Если у вас есть идеи, для чего еще это может быть использовано, — пишите в комментариях. И до новых встреч.

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

Скачиваем программу и запускаем установщик (Расширенные настройки \ Путь оставляем прежним \ Указываем порт). По умолчанию указывается 80 порт, но я не советую его указывать, так как данный порт может быть уже занят Skype-ом или веб-сервером. Если точно знаете, что ни веб-сервер ни Skype не будут устанавливаться на этой машине, то можете оставить 80 порт по умолчанию. Я же укажу 81.

Так же нам понадобится создать правило в брандмауэре Windows, или в стороннем файерволе, если вы не используете стандартный брандмауэр Windows. (Пуск \ Панель управления \ Брандмауэр Windows \ Дополнительные параметры \ Правила для входящих подключений \ Создать правило \ Для программы или порта \ TCP 81 \ Разрешить подключение \ Для всех профилей)

— выбор сканера — тут обычно присутствует 2 устройства, это TWAIN драйвер поставляемый производителем оборудования и WIA драйвер. Лично у меня получалось сканировать только через WIA, по этому, его и выбираем. При переключении можно увидеть какой диапазон разрешения поддерживается, как вы видите, TWAIN драйвер выдает какие-то нереальные цифры, а WIA похожие на правду;

— имя и номер;

— разрешение DPI — обычно достаточно 150, чтобы и файл получился не большой и все можно было разглядеть;

— цвет, тип выходного файла и формат бумаги.

Если вы хотите отсканировать несколько документов подряд, то есть пункт «Пакетное сканирование». Здесь следует указать количество сканированных документов и задержку между сканированием, т.е. время, которое потребуется для замены листа на сканере в секундах. Данная задержка так же выполняется при первом сканировании, чтобы вы успели дойти до сканера и положить туда документ.

Но здесь есть свои тонкости, можно указать сканирование документов с сохранением в отдельные jpeg файлы. Но, в internet explorer каждый раз будет выполняться запрос, сохранить файл или открыть, по этому, все равно придется каждый раз подходить к компьютеру, чтобы выбрать действие. В данной ситуации можно сохранить документы в pdf файл, тогда только по окончании сканирования всех документов появится запрос на сохранение документа.

Если же вам нужно сканировать каждый лист в отдельный jpeg файл, то можно воспользоваться браузером Google Chrome, в нем документы автоматически сохраняются в указанной папке, без запроса. Да и вообще, в Chrome все работает более адекватно, как вы видели в Internet Explorer, не сработало название файла и нумерация, а здесь все отлично. Еще стоит учесть, что нумерация файлов будет продолжаться с последнего сканирования, даже когда вы неделю не сканировали.

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

Таким образом, можно выполнять сканирование даже с таких устройств как телефоны и планшеты, единственное условие, чтобы они находились в одной сети, а далее все так же через браузер.

Если со временем потребуется изменить порт, на котором работает серверная часть программы, то его можно изменить в любой момент (Пуск \ Программы \ TWAIN@Web \ Конфигурация)

Так же желательно указать автоматический перезапуск службы сканирования, при сбоях (Пуск \ Панель управления \ Администрирование \ Службы \ TWAIN@Web \ Тип запуска: автоматически \ Восстановление: на все сбои – перезапуск службы)

И если у вас возник какой-то вопрос или предложение, обращайтесь к разработчикам, они приветствую подобные инициативы!

Читайте также: