插件描述：通過分析tracking.js文件實現多人同時檢測人臉并將區域限定范圍內的人臉標識出來，并保存為圖片格式。

注：本地預覽請用火狐瀏覽器，chrome瀏覽器需要在服務端查看效果

tracking.js

Tracking.js 是一個獨立的JavaScript庫，用于跟蹤從相機實時收到的數據。跟蹤的數據既可以是顏色，也可以是人，也就是說我們可以通過檢測到某特定顏色，或者檢測一個人體/臉的出現與移動，來觸發JavaScript 事件。它是非常易于使用的API，具有數個方法和事件(足夠使用了)。

還有一個我覺得不錯的功能就是，截取攝像頭的圖像，對于一些網站用這個功能來設置用戶頭像也是個很炫的功能。

簡單實例

引入核心類:

引入顏色模型類:

實例化類啟用電腦的攝像頭:var?videoCamera?=?new?tracking.VideoCamera().render();

實例化跟蹤通過顏色洋紅和顯示X,Y和Z位置的檢測區域在控制臺::videoCamera.track({

type:?'color',

color:?'magenta',

onFound:?function(track)?{

console.log(track.x,?track.y,?track.z);

},

onNotFound:?function()?{}

});

Note: 如果你想在本地運行 tracking.js 實例,你需要一個本地服務器,因為getUserMedia() 方法在 file:/// 這樣的地址在一些瀏覽器中將不能用.

結構tracking.js : 核心類文件;

color.js : 顏色跟蹤模型

human.js : 人物跟蹤模型.

方法

下面的一些類和方法你可以用他們來實現你的一些目標, 例如:new?tracking.VideoCamera()

請求使用用戶電腦上的攝像頭通過使用WebRTC's getUserMedia().new?tracking.VideoCamera().render()

將用戶攝像頭的圖像通過一個? 元素來插入到DOM模型中.

Render()方法列可以傳遞進去一個參數，該參數可以設置 元素插入到dom中的位置。參數值例如：#id? .class? ?elemet_name

如果不穿參數， 元素的插入位置會緊鄰該句的javascript標簽后面。new?tracking.VideoCamera().set()

設置參數：

width 圖像寬度

height 圖像高度new?tracking.VideoCamera().get()

獲取參數：

width 圖像寬度

height 圖像高度

visible 可見性true和false

new tracking.VideoCamera().toDataURL()

返回瞬時圖像地址? 可以做為img的src屬性所用new?tracking.VideoCamera().hide()

隱藏? 元素。 tracking.VideoCamera(). In order to add information to the scene the element could be displayed instead of the .new?tracking.VideoCamera().show()

顯示隱藏? 元素。new?tracking.VideoCamera().renderVideoCanvas()

將用戶攝像頭獲取的圖像生成到? 元素，

(我測試了一下，不顯示，不知道為什么).tracking.all(“選擇器”)

返回所有html元素tracking.one(“選擇器”)

返回一個html元素

參數

當初始化對象 tracking.VideoCamera().track(),您可以選擇指定一些參數,例如:type?{string}?:?可以是?color?or?human.

跟蹤類型：顏色或人物new?tracking.VideoCamera().track({

type:?'color'

});

顏色跟蹤

color {string} : 值可以是 cyan, magenta or yellow (default is magenta). 青色、洋紅色，黃色new?tracking.VideoCamera().track({

type:?'color',

color:?'yellow'

});

人物跟蹤

data {string} : 值可以是 eye, frontal_face, mouth or upper_body (default is frontal_face). 眼睛、臉廓、嘴new?tracking.VideoCamera().track({

type:?'human',

data:?'eye'

});

事件

onFound : 每次檢測到目標時就會觸發該事件new?tracking.VideoCamera().track({

onFound:?function(track)?{

//?do?something

}

});

onNotFound : 每次沒有檢測到目標時就會觸發該事件.new?tracking.VideoCamera().track({

onNotFound:?function(track)?{

//?do?something

}

});

具體使用方法可以查看官網，其中：rect.x, rect.y, rect.width, rect.height這四個參數表示左上角的坐標和框出來人臉的大小。

總結

以上是生活随笔為你收集整理的html5+前端脸部识别采集,前端人脸识别框架Tracking.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。