Рубрика: HTML5, JavaScript, CCS3

Скачиваем файл compiler-latest

Распаковываем архив и выполняем команду

java -jar closure.jar --js src\logjs.js --js_output_file logjs.min.js

Оригинал статьи

Оригинал статьи: https://tproger.ru/articles/speech-recoginition-in-the-browser/

Распознавание речи — одна из символизирующих современный мир возможностей, которой мы привыкли пользоваться благодаря Siri и Google Now.

Но она присутствует не только в мобильных ассистентах: вы замечали иконку микрофона справа от поля поиска Google?

Распознавание голоса в браузере доступно благодаря мощности нового экспериментального JavaScript API — webkitSpeechRecognition. Другое API под названием speechSynthesis позволяет озвучивать человеческим голосом любой текст. Читать далее «Распознавание голоса и чтение текста в браузере в 3 строки на JavaScript: демонстрация и примеры кода»

Для создание одного js-файлай из нескольких можно использовать утилиту от Google — Closure Compiler

1. устанавливаем Java Runtime Environment version 7, если у Вас её нет
2. Скачиваем файл compiler.jar
3. Распаковываем в папку например e:\compressionjs
4. Для примера создаем в этой папке js — файл (например simple.js)

5. // A simple function.
   function hello(longName) {
     alert('Hello, ' + longName);
   }
   hello('New User');
   

6. Выполняем команду java -jar compiler.jar —js sample.js —js_output_file hello-compiled.js

Примечание: Если нужно по всей папке собрать, то можно выполнить java -jar compiler.jar —js=»*.js» —js_output_file hello-compiled.js

Подробнее о командах можно узнать java -jar compiler.jar —help

С помощью технологии WebUsb API можно осуществлять подключения к usb -устройствам которые находятся на компьютере (Пример можно скачать по ссылке снизу).

!!! Внимание. Перед использованием примеров нужно убедиться, что adb отключено

adb kill-server

!!! Внимание. В примере кода явно вбит vendorId, его нужно заменить на требуемый.

Adb.WebUSB.Transport.open = function() {
        // было так
        // let filters = [
        //     { classCode: 255, subclassCode: 66, protocolCode: 1 },
        //     { classCode: 255, subclassCode: 66, protocolCode: 3 }
        // ];

        let filters = [{
            vendorId: '2821'
        }];
        return navigator.usb.requestDevice({ filters: filters })
            .then(device => device.open()
                .then(() => new Adb.WebUSB.Transport(device)));
};

Чтобы узнать vendorId выполните следующий пример узнать vendorId

Запускаем наш пример.

Подключаем устройство по кабелю (нужно убедиться чтобы отладка по USB кабелю была включена).

Пример можно скачать отсюда.

Полезные ссылки:

• https://github.com/webadb/webadb.js — библиотека
• https://github.com/webadb/webadb.github.io — пример подключения
• https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb — расширение для Chrome, чтобы создавать web-сервер
• https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web — статья с описанием

Простой способ определения было ли касание рукой или стилусом.

У событие должен быть объект browserEvent или его аналог. В нем должен быть массив targetTouches (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches). У элемента массива должны быть следующие свойства:

• force — Возвращает количество давления, прикладываемого к поверхности пользователем, как floatмежду 0.0(без давления) и 1.0(максимальное давление)
• radiusX — Возвращает радиус X эллипса, который наиболее точно описывает область контакта с экраном. Значение находится в пикселах того же масштаба, что и screenX
• radiusY — Возвращает радиус Y эллипса, который наиболее близко описывает область контакта с экраном. Значение находится в пикселах того же масштаба, что и screenY.

Из тестов было выявлено, что если

if (touch.force > 0.4 || (touch.radiusX > 3.6 && touch.radiusY > 3.6)){
    //касание рукой или нажатие пальцем
}