MediaPipe El İşaretçisi görevi, bir görüntüdeki ellerin önemli noktalarını algılamanızı sağlar. Bu talimatlar, Web ve JavaScript uygulamaları için El İşaretçisi'nin nasıl kullanılacağını göstermektedir.
Bu görevin özellikleri, modelleri ve yapılandırma seçenekleri hakkında daha fazla bilgi için Genel Bakış'a bakın.
Kod örneği
El İşaretçisi için örnek kod, size referans olması açısından bu görevin JavaScript'te eksiksiz bir uygulamasını sunmaktadır. Bu kod, bu görevi test etmenize ve kendi el işareti algılama uygulamanızı oluşturmaya başlamanıza yardımcı olur. Yalnızca web tarayıcınızı kullanarak El İşaretçisi örnek kodunu görüntüleyebilir, çalıştırabilir ve düzenleyebilirsiniz.
Kurulum
Bu bölümde, özellikle El İşaretçisi'ni kullanmak için geliştirme ortamınızı ayarlamaya yönelik temel adımlar açıklanmaktadır. Platform sürümü gereksinimleri dahil olmak üzere web ve JavaScript geliştirme ortamınızı ayarlama hakkında genel bilgiler için Web kurulum kılavuzuna bakın.
JavaScript paketleri
El İşaretçi kodu, MediaPipe @mediapipe/tasks-vision
NPM paketi aracılığıyla kullanılabilir. Bu kitaplıkları, platform Kurulum kılavuzundaki talimatları uygulayarak bulup indirebilirsiniz.
Aşağıdaki komutu kullanarak gerekli paketleri AİOY üzerinden yükleyebilirsiniz:
npm install @mediapipe/tasks-vision
Görev kodunu bir içerik yayınlama ağı (CDN) hizmeti aracılığıyla içe aktarmak isterseniz aşağıdaki kodu HTML dosyanızdaki <head> etiketine 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.js"
crossorigin="anonymous"></script>
</head>
Model
MediaPipe El İşaretçisi görevi, bu görevle uyumlu, eğitilmiş bir model gerektirir. El İşaretçisi için eğitilmiş modeller hakkında daha fazla bilgi almak için göreve genel bakış Modeller bölümüne bakın.
Bir model seçip indirin ve ardından proje dizininizde depolayın:
<dev-project-root>/app/shared/models/
Görevi oluşturma
Çıkarım yapma görevi hazırlamak için
El İşaretçisi createFrom...() işlevlerinden birini kullanın. createFromModelPath() işlevini, eğitilen model dosyasına giden göreli veya mutlak bir yolla kullanın.
Modeliniz belleğe zaten yüklenmişse createFromModelBuffer() yöntemini kullanabilirsiniz.
Aşağıdaki kod örneği, görevi ayarlamak için createFromOptions() işlevinin kullanımını gösterir. createFromOptions işlevi, El İşaretçisi'ni yapılandırma seçenekleriyle özelleştirmenize olanak tanır. Yapılandırma seçenekleri hakkında daha fazla bilgi edinmek için Yapılandırma seçenekleri bölümüne bakın.
Aşağıdaki kod, görevin özel seçeneklerle nasıl oluşturulacağını ve yapılandırılacağını gösterir:
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 modu. VİDEO: Bir videonun kodu çözülmüş kareleri veya kamera gibi giriş verilerinin canlı yayınındaki mod. |
{IMAGE, VIDEO} |
IMAGE |
numHands |
El işareti dedektörü tarafından algılanan maksimum el sayısı. | Any integer > 0 |
1 |
minHandDetectionConfidence |
El algılamasının, avuç içi algılama modelinde başarılı olarak değerlendirilebilmesi için gereken minimum güven puanı. | 0.0 - 1.0 |
0.5 |
minHandPresenceConfidence |
El önemli nokta algılama modelindeki el varlığı puanı için minimum güven puanı. Video modunda ve Canlı yayın modunda, el belirgin işaret modelindeki el varlığı güven puanı bu eşiğin altındaysa El İşaretçisi avuç içi algılama modelini tetikler. Aksi takdirde, sonraki önemli nokta algılamaları için ellerin konumunu basit bir el izleme algoritması belirler. | 0.0 - 1.0 |
0.5 |
minTrackingConfidence |
Elle izlemenin başarılı olarak kabul edilmesi için gereken minimum güven puanı. Bu, geçerli çerçevede ve son karede bulunan eller arasındaki sınırlayıcı kutu IoU eşiğidir. El İşaretçisi'nin Video ve Akış modunda izleme başarısız olursa El İşaretçisi el algılamayı tetikler. Aksi halde, el algılaması atlanır. | 0.0 - 1.0 |
0.5 |
Verileri hazırlama
El İşaretçisi, ana makine tarayıcısının desteklediği herhangi bir biçimde resimlerdeki el işaretlerini algılayabilir. Görev; yeniden boyutlandırma, döndürme ve değer normalleştirmesi dahil olmak üzere, veri girişi ön işlemesini de yönetir. Videolarda el ile ilgili önemli noktaları algılamak için API'yi kullanarak tek seferde bir kareyi hızlıca işleyebilirsiniz. Bunun için karenin zaman damgasını kullanıp el ile ilgili önemli noktaların videoda ne zaman oluştuğunu belirleyebilirsiniz.
Görevi çalıştırma
El İşaretçisi, çıkarımları tetiklemek için detect() (koşu moduyla image) ve detectForVideo() (koşu moduyla video) yöntemlerini kullanır. Görev verileri işler, el ile ilgili önemli noktaları tespit etmeye çalışır ve ardından sonuçları bildirir.
El İşaretçisi detect() ve detectForVideo() yöntemlerine yapılan çağrılar eşzamanlı olarak çalışır ve kullanıcı arayüzü ileti dizisini engeller. Video karelerinde el ile ilgili önemli noktaları bir cihazın kamerasından 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 çalışanları uygulayarak bunu önleyebilirsiniz.
Aşağıdaki kod, işlemenin görev modeliyle nasıl yürütüldüğünü gösterir:
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 kapsamlı bir uygulaması için kod örneğine bakın.
Sonuçları işleme ve görüntüleme
El İşaretçisi, her algılama çalıştırması için bir el işaretçisi sonuç nesnesi oluşturur. Sonuç nesnesi, resim koordinatlarında el yer işaretleri, dünya koordinatlarındaki el işaretleri ve algılanan ellerin el tercihini(sol/sağ el) içerir.
Aşağıda, bu görevden alınan çıkış verilerinin bir örneği gösterilmektedir:
HandLandmarkerResult çıkışı üç bileşen içerir. Her bileşen bir dizidir. Bu dizide her öğe, algılanan tek bir el için aşağıdaki sonuçları içerir:
Uygun Olduğu El
El bilgisi, algılanan ellerin sol el mi yoksa sağ el mi olduğunu belirtir.
Önemli noktalar
Her biri
x,yvezkoordinatlarından oluşan 21 önemli nokta vardır.xveykoordinatları, sırasıyla resim genişliği ve yüksekliğine göre [0,0, 1,0] olacak şekilde normalleştirilir.zkoordinatı, önemli nokta derinliğini temsil eder. Bilekteki derinlik ise başlangıç noktasıdır. Değer ne kadar küçükse nokta kameraya o kadar yakın olur.zölçeğinin büyüklüğü,xile yaklaşık olarak aynı ölçeği kullanır.Dünyanın Sınırları
21 önemli nokta, dünya koordinatlarında da gösterilir. Her önemli nokta,
x,yvezöğelerinden oluşur. Bu noktalar, başlangıç noktası elin geometrik merkezinde olmak üzere gerçek dünyadaki 3D koordinatları metre cinsinden 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 çıkışının görseli 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. Kod örneğine