Web için hareket tanıma kılavuzu

MediaPipe Hareket Tanımlayıcı görevi, el hareketlerini gerçek zamanlı olarak tanımanızı sağlar. tanınan el hareketi sonuçlarını ve el ile gösterilen önemli noktaları tespit etti. Bu talimatlarda Hareket Tanımlayıcı'nın nasıl kullanılacağı gösterilmektedir web ve JavaScript uygulamaları için.

Bu görevi, demo. Ö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

Hareket Tanıyıcı'nın örnek kodu, bu özelliğin eksiksiz bir şekilde uygulanmasını sağlar görevi aşağıda bulabilirsiniz. Bu kod, görevi test etmenize ve kendi hareket tanıma uygulamanızı oluşturmaya başladınız. Bu dosyaları görüntüleyebilir, çalıştırabilir Hareket Tanıyıcı ö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. özel olarak Hareket Tanıyıcı'yı kullanıyor. Ş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

Hareket Tanıyıcı 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 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 Hareket Tanıyıcı görevi, bu komutla uyumlu olan eğitilmiş bir model gerektirir görevi görebilir. Hareket Tanıma Aracı'nın eğitilen modelleri hakkında daha fazla bilgi için bkz. göreve genel bakış Modeller bölümü.

Modeli seçin ve indirin, ardından proje dizininizde depolayın:

<dev-project-root>/app/shared/models/

Görevi oluşturma

Şu işlemler için Hareket Tanımlayıcı createFrom...() işlevlerinden birini kullanın: çı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 Hareket Tanıyıcı. 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:

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

Yapılandırma seçenekleri

Bu görev, web uygulamaları için aşağıdaki yapılandırma seçeneklerini içerir:

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
num_hands Maksimum el sayısı şu kullanıcı tarafından algılanabilir: GestureRecognizer. Any integer > 0 1
min_hand_detection_confidence 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
min_hand_presence_confidence Elde tutma puanının minimum güven puanı önemli nokta algılama modelidir. Hareket Tanıyıcı'nın Video ve Canlı yayın modunda ise el yer işareti modelinin el varlığı güven puanı aşağıdaysa avuç içi algılama modelini tetikler. Aksi halde, konumunu belirlemek için basit bir el izleme algoritması ellerinizi rahatça kullanabileceksiniz. 0.0 - 1.0 0.5
min_tracking_confidence 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: Hareket Tanıyıcı, izleme başarısız olursa Hareket Tanıyıcı eli tetikler tespit edebilir. Aksi takdirde, el algılama özelliği atlanır. 0.0 - 1.0 0.5
canned_gestures_classifier_options Hazır hareketler sınıflandırıcı davranışını yapılandırma seçenekleri. Hazır hareketler: ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
  • Görünen adlar yerel ayarı: varsa TFLite Model Meta Verileri ile belirtilen görünen adlar için kullanılacak yerel ayar.
  • Maksimum sonuç sayısı: Döndürülecek en yüksek puanlı sınıflandırma sonuçlarının maksimum sayısı. < 0 ise tüm mevcut sonuçlar döndürülür.
  • Puan eşiği: Aşağıdaki sonuçların reddedildiği puan. 0 değerine ayarlanırsa mevcut tüm sonuçlar döndürülür.
  • Kategori izin verilenler listesi: kategori adlarının izin verilenler listesi. Boş değilse, kategorisi bu kümede bulunmayan sınıflandırma sonuçları filtrelenir. Ret listesiyle birlikte kullanılamaz.
  • Kategori ret listesi: kategori adlarının ret listesi. Boş değilse, kategorisi bu kümede bulunan sınıflandırma sonuçları filtrelenir. İzin verilenler listesi ile birlikte hariç tutulur.
    		•
    • Görünen adlar yerel ayarı: any string
    • Maksimum sonuç sayısı: any integer
    • Puan eşiği: 0.0-1.0
    • Kategori izin verilenler listesi: vector of strings
    • Kategori ret listesi: vector of strings
    • Görünen adlar yerel ayarı: "en"
    • Maksimum sonuç sayısı: -1
    • Puan eşiği: 0
    • Kategori izin verilenler listesi: boş
    • Kategori ret listesi: boş
    custom_gestures_classifier_options Özel hareketler sınıflandırıcı davranışını yapılandırma seçenekleri.
  • Görünen adlar yerel ayarı: varsa TFLite Model Meta Verileri ile belirtilen görünen adlar için kullanılacak yerel ayar.
  • Maksimum sonuç sayısı: Döndürülecek en yüksek puanlı sınıflandırma sonuçlarının maksimum sayısı. < 0 ise tüm mevcut sonuçlar döndürülür.
  • Puan eşiği: Aşağıdaki sonuçların reddedildiği puan. 0 değerine ayarlanırsa mevcut tüm sonuçlar döndürülür.
  • Kategori izin verilenler listesi: kategori adlarının izin verilenler listesi. Boş değilse, kategorisi bu kümede bulunmayan sınıflandırma sonuçları filtrelenir. Ret listesiyle birlikte kullanılamaz.
  • Kategori ret listesi: kategori adlarının ret listesi. Boş değilse, kategorisi bu kümede bulunan sınıflandırma sonuçları filtrelenir. İzin verilenler listesi ile birlikte hariç tutulur.
    		•
    • Görünen adlar yerel ayarı: any string
    • Maksimum sonuç sayısı: any integer
    • Puan eşiği: 0.0-1.0
    • Kategori izin verilenler listesi: vector of strings
    • Kategori ret listesi: vector of strings
    • Görünen adlar yerel ayarı: "en"
    • Maksimum sonuç sayısı: -1
    • Puan eşiği: 0
    • Kategori izin verilenler listesi: boş
    • Kategori ret listesi: boş

    Verileri hazırlama

    Hareket Tanıyıcı, Google tarafından desteklenen her biçimdeki resimlerdeki hareketleri tanıyabilir 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. Videolardaki hareketleri tanımak için: zaman damgasını kullanarak her seferinde bir kareyi hızlı bir şekilde işlemek çerçeve içine alın.

    Görevi çalıştırma

    Hareket Tanıyıcı, recognize() (çalışma modu 'image' ile) ve Tetiklenecek recognizeForVideo() (çalışma modu 'video' ile) yöntemi çıkarımlar. Görev verileri işler, el tanımaya çalışır hareket ettirir ve ardından sonuçları raporlar.

    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 gestureRecognitionResult = gestureRecognizer.recognize(image);

    Video

    await gestureRecognizer.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

    Hareket Tanımlayıcı recognize() ve recognizeForVideo() yöntemlerine yapılan çağrılar çalıştırılır senkronize edin ve kullanıcı arayüzü ileti dizisini engelleyin. Ekrandaki hareketleri tanıyıp cihazın kamerasından video kareleri alırsanız her tanıma ileti dizisi. Web çalışanlarını kullanarak bu durumu önleyebilirsiniz. Başka bir ileti dizisinde recognize() ve recognizeForVideo() yöntemleri.

    Hareket Tanımlayıcı 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

    Hareket Tanıyıcı, her hareket için birer hareket algılama sonuç nesnesi oluşturur çalışmasıdır. Sonuç nesnesi, resim koordinatlarında el işaretleri içerir dünya koordinatlarındaki el önemli noktaları, el tercihi(sol/sağ el) ve el algılanan ellerin hareket kategorilerini içerir.

    Aşağıda, bu görevdeki çıkış verilerinin bir örneği gösterilmektedir:

    Sonuç olarak elde edilen GestureRecognizerResult dört bileşen içerir ve her bileşen bir dizidir. Burada her öğe, algılanan tek bir elin algılanan sonucunu içerir.

    • Uygun Olduğu El

      El tercihi, algılanan ellerin sol el mi yoksa sağ el mi olduğunu belirtir.

    • Hareketler

      Algılanan ellerin tanınan hareket kategorileri.

    • Önemli noktalar

      Her biri x, y ve z koordinatlarından oluşan 21 el önemli noktası vardır. İlgili içeriği oluşturmak için kullanılan x ve y koordinatları, resim genişliğine göre [0,0, 1,0] değerine yüksekliğine dikkat edin. z koordinatı, belirgin işaret derinliğini gösterir oryantasyon yani bilek derinliği. Değer ne kadar küçükse kameraya kadar uzanıyorum. z boyutu ile yaklaşık olarak aynı ölçeği kullanır x.

    • 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, y ve z birleşiminden oluşur metre cinsinden, başlangıç noktası avucunun geometrik merkezinde yer alır.

    GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  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 görüntülerde, görev çıkışının görselleştirmesi gösterilmektedir:

    Hareket Tanımlayıcı görevi oluşturma konusunda daha kapsamlı bilgi için bkz. kod örneği hakkında daha fazla bilgi edinin.