MediaPipe Hand Landmarker görevi, bir resimdeki ellerin önemli noktalarını algılamanıza olanak tanır. Bu talimatlarda, web ve JavaScript uygulamaları için Hand Landmarker'ın nasıl kullanılacağı gösterilmektedir.
Bu görevin özellikleri, modelleri ve yapılandırma seçenekleri hakkında daha fazla bilgi için Genel Bakış bölümüne bakın.
Kod örneği
El İşaretçisi'nin örnek kodu, bu görevin JavaScript'te eksiksiz bir uygulamasını referans olarak sunar. Bu kod, bu görevi test etmenize ve kendi el işareti algılama uygulamanızı oluşturmaya başlamanıza yardımcı olur. El İşareti Algılayıcı örneğini yalnızca web tarayıcınızı kullanarak görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz.
Kurulum
Bu bölümde, geliştirme ortamınızı özellikle Hand Landmarker'ı kullanacak şekilde ayarlamayla ilgili temel adımlar açıklanmaktadır. Platform sürümü gereksinimleri de dahil olmak üzere web ve JavaScript geliştirme ortamınızı ayarlama hakkında genel bilgi için Web için kurulum kılavuzu'na bakın.
JavaScript paketleri
Hand Landmarker kodu, MediaPipe @mediapipe/tasks-vision
NPM paketi üzerinden kullanılabilir. Bu kitaplıkları, platform kurulum kılavuzundaki talimatları uygulayarak bulup indirebilirsiniz.
Gerekli paketleri NPM aracılığıyla aşağıdaki komutu kullanarak yükleyebilirsiniz:
npm install @mediapipe/tasks-vision
Görev kodunu bir içerik yayınlama ağı (CDN) hizmeti aracılığıyla içe aktarmak istiyorsanız HTML dosyanızdaki <head> etiketine aşağıdaki kodu ekleyin:
<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
Model
MediaPipe Hand Landmarker görevi için bu görevle uyumlu, eğitilmiş bir model gerekir. El İşaretçisi için mevcut eğitimli modeller hakkında daha fazla bilgi edinmek üzere görev genel bakışındaki Modeller bölümüne bakın.
Bir model seçip indirin ve proje dizininizde saklayın:
<dev-project-root>/app/shared/models/
Görevi oluşturma
Görevi çıkarım çalıştırmaya hazırlamak için Hand Landmarker createFrom...() işlevlerinden birini kullanın. createFromModelPath() işlevini, eğitilmiş model dosyasına ait göreli veya mutlak bir yolla kullanın.
Modeliniz zaten belleğe yüklendiyse createFromModelBuffer() yöntemini kullanabilirsiniz.
Aşağıdaki kod örneğinde, görevi ayarlamak için createFromOptions() işlevinin nasıl kullanılacağı gösterilmektedir. createFromOptions işlevi, yapılandırma seçenekleriyle Hand Landmarker'ı özelleştirmenize olanak tanır. Yapılandırma seçenekleri hakkında daha fazla bilgi için Yapılandırma seçenekleri başlıklı makaleyi inceleyin.
Aşağıdaki kodda, görevin özel seçeneklerle nasıl oluşturulacağı ve yapılandırılacağı gösterilmektedir:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const handLandmarker = await HandLandmarker.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "hand_landmarker.task"
},
numHands: 2
});
Yapılandırma seçenekleri
Bu görev, Web ve JavaScript uygulamaları için aşağıdaki yapılandırma seçeneklerine sahiptir:
| Seçenek Adı | Açıklama | Değer aralığı | Varsayılan değer |
|---|---|---|---|
runningMode |
Görevin çalışma modunu ayarlar. İki mod vardır: RESİM: Tek resim girişleri için mod. VIDEO: Bir videonun veya bir kameradan gelen giriş verilerinin canlı yayınındaki kod çözülmüş kareler için mod. |
{IMAGE, VIDEO} |
IMAGE |
numHands |
El işareti algılayıcısı tarafından algılanan maksimum el sayısı. | Any integer > 0 |
1 |
minHandDetectionConfidence |
El algılamanın avuç içi algılama modelinde başarılı olarak kabul edilmesi için gereken minimum güven puanı. | 0.0 - 1.0 |
0.5 |
minHandPresenceConfidence |
El işareti algılama modelinde el varlığı puanı için minimum güven puanı. Video modunda ve canlı yayın modunda, el işareti modelinden elde edilen el varlığı güven puanı bu eşiğin altındaysa, El İşareti Belirleyici, avuç içi algılama modelini tetikler. Aksi takdirde, sonraki önemli nokta algılamaları için ellerin konumunu hafif bir el takibi algoritması belirler. | 0.0 - 1.0 |
0.5 |
minTrackingConfidence |
El takibinin başarılı kabul edilmesi için gereken minimum güven puanı. Bu, geçerli kare ile son karedeki eller arasındaki sınırlayıcı kutu IoU eşiğidir. Hand Landmarker'ın Video ve Akış modlarında izleme başarısız olursa Hand Landmarker, el algılamayı tetikler. Aksi takdirde el algılama atlanır. | 0.0 - 1.0 |
0.5 |
Verileri hazırlama
El İşaretçisi, ana makine tarayıcısı tarafından desteklenen herhangi bir biçimdeki resimlerde el işaretlerini algılayabilir. Görev, yeniden boyutlandırma, döndürme ve değer normalleştirme dahil olmak üzere veri girişi ön işlemesini de gerçekleştirir. Videolardaki el işaretlerini algılamak için API'yi kullanarak her seferinde bir kareyi hızlıca işleyebilir ve el işaretlerinin videoda ne zaman göründüğünü belirlemek için karenin zaman damgasını kullanabilirsiniz.
Görevi çalıştırma
El İşaretçisi, çıkarımları tetiklemek için detect() (çalıştırma modu image ile) ve detectForVideo() (çalıştırma modu video ile) yöntemlerini kullanır. Görev, verileri işler, el işaretlerini algılamaya çalışır ve sonuçları bildirir.
Hand Landmarker detect() ve detectForVideo() yöntemlerine yapılan çağrılar eşzamanlı olarak çalışır ve kullanıcı arayüzü iş parçacığını engeller. Bir cihazın kamerasından alınan video karelerinde el işaret noktaları algılarsanız her algılama, ana iş parçacığını engeller. detect() ve detectForVideo() yöntemlerini başka bir iş parçacığında çalıştıracak web işçileri uygulayarak bunu önleyebilirsiniz.
Aşağıdaki kodda, görevi işleme modelini kullanarak işlemenin nasıl yürütüleceği gösterilmektedir:
Resim
const image = document.getElementById("image") as HTMLImageElement; const handLandmarkerResult = handLandmarker.detect(image);
Video
await handLandmarker.setOptions({ runningMode: "video" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const detections = handLandmarker.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
El İşaretçisi görevi çalıştırmanın daha eksiksiz bir uygulaması için örneğe bakın.
Sonuçları işleme ve görüntüleme
El İşaret İşaretçisi, her algılama çalıştırması için bir el işaret işaretçisi sonuç nesnesi oluşturur. Sonuç nesnesi, görüntü koordinatlarında el işaret noktalarını, dünya koordinatlarında el işaret noktalarını ve algılanan ellerin el tercihi(sol/sağ el) durumunu içerir.
Aşağıda bu görevden elde edilen çıkış verilerine bir örnek verilmiştir:
HandLandmarkerResult çıkışı üç bileşenden oluşur. Her bileşen bir dizidir. Her öğe, algılanan tek bir el için aşağıdaki sonuçları içerir:
El Tercihi
El tercihi, algılanan ellerin sol mu yoksa sağ el mi olduğunu gösterir.
Önemli noktalar
Her biri
x,yvezkoordinatlarından oluşan 21 el işareti vardır.xveykoordinatları, sırasıyla resim genişliği ve yüksekliği ile [0.0, 1.0] aralığında normalleştirilir.zkoordinatı, bilekteki derinliğin başlangıç noktası olduğu yer işareti derinliğini gösterir. Değer ne kadar küçük olursa önemli nokta kameraya o kadar yakın olur.zöğesinin büyüklüğü, yaklaşık olarakxile aynı ölçeği kullanır.Dünyanın Sınırları
21 el işareti de dünya koordinatlarında gösterilir. Her işaret noktası,
x,yvez'den oluşur. Bunlar, başlangıç noktası elin geometrik merkezi olan, metre cinsinden gerçek dünya 3D koordinatlarını temsil eder.
HandLandmarkerResult:
Handedness:
Categories #0:
index : 0
score : 0.98396
categoryName : Left
Landmarks:
Landmark #0:
x : 0.638852
y : 0.671197
z : -3.41E-7
Landmark #1:
x : 0.634599
y : 0.536441
z : -0.06984
... (21 landmarks for a hand)
WorldLandmarks:
Landmark #0:
x : 0.067485
y : 0.031084
z : 0.055223
Landmark #1:
x : 0.063209
y : -0.00382
z : 0.020920
... (21 world landmarks for a hand)
Aşağıdaki resimde, görev çıktısının görselleştirilmiş hali gösterilmektedir:
El İşaretçisi örnek kodu, görevden döndürülen sonuçların nasıl görüntüleneceğini gösterir. Örneğe göz atın.