iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 27
1
Modern Web

用 Javascript 當個影像魔術師系列 第 27

Day 27 - handtrack.js

隨著影像辨識及機器學習的進步,tensorflow 也推出了瀏覽器版本,讓使用者可以在瀏覽器中使用模型及訓練,也因此為互動上帶來更多可能,但對於機器學習沒有經驗的開發者來說使用上還是會有難度,今天就來介紹一下 handtrack 這個套件,這個套件可以追蹤手部的位置,因為已經對 tensorflow 做了一層封裝,所以在使用上不用去煩惱模型相關的事情,直接使用就可以。

實作

首先安裝

npm install --save handtrackjs

接著在一開始的時候使用,一開始時必須先載入模型,並且可以選擇輸入參數,我們設定下面三個。

  1. 選擇是否翻轉,因為我們是使用內建的鏡頭,所以記得要打開
  2. 最大偵測的數目,這邊就看互動效果來決定,我們先用 1
  3. 相似度闕值,過濾掉相似度低於多少的圖像
import * as handTrack from 'handtrackjs'
async mounted() {
  this.model = await handTrack.load({
    flipHorizontal: true, // flip e.g for video
    maxNumBoxes: 1, // maximum number of boxes to detect
    scoreThreshold: 0.6 // confidence threshold for predictions.
  })
}

因為是從網路上載入模型,模型也蠻大的,所以一開始可能會載入一段時間。載入完就可以開始使用

this.video = this.$refs.video
  handTrack.startVideo(this.video).then(status => {
    console.log('video started')
    if (status) {
      this.runDetection()
    } else {
      console.log('err')
    }
  })

handTrack 可以接收 imgvideocanvas 作為輸入來源,這次我們就使用 video,接著呼叫 startVideo,這時候應該會被詢問是否授權使用鏡頭,回傳的 status 會顯示是否成功,如果成功我們就可以進行下一步。

runDetection() {
    const model = this.model
    const video = this.video
    const canvas = this.bgCanvas
    const context = canvas.getContext('2d')
    model.detect(video).then(predictions => {
      model.renderPredictions(predictions, canvas, context, video)
      requestAnimationFrame(this.runDetection)
    })
  }

主要就是使用 detect 這個方法,接著會回傳一系列的結果,可以使用 renderPredictions 方法,丟入一個 canvas 以及 context 把偵測到的手部去做直接繪製,所以沒問題的話現在應該可以直接顯示到螢幕上了。

非常簡單吧!當一個呼叫 api 工程師的生活就是如此樸實無華且枯燥,今天就先介紹到這邊,對機器學習有興趣者也可至 tensorflow 觀看其他應用,明天再來看可以拿來玩什麼應用!


上一篇
Day 26 - 做個梗圖編輯器 (下)
下一篇
Day 28 - 做個刮刮樂
系列文
用 Javascript 當個影像魔術師30

尚未有邦友留言

立即登入留言