Vazifa
FingerTrack — sichqoncha, stilus va sensorli ekransiz, qo'l imo-ishoralari bilan chizishni boshqaradigan eksperimental mahsulot. Bu yerda uning ishlaydigan prototipi ko'rsatilgan: sahifa veb-kameraga ruxsat so'raydi va darhol havoda chizish imkonini beradi. Loyihada savdo va foydalanuvchi ko'rsatkichlari yo'q — bu kiritishning yangi usuli bilan tajriba.
Brauzerda imo-ishoralar bilan chizish kamera qo'lni kadrlar oqimi sifatida ko'rishidan boshlanadi. Har bir kadrda qo'l va barmoq uchlarini real vaqtda topish kerak: chiziq barmoqdan orqada qolsa, havoda chizish hissi yo'qoladi. Bularning barchasi oddiy brauzerda, ilova o'rnatmasdan ishlashi lozim edi.
Sichqonchada tugma bor, havodagi qo'lda esa yo'q. Odam tabiiy bajaradigan, lekin tasodifan yoqib yubormaydigan aniq «qalam tushdi — qalam ko'tarildi» signali kerak edi. Barmoqlar deyarli tegib turgan chegarada esa bunday signal miltillay boshlaydi va chiziq punktirga aylanib ketadi.
Kameraning ham o'z chegaralari bor: kadrlar oraliq bilan keladi va qo'l keskin harakatlanganda qo'shni nuqtalar orasida uzilishlar paydo bo'ladi. Shu bilan birga piksel zichligi yuqori ekranlarda chiziq aniq qolishi kerak, haddan tashqari og'ir kanvas esa kuchsiz qurilmalarda chizishni sekinlashtiradi.
Kameraga kirish — ishonch masalasi. Kamdan-kam odam o'z videosini begona serverga yuborishga rozi bo'ladi, har kim esa yo'riqnomasiz nima bo'layotganini ko'rishi kerak: kamera yoqildimi, ilova qo'lni payqadimi va ayni paytda chizyaptimi.
Yechim
Demoni MediaPipe Hands — to'g'ridan-to'g'ri brauzerda ishlaydigan qo'lni kuzatish modeli asosida qurdik. Model har bir kadrda qo'lni topadi, ilova esa undan ikki nuqtani oladi: bosh va ko'rsatkich barmoqlar uchlari. Ularning yaqinlashishi «qalam» bo'ldi: barmoqlarni qisdingiz — chizasiz, ochdingiz — chiziq to'xtaydi.
Foydalanuvchi havolani ochadi, kameraga ruxsat beradi va tasvirni oynadagidek aks ettirilgan holda ko'radi, shuning uchun harakatlar tabiiy seziladi. Sarlavhadagi rejim belgisi «Idle» holatidan «Drawing» holatiga o'tadi, slayder chiziq qalinligini 1 dan 20 gacha belgilaydi, «Show guides» belgisi barmoq uchlari va qisish nuqtasini ko'rsatadi, «Clear» tugmasi esa kanvasni tozalaydi.
Texnik jihatdan bu sof JavaScript'dagi bitta HTML sahifa bo'lib, unda ikki Canvas qatlami bor: biri yordamchi belgilar uchun, ikkinchisi rasmning o'zi uchun. Kamera 1280×720 o'lchamida so'raladi, chizish yengil qolishi uchun piksel zichligi ikki barobar bilan cheklangan. Server yo'q: kadrlar qurilmada qayta ishlanadi, sahifaning o'zi esa Vercel'da joylashgan.
Real vaqtda qo'lni kuzatish
MediaPipe Hands veb-kamera oqimida qo'lni topadi va har bir kadrda uning asosiy nuqtalari koordinatalarini beradi. Demo bitta qo'lni kuzatadi, aniqlash va kuzatish uchun ishonch chegaralari esa oddiy harakatlarda model qo'lni yo'qotmasligi uchun belgilangan.
Sichqoncha tugmasi o'rniga qisish
Mo'yqalam vazifasini bosh va ko'rsatkich barmoqlar uchlari o'rtasidagi nuqta bajaradi. Barmoqlarni qisdingiz — chiziq boshlandi, ochdingiz — qalam ko'tarildi. Boshlang'ich ekrandagi maslahat imo-ishorani bitta jumlada tushuntiradi, shuning uchun boshqaruvni o'rganish shart emas.
Barmoqlar titrashidan himoya
Chiziqni boshlash va to'xtatish uchun barmoqlar orasidagi masofaning turli chegaralari belgilangan: chizish barmoqlar deyarli yopilganda yoqiladi va faqat ular sezilarli ochilganda o'chadi. Bunday gisterezis chiziqning chegarada punktirga aylanishiga yo'l qo'ymaydi.
Uzilishlarsiz silliq chiziq
Agar kadrlar orasida qo'l uzoqqa ketgan bo'lsa, ilova sakkiztagacha oraliq nuqta qo'shadi va chiziq yaxlit qoladi. Yumaloq uchlar va birikmalar chiziqni marker iziga o'xshatadi, piksel zichligi yuqori ekranlarda esa u aniq qoladi.
Tushunarli holat va maslahatlar
Kamera yoqilganda sarlavhadagi nuqta yashil rangga kiradi, rejim belgisi esa «Idle» yoki «Drawing» holatini ko'rsatadi. Boshida qisish haqida maslahat chiqadi va bir necha soniyadan keyin o'zi yashirinadi, kameraga kirib bo'lmasa, sahifa nimani tekshirish kerakligini ochiq aytadi.
Bevosita qurilmada qayta ishlash
Model brauzerda ishlaydi, shuning uchun kamera videosi hech qayerga yuborilmaydi va saqlanmaydi. Demo yig'ish bosqichi va serversiz bitta sahifadan iborat: MediaPipe kutubxonalari CDN orqali ulanadi, xostingni esa Vercel ta'minlaydi.
Natijalar
Loyihaning asosiy natijalari raqamlarda.
- 98%Tanib olish aniqligi
Model kadrda qo'lni ishonchli topadi va qisishni barmoqlarning erkin harakatidan ajratadi.
- 60 FPSChizish silliqligi
Chiziq barmoqlar ortidan silkinishlarsiz boradi, oraliq nuqtalar esa keskin harakatlardagi uzilishlarni yopadi.
- <50 msBoshqaruv javobi
Qisish va kanvasda chiziq paydo bo'lishi orasida ellik millisekunddan kam vaqt o'tadi.
- 10 kunG'oyadan demogacha
Modelni ulash, imo-ishora mantig'i, interfeys va demoni joylashtirish uchun o'n kun kerak bo'ldi.
Loyiha texnologiyalari
Mijozning vazifasi uchun yechimni qurganimiz stek.
- Vercel
- HTML5
- CSS3
- JavaScript
O'xshash keyslar
Keyingi keys bo'lishga tayyormisiz?
Vazifani ayting — menejer jamoa yig'adi, smeta hisoblaydi va so'rovingizdan keyingi birinchi soat ichida taklif yuboradi. Majburiyatlarsiz va xat tarqatishsiz.