MediaPipe El İşaretçisi görevi, bir görüntüdeki ellerin önemli noktalarını algılamanızı sağlar. Bu talimatlarda, El İşaretçisi'nin nasıl kullanılacağı gösterilmektedir. web ve JavaScript uygulamaları için.
Özellikler, modeller ve yapılandırma seçenekleri hakkında daha fazla bilgi Bu görev hakkında daha fazla bilgi için Genel Bakış'ı inceleyin.
Kod örneği
El İşaretçisi için örnek kod, bu öğenin tam olarak uygulanmasına görevi aşağıda bulabilirsiniz. Bu kod, görevi test etmenize ve kendi elinizle önemli nokta algılama uygulamanızı geliştirmeye başladınız. Bu dosyaları görüntüleyebilir, çalıştırabilir El İşaretçisi örnek kodunu düzenleyin yalnızca web tarayıcınızı kullanarak.
Kurulum
Bu bölümde, geliştirme ortamınızı kurmaya yönelik temel adımlar açıklanmaktadır. özellikle de El İşaretçisi'ni kullanabilirsiniz. Şu konularda genel bilgi için: dahil olmak üzere web ve JavaScript geliştirme ortamınızı daha fazla bilgi için Web için kurulum kılavuzu.
JavaScript paketleri
El İşaretçisi kodu MediaPipe @mediapipe/tasks-vision üzerinden kullanılabilir
NPM paketi. Şunları yapabilirsiniz:
platformdaki talimatları uygulayarak bu kitaplıkları bulup indirin
Kurulum kılavuzu.
Gerekli paketleri NPM üzerinden yükleyebilirsiniz kullanabilirsiniz:
npm install @mediapipe/tasks-vision
Görev kodunu içerik yayınlama ağı (CDN) aracılığıyla içe aktarmak istiyorsanız aşağıdaki kodu <head> bölümüne ekleyin ve etiketini 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örevi görebilir. El İşaretçisi için mevcut eğitilmiş modeller hakkında daha fazla bilgi için bkz. göreve genel bakış Modeller bölümü.
Bir model seçip indirin ve ardından bu modeli proje dizininizde depolayın:
<dev-project-root>/app/shared/models/
Görevi oluşturma
El İşaretçisi createFrom...() işlevlerinden birini kullanarak
çıkarımları yapmaya hazır hale getirebilirsiniz. createFromModelPath() kullanın
işlevi, eğitilen model dosyasına giden göreli veya mutlak bir yolla
Modeliniz belleğe zaten yüklenmişse aşağıdakileri kullanabilirsiniz:
createFromModelBuffer() yöntemini çağırın.
Aşağıdaki kod örneğinde, createFromOptions() işlevinin
görevi ayarlayın. createFromOptions işlevi,
Yapılandırma seçeneklerine sahip El İşaretçisi. Yapılandırma hakkında daha fazla bilgi için
Yapılandırma seçenekleri bölümüne bakın.
Aşağıdaki kod, görevin özel seçenekler:
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 için aşağıdaki yapılandırma seçeneklerine sahiptir uygulamalar:
| Seçenek Adı | Açıklama | Değer Aralığı | Varsayılan Değer |
|---|---|---|---|
runningMode |
Görev için çalışma modunu ayarlar. İki tür
modlar: . IMAGE: Tek resimli giriş modu. . . VIDEO: Bir karedeki kodu çözülmüş karelere ilişkin mod kameradan alınan video veya giriş verileri gibi bir yayın paylaşabilir. |
{IMAGE, VIDEO} |
IMAGE |
numHands |
El önemli nokta dedektörü tarafından algılanan maksimum el sayısı. | Any integer > 0 |
1 |
minHandDetectionConfidence |
El algılama için minimum güven puanı için başarılı bir yöntem olarak nitelendiriliyor. | 0.0 - 1.0 |
0.5 |
minHandPresenceConfidence |
Eldeki el varlığı puanı için minimum güven puanı önemli nokta algılama modelidir. Video ve Canlı yayın modunda El yer işareti modelindeki el varlığı güven puanının altındaysa el İşaretçisi, avuç içi algılama modelini tetikler. Aksi halde, basit bir el izleme algoritması, kullanıcının nerede olduğunu ellerinizi rahatça kullanabileceksiniz. | 0.0 - 1.0 |
0.5 |
minTrackingConfidence |
El takibi için dikkate alınacak minimum güven puanı işidir. Bu, testteki eller arasındaki sınırlayıcı kutu IoU eşiğidir geçerli kareyi ve son kareyi gösterir. Video modunda ve Akış modunda: El İşaretçisi, takip başarısız olursa El İşaretçisi eli tetikler tespit edebilir. Aksi takdirde, el algılaması atlanır. | 0.0 - 1.0 |
0.5 |
Verileri hazırlama
El İşaretçisi, ana tarayıcı tarayıcısı. Görev ayrıca aşağıdakiler de dahil olmak üzere veri girişi ön işlemesini: yeniden boyutlandırma, döndürme ve değer normalleştirmesi gibi. Videolarda el ile önemli noktaları tespit etmek için: zaman damgasını kullanarak her seferinde bir kareyi hızlı bir şekilde işlemek için API'yi el ile gösterilen önemli noktaların videoda ne zaman bulunduğunu belirlemek için karenin kenarlarını kaldırın.
Görevi çalıştırma
El İşaretçisi, detect() (koşu modu image ile) ve
Tetiklenecek detectForVideo() (çalışma modu video ile) yöntemi
çıkarımlar. Görev, verileri işler, ellerdeki önemli noktaları algılamaya çalışır ve
ve sonuçları bildirir.
El İşaretçisi detect() ve detectForVideo() yöntemlerine yapılan çağrılar çalıştırılır
senkronize edin ve kullanıcı arayüzü ileti dizisini engelleyin. Elle ilgili önemli noktalar algılanırsa
cihaz kamerasından video karelerinde her algılama
ileti dizisi. detect() öğesini çalıştırmak üzere web çalışanlarını uygulayarak bunu önleyebilirsiniz
ve detectForVideo() yöntem başka bir ileti dizisinde.
Aşağıdaki kod, işlemin 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 bkz. kod örneği hakkında daha fazla bilgi edinin.
Sonuçları işleme ve görüntüleme
El İşaretçisi, her algılama için bir el işaretleyici sonuç nesnesi oluşturur gerekir. Sonuç nesnesi, resim koordinatlarında el işaretleri, el algılanan önemli noktanın dünya koordinatlarındaki ve el görüşlerindeki(sol/sağ el) önemli noktalar eller.
Aşağıda, bu görevdeki çıkış verilerinin bir örneği gösterilmektedir:
HandLandmarkerResult çıkışı üç bileşen içerir. Her bileşen bir dizidir. Burada her öğe, algılanan tek bir el için aşağıdaki sonuçları içerir:
Uygun Olduğu El
El tercihi, algılanan ellerin sol el mi yoksa sağ el mi olduğunu belirtir.
Önemli noktalar
Her biri
x,yvezkoordinatlarından oluşan 21 el önemli noktası vardır. İlgili içeriği oluşturmak için kullanılanxveykoordinatları, resim genişliğine göre [0,0, 1,0] değerine yüksekliğine dikkat edin.zkoordinatı, belirgin işaret derinliğini gösterir oryantasyon yani bilek derinliği. Değer küçüldükçe kameraya kadar uzanıyorum.zboyutu ile yaklaşık olarak aynı ölçeği kullanırx.Dünyanın Sınırları
21 el önemli noktaları da dünya koordinatlarıyla gösterilir. Her bir önemli nokta gerçek dünya 3D koordinatlarını temsil eden
x,yvezbirleşiminden oluşur metre cinsinden, başlangıç noktası avucunun geometrik merkezinde yer alır.
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örselleştirmesi gösterilmektedir:
El İşaretçisi örnek kodu, doğru işareti gösteren daha fazla bilgi edinmek için kod örneği