Real-time Computer Vision

تتبّع يدك، مباشرة من متصفحك

مشروع تجريبي يستخدم نموذج تتبع اليد من Google (MediaPipe) لرصد 21 نقطة مفصلية على يدك عبر الكاميرا، والتعرف على إيماءات الأصابع في الزمن الحقيقي — كل هذا يعمل محليًا داخل المتصفح دون رفع أي فيديو لأي خادم.

Hands0
FPS0
Gesture
ModeOptimal
Spread0%
✋ ارفع يدك الثانية لرؤية خطوط الاتصال 🤚
Open Hand

يحتاج المتصفح إذن الوصول للكاميرا. المعالجة تتم محليًا بالكامل — لا يُرسل أي فيديو أو صورة خارج جهازك.

خط المعالجة التقني

من إشارة الكاميرا الخام إلى تصنيف إيماءة — أربع خطوات تحدث 30+ مرة في الثانية.

01

التقاط الفيديو

الوصول لكاميرا الجهاز عبر getUserMedia، وتمرير كل إطار (frame) مباشرة إلى نموذج التتبع دون تخزين أو رفع.

02

استخراج 21 نقطة مفصلية

نموذج MediaPipe Hand Landmarker (من Google، يعمل عبر WebAssembly) يحدد إحداثيات كل مفصل في اليد بدقة عالية وبزمن استجابة منخفض جدًا.

03

تحليل هندسي للإيماءة

حساب المسافات والزوايا بين أطراف الأصابع ومفاصلها لتحديد أي إصبع ممدود أو مطوي، ومقارنة ذلك بأنماط إيماءات معروفة.

04

الرسم والعرض الحي

رسم الهيكل العظمي لليد بألوان مختلفة لكل إصبع على طبقة Canvas منفصلة، مع تحديث لوحة القياسات (FPS، عدد الأيادي، الإيماءة الحالية) في كل إطار.

الإيماءات المدعومة

كل إيماءة يتم التعرف عليها عبر قواعد هندسية بسيطة مبنية على مواقع المفاصل النسبية.

🤏

Pinch

التقاء طرف الإبهام والسبابة في نقطة واحدة — يُستخدم عادة للتحكم بالسحب أو التكبير.

👉

Point

السبابة ممدودة وحدها بينما بقية الأصابع مطوية — إشارة اتجاه أو تحديد.

✌️

Peace

السبابة والوسطى ممدودتان معًا في شكل حرف V.

👍

Thumbs Up

الإبهام ممدود لأعلى وبقية الأصابع مطوية بالكامل.

Fist

جميع الأصابع مطوية بالكامل نحو راحة اليد.

Open Hand

جميع الأصابع ممدودة ومتباعدة — الحالة الافتراضية.

الأدوات المستخدمة

MediaPipe Tasks Vision HandLandmarker Model Vanilla JavaScript Canvas API WebAssembly Cloudflare Pages