Спасибо за пример!

Я всё понял — этот алгоритм не определяет ориентацию кода! Когда Вы прислали свой пример, я понял, что он снят при вертикальном положении камеры. И я попробовал развернуть один из своих образцов (положил на бок) и тот распознался! Нужно готовить обновление статьи.

1div0 11 мар 2019 в 10:37

…

daserge 11 мар 2019 в 11:37

Можно попробовать Cordova/PhoneGap еще как вариант:
github.com/phonegap/phonegap-plugin-barcodescanner

1div0 11 мар 2019 в 11:57

Если я правильно понимаю, эта библиотека требует установки специального компонента на ОС устройства. А значит это не JS-сканнер.

Supported Platforms

Android

iOS

Windows (Windows/Windows Phone 8.1 and Windows 10)

Browser

Note: the Android source for this project includes an Android Library Project. plugman currently doesn't support Library Project refs, so its been prebuilt as a jar library. Any updates to the Library Project should be committed with an updated jar.

Note: Windows 10 applications can not be build for AnyCPU architecture, which is default for Windows platform. If you want to build/run Windows 10 app, you should specify target architecture explicitly, for example (Cordova CLI):

cordova run windows — --archs=x86

daserge 11 мар 2019 в 12:08

С Cordova код приложения получается на JS, а плагины это обёртки над нативным кодом.
Есть какое-то требование использовать именно JS для распознавания?

НЛО прилетело и опубликовало эту надпись здесь

1div0 11 мар 2019 в 14:13

Интересная фича. Я об этом не знал.

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

...

… например, для создания считывателя QR-кода, они должны были полагаться на внешние библиотеки JavaScript. Это может быть дорого с точки зрения производительности и увеличивает размер страницы. С другой стороны, операционные системы, включая Android, iOS и macOS, а также аппаратные микросхемы, присутствующие в модулях камеры, обычно уже имеют производительные и высоко оптимизированные реализации таких функций (такие как Android FaceDetector или детектор универсальных функций iOS CIDetector).

Shape Detection API — использует эти собственные реализации и предоставляет наборы их JavaScript-интерфейсов. На данный момент реализованы следующие функции: FaceDetector interface — обнаружение лица, BarcodeDetector interface — обнаружение штрихкода, TextDetector interface — обнаружение текста (OCR — оптическое распознавание текста).

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

Текущий статус: создано обоснование, всё остальное в процессе.

Примечание. Планируется, что пробная версия будет доделана к выпуску Chrome 74. Также планируется, что API будет отключен, пока мы объединяем отзывы разработчиков. Вы всегда можете использовать Shape Detection API для локальных экспериментов, включив флаг enable-experimental-web-platform-features.

Интерфейсы всех трех детекторов, FaceDetector, BarcodeDetector и TextDetector, очень похожи…

Обратная связь
Нам нужна ваша помощь, чтобы убедиться, что API-интерфейс Shape Detection полностью отвечает вашим потребностям и что мы не пропустили ни одного ключевого сценария.
Если есть какая либо проблема, пожалуйста, сообщите о ней в репозитории Shape Detection API и предоставьте как можно больше подробностей.

Нам также интересно знать, как вы планируете использовать данный функционал:
У вас есть идеи по поводу варианта использования?
Планируете ли вы вообще это использовать?
Нравится этот функционал, и хочешь проявить свою поддержку?
Поделитесь своими мыслями по поводу Shape Detection API здесь.

Будем знать.

ainu 11 мар 2019 в 22:16

А с чего ZBar не подходит? Его в Wasm можно собрать, работает как зверь.

Megas 12 мар 2019 в 01:26

Интересно, что мешает скачать все файлы библиотеки Dynamsoft Barcode Reader (включая файлы wasm), допустим с их онлайн демо, и использовать ее без лицензии?

markmariner 12 мар 2019 в 09:19

Я думаю, что нарушение лицензии и мешает. Правда, не всем.

xelaz 12 мар 2019 в 11:50

Здесь ещё ZXing есть, но для меня я использую jsQR, который только QRCode может читать.

1div0 4 мар 2020 в 17:56

Исходники здесь
Живой пример здесь

MOHUS 12 мар 2019 в 22:36

Это же ужасное юзабилити. Вы предствьте работника который мучается с таким софтом — нажалкнопку сделать фотку, сделал фотку, ему — "не распознано", повторяет и т.п. Именно поэтому в нормальных устройствах сделано так что юзер наводит дивайс и крутит/вертит его пока дивайс не распознает, о чем бибикнет и т.п. Если уж делать софтово то только по такому же принципу — то есть вместо фотки, открывается компонент в котором видеопоток с камеры и реал-тайм распознавание. Иначе это полный провал в юзабилити и соотв. производительности труда — вы предствьте какую-нибудь инвентаризацию — когда надо ходить и щелкать подряд сотни и тысячи баркодов.
Вывод — заменить ТСД можно, но придется писать софт или использовать специализированный браузер! Да есть такие решения(Enterprise Browser и т.п. — каждый называет по-разному). Это когда браузер сразу имеет встроенные АПИ для того же распознавания баркодов — то есть из джавасрипта сайта просто дергается нужное АПИ и открывается компонент с нормальным распознаванием в реальном-времени и показом потока с камеры. Кроме того могут быть и другие АПИ для функционала недоступного из браузера. Наша компания предлагает такой браузер, но в принципе можно собрать и самому на базе Кордовы/ФонГапа — собрать простое приложение с добавлением нужных екстеншенов.
На чистом предустановленном браузере пока ничего юзабельного не сделать.
Очень советую тестировать кейсы работников — типа взяли нормальный ТСД и отсканировали 10 коробок, потом взяли ваше решение и повторили. Потом сравниваем время и т.п. Я не думаю что возможно переплюнуть ТСД(в нормальных и подсветка области распознавания и само распознавание очень хорошее и быстрое + наличие специальных удобных кнопок типа курка и т.п. — короче там все продумано с точки зрения юзабилити), но к этому надо стремиться.

1div0 12 мар 2019 в 22:58

Мне кажется Вы поспешили с выводами: всё что изображено выше — это демо-страницы библиотек. В результате написания статьи ни один работник не пострадал )
Чтобы это заработало на страничке — не требуется никакого софта или специализированного браузера. У меня, например, как только попадает фокус на поле, в которое требуется вводить штрихкод, появляется изображение с камеры (видеопоток) с наложенным прицелом (узкая полоска посередине). Можно отказаться от сканирования, а можно навести камеру на штрихкод — и его значение попадёт в поле ввода и изображение с камеры пропадает. Подсветка в наличии.
Переплюнуть ТСД никто не пытается. Это эксперимент с целью как раз установить, насколько конкретно это решение хуже ТСД. Я исхожу из того, что при относительно большом интервале между сканированиями, увеличение времени на одно сканирование, скажем в полтора раза, общее время работы увеличит незначительно.

MOHUS 12 мар 2019 в 23:44

Да я немного отстал от жизни — посмотрел что есть вполне себе нормально работающие реал-тайм решения на JS(по крайней мере на моей айфоне :-) ). Мы просто уж давно разрабатываем гибридное решение типа Кордовы(но круче :-) ) и соотв. уже давно поддерживаем екстеншены с оттопыриванием API в JS, но само распознавание нативное конечно + поддержка СДК вендоров на ТСД. ТСД конечно не просто так денег стоят. Сейчас есть дальнобойные они спокойно с 1-2 метров распознают и лазерная подсветка прицела есть и т.п. Проблема с ТСД то что они ОЧЕНЬ долго служат и сейчас еще много компаний имеет парк WinCE дивайсов.

zacisco 19 мар 2019 в 12:40

надо смотреть, что приходит с камеры в код. очень печально всё было, когда я со Смарта читал на сайте коды (qr в частности) и на сервер из браузера приходили то сжатые, то растянутые фото, поэтому тяжко было определять… нативный код/библиотеки на том же Андроиде работает в разы лучше, как платная версия из статьи

1div0 19 мар 2019 в 12:42

А я так и не понимаю, зачем таскать кучу картинок на сервер, если их можно обрабатывать на клиенте.

zacisco 19 мар 2019 в 19:29

и это правильно, но что так, что так — пока нет бесплатного хорошего считывателя через media браузера из-за искажения, нужна доп. обработка… wasm версию не пробовал, может взлетела бы (хотя первоначально проблема на уровне источника данных)
посмотрим, что нам в хроме завезут. должно нормально работать, по идее

1div0 20 мар 2019 в 09:21

Не знаю, я пробовал получать видеопоток на разных браузерах, с разных устройств — искажения нет.
Вот основные функции для работы с камерой, которые я использую, пользуйтесь на здоровье (здесь ещё подсветка включается, если нужно):

Основные функции для работы с камерой

function camera_init() {

    var constraints = {video: true};
    deviceId = cookieGet('cameraId');
    
    if (deviceId != undefined) {
        constraints = { 
            video : { 
                deviceId: { exact: deviceId }                 
            } 
        };
        navigator.mediaDevices.getUserMedia(constraints)
            .then(on_videostream_success)
            .catch(on_videostream_error)
        ;
    }else{
        alert('Зайдите в настройки и укажите какую камеру использовать.');
    }
    
}

function on_videostream_success(stream) {

    const track = stream.getVideoTracks()[0];
    g_barcodescan_track = track;

    video.addEventListener('loadedmetadata', (e) => {  
      window.setTimeout(() => (
        onCapabilitiesReady(track.getCapabilities())
      ), 500);
    });
    
    function onCapabilitiesReady(capabilities) {
    
        cameraLight = cookieGet('cameraLight') == 'on';
    
        var constraints = {
              advanced: [{
                    torch: cameraLight
                }]
            };  
        
        if (capabilities.torch) {
            track.applyConstraints(constraints)
                .catch(e => console.log(e));
        }
        
        g_barcodescan_video.play();
        BarcodeJob();

    }
    
    g_barcodescan_video.srcObject = stream;

}

1div0 20 мар 2019 в 09:30

А по поводу хромовского BarcodeDetector — вполне может оказаться, что это API к встроенному в устройство аппаратному сканеру (как в ТСД-шках). В пользу этого говорит вот это: