Генерация событий для сайтов, контролируемых жестами

Question

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

Я посетил много веб-сайтов и погуглил, Wikipedia и gitHub также не сильно помогли. Не так много информации, поскольку эти технологии находятся на зарождающейся стадии. Я думаю, что мне придется использовать некоторые JS для этого проекта

1. жест.js (наш пользовательский код JavaScript)
2. reve.js (Рамка для слайд-шоу)

Мои вопросы: как жесты генерируют события, как мой JavaScript взаимодействует с моей веб-камерой? Должен ли я использовать некоторые API или алгоритмы?

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

Answer 1

Чтобы включить жестовые взаимодействия в веб-приложении, вы можете использовать navigator.getUserMedia() для получения видео с локальной веб-камеры, периодически помещать данные видеокадра в элемент canvas и затем анализировать изменения между кадрами.

Доступно несколько библиотек жестов и демонстраций JavaScript (в том числе красивый контроллер слайдов). Для отслеживания лица / головы вы можете использовать такие библиотеки, как headtrackr.js: пример по адресу http://simpl.info/head trackr.

Answer 2

Сейчас я немного играю с этим, поэтому из того, что я понял, самая базовая техника:

1. Вы запрашиваете использование веб-камеры пользователя, чтобы снять видео.
2. Когда будет дано разрешение, создайте холст, в который можно поместить видео.
3. Вы используете фильтр (черный и белый) на видео.
4. Вы помещаете некоторые контрольные точки в рамку холста (небольшую область, в которой зарегистрированы все цвета пикселей в нем)
5. вы начинаете прикреплять функцию для каждого кадра (в целях пояснения я покажу только жесты влево и вправо)

На каждом кадре:

• Если кадр первый (F0), продолжайте
• Если нет: мы вычитаем пиксели текущего кадра (Fn) из предыдущего
  • если не было движения между Fn и F(n-1), все пиксели будут черными
  • если есть, вы увидите разницу Delta = Fn - F(n-1) в виде белых пикселей
• Затем вы можете проверить контрольные точки, для которых подсвечиваются области, и сохранить их ( **)x = DeltaN

Повторяйте те же операции, пока у вас не будет двух или более переменных Deltas, и вы вычтете контрольные точки DeltaN из контрольных точек Delta(n-1), и у вас будет вектор

• ( **)x = DeltaN
• (**) х = дельта (N-1)
• (+2) x = Дельта N - Дельта (N-1)

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

if positive on x and value > 5

и вызвать событие, а затем прослушать его:

$(document).trigger('MyPlugin/MoveLeft', values)
$(document).on('MyPlugin/MoveLeft', doSomething)

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

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

Вот более точное объяснение. Надеюсь, мое объяснение помогло.