Интерактивный музей казахских музыкальных инструментов: встань перед веб-камерой и играй на домбре, кобызе или дауылпазе движениями руки — или направь камеру на стол и играй на жетыгене пальцами. Распознавание, синтез звука и AR работают прямо в браузере, ничего устанавливать не нужно.
Кейс ADMIT Hackathon «Motion: камера вместо джойстика», свободный вариант — музыкальный инструмент в воздухе.
▶ Живая версия: mura.sofiyaram.workers.dev
 |
 |
- Откройте деплой (или
npm ci && npm run dev→ http://localhost:5173). - Выберите инструмент.
- Без камеры: «Попробовать демо без камеры» — приёмы, счёт и разбор работают. С камерой: совместите точку на кисти с меткой и задержите на секунду — выступление начнётся само.
- Ошибитесь — подсказка скажет, что именно исправить, а на видео появится метка со стрелкой.
- После 9 приёмов или 45 секунд — разбор: точность, лучшая серия, частые ошибки. Рекорды — во вкладке «Мои достижения».
- Языки в шапке: RU / EN / ҚАЗ.
Прямые ссылки: домбра, кобыз, дауылпаз, жетыген. QR-код каждого экспоната скачивается из приложения для печати.
Камера доступна только по HTTPS или на
localhost, поэтому с телефона открывайте деплой, а не локальный IP.Жетыген: на телефоне включается основная камера — поставьте телефон так, чтобы она смотрела на стол. На ноутбуке наклоните экран, чтобы веб-камера видела руку на столе.
Вместо «движение не распознано» система говорит, где рука и что сделать:
| Что увидела система | Что советует |
|---|---|
| Рука слишком слева | Сдвинь кисть вправо, к струнам |
| Пальцы соединились | Разомкни большой и указательный — отпусти струну |
| Сейчас нужен край | Сдвинь кисть к метке сбоку, затем ударь вниз |
Правила — src/lib/gestures.ts, показ подсказок без мерцания — src/lib/coaching.ts. Ожидаемый приём влияет только на текст подсказки, не на классификацию движения.
MediaPipe даёт 21 точку кисти. Всё остальное написано для этого проекта: анализ траектории центра костяшек и расстояния между большим и указательным пальцами.
| Инструмент | Приёмы | Как распознаётся |
|---|---|---|
| Домбра | бой вниз, бой вверх, щипок | пересечение линии струн с амплитудой; щипок — полный цикл «сблизил — разомкнул» |
| Кобыз | смычок вправо/влево, короткий штрих | горизонтальные сегменты, порог адаптируется к размеру кисти |
| Дауылпаз | центр, край, двойной удар | пересечение мембраны отрезком между кадрами — быстрый удар не теряется; двойной — второй удар до 500 мс |
| Жетыген | 7 струн на столе | кончики пальцев в системе координат ладони: палец отошёл от позы покоя — поднят, вернулся — касание стола; струна — по месту касания. Движение и поворот всей руки звука не дают |
Защита от ложных нот: автокалибровка размера кисти, дрожания и позы пальцев на столе, гистерезис, подтверждение резких скачков, восстановление коротких разрывов трекинга, выбор «своей» руки при двух в кадре.
Счёт: нужный приём +100, другой −25, максимум 900.
- AR поверх видео — инструмент, смычок и колотушка следуют за рукой, струны жетыгена лежат на столе (
ARInstrument.tsx). - Звук синтезирован в Web Audio (Карплус—Стронг, смычковый и ударный синтез), ни одного аудиофайла.
- Приватность — видео никуда не уходит, модель и WASM раздаются с самого сайта.
- Мобильные — адаптивная сцена, Wake Lock, облегчённый режим и автооткат GPU → CPU на слабых устройствах.
- Рекорды и история — локально в браузере.
Стек: React 19, TypeScript, Vite, MediaPipe Tasks Vision, Web Audio API. Деплой — Cloudflare Workers Static Assets (wrangler.jsonc, public/_headers).
npm ci
npm run dev # http://localhost:5173
npm run build # проверка типов + сборка в dist/
npm test # 49 юнит-тестов распознавания и аудио
npm run test:e2e # браузерные сценарии (Playwright, нужен Chromium: npx playwright install chromium или CHROME_PATH)На реальном железе: node scripts/check-real-camera.mjs, node scripts/check-audio.mjs.
- Имитация техники одной рукой, а не оценка мастерства: вторая рука и аппликатура не распознаются.
- AR — 2D-наложение, а не WebXR.
- Звук — цифровая интерпретация, не записи оригиналов.
- Слабый свет, низкий FPS и перекрытие пальцев ухудшают распознавание.
- Жетыген: касание определяется по позе пальцев (указательный — мизинец), а не по глубине, поэтому пороги подбирались на синтетических данных и могут требовать подстройки под конкретную камеру. Большой палец и вторая рука не учитываются; веб-камера над столом объективом вниз может показать струны зеркально.
- MediaPipe Hand Landmarker (Apache 2.0)
- Техника домбры: UNESCO — Dombra Kuy, Smithsonian Folkways — Ilme
Иллюстрации нарисованы для проекта. Сторонние компоненты — THIRD_PARTY_NOTICES.md.