者:沫沫 政采云前端團(tuán)隊(duì)
轉(zhuǎn)發(fā)鏈接:https://mp.weixin.qq.com/s/fRDpXixnLIy9c0Uh2tMezQ
一直對(duì)人工智能有著極大興趣,無奈腦袋再大也無法想象那是一種怎樣的算法實(shí)現(xiàn)機(jī)制,因此無論是遇到聲音識(shí)別、色彩識(shí)別還是人臉檢測(cè)的需求,我都說不會(huì)、不知道、不了解!
今天給大家介紹的tracking.js庫(kù)帶來不同的計(jì)算機(jī)視覺算法和技術(shù),在瀏覽器環(huán)境。通過使用現(xiàn)代的HTML5規(guī)范,我們讓你做實(shí)時(shí)色彩跟蹤,人臉檢測(cè)以及更多,小伙伴們終于可以發(fā)揮自己無限的想象力了。
下面是一些效果圖。
這個(gè)游戲 呢 是開啟攝像頭后,根據(jù)玩家頭的轉(zhuǎn)向進(jìn)行控制的,非常有意思。
雖然看上去挺高深的但是使用起來卻很方便。
第1步:創(chuàng)建示例文件
在此步驟中,您將創(chuàng)建下示例文件examples/
夾到您解壓的本地驅(qū)動(dòng)器下的項(xiàng)目。進(jìn)入該目錄,并創(chuàng)建一個(gè)名為在你喜歡的編輯器文件。起始文件看起來像這樣:first_tracking.html
<!doctype html><html><head>
<meta charset="utf-8">
<title>tracking.js - first tracking</title>
<script src="../build/tracking-min.js"></script></head><body>
<script>
// Start tracking here...
</script></body></html>
步驟2:選擇需要的功能
現(xiàn)在,你有示例文件創(chuàng)建的,它的時(shí)間來選擇你要在行動(dòng)中看到什么技術(shù)。有此頁(yè)面上提供了幾個(gè)例子,第一個(gè),的跟蹤,僅僅是一個(gè)抽象類的其他跟蹤技術(shù)基礎(chǔ),不能被實(shí)例化。一個(gè)很好的選擇下手的是ColorTracker,復(fù)制本部分提供的片段,并貼到您的示例文件,它到底應(yīng)該是這個(gè)樣子:first_tracking.html
<!doctype html><html><head>
<meta charset="utf-8">
<title>tracking.js - first tracking</title>
<script src="../build/tracking-min.js"></script></head><body>
<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
<script>
var colors=new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
colors.on('track', function(event) {
if (event.data.length===0) { // No colors were detected in this frame.
} else {
event.data.forEach(function(rect) {
console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
});
}
});
tracking.track('#myVideo', colors); </script></body></html>
這個(gè)例子會(huì)要求你出現(xiàn)在它的前置攝像頭和跟蹤品紅,青色和黃色??纯茨愕闹車?,抓住這些顏色中的一種匹配的任何對(duì)象,看你的瀏覽器的控制臺(tái),它應(yīng)該顯示所有找到的對(duì)象的坐標(biāo)。
項(xiàng)目的官網(wǎng)是:https://trackingjs.com/docs.html#introduction
或者直接用github搜tracking.
就這么多,enjoy it!!!
天我們來探討人臉檢測(cè)。就像我們現(xiàn)在看到的這個(gè)界面一樣,通過人臉檢測(cè)技術(shù),可以識(shí)別出用戶的眉毛、眼睛、鼻子、嘴巴和下巴的輪廓,還可以判斷用戶的大致年齡和性別。下面,我們將詳細(xì)介紹如何實(shí)現(xiàn)這一功能。
實(shí)現(xiàn)人臉檢測(cè)的代碼非常簡(jiǎn)單。我們需要使用faceAPI點(diǎn)JS庫(kù),具體實(shí)現(xiàn)代碼可以參考這個(gè)網(wǎng)址:https://github.com/faceapi/faceapi.nts.age。在第一個(gè)頁(yè)面中,我們需要先加載模型,將各種模型導(dǎo)入到系統(tǒng)中。模型可以從GitHub上下載,并保存在相應(yīng)的目錄中。加載完成后,我們需要執(zhí)行人臉檢測(cè)的方法,獲取畫布和視頻的元素,并進(jìn)行判斷。如果視頻不存在,我們需要返回。接下來,我們需要調(diào)取電腦攝像頭,并設(shè)置一個(gè)定時(shí)器,每100毫秒執(zhí)行一次檢測(cè)。同時(shí),我們還需要設(shè)置一個(gè)參數(shù)或ido,以采集音頻數(shù)據(jù)。接下來,我們需要使用face API進(jìn)行檢測(cè)。在檢測(cè)過程中,我們需要設(shè)置一個(gè)計(jì)時(shí)器,每100毫秒重繪一次。最后,我們需要獲取檢測(cè)視頻中的關(guān)鍵點(diǎn),包括輪廓、年齡和面部表情等信息。這將返回一個(gè)數(shù)組,其中包含多個(gè)點(diǎn)。我們需要清除畫布,因?yàn)槊?00毫秒都會(huì)執(zhí)行檢測(cè),并且需要繪制人臉的邊框和表情。點(diǎn)擊邊框或表情,可以獲取更多信息,包括年齡和性別等。
由于攝像頭可以檢測(cè)多個(gè)用戶,因此檢測(cè)結(jié)果將返回一個(gè)數(shù)組。我們需要根據(jù)畫布的大小進(jìn)行檢測(cè)。接著,我們需要獲取檢測(cè)結(jié)果,并根據(jù)畫布大小進(jìn)行檢測(cè)。在這一步中,我們需要繪制人臉的邊框和表情。點(diǎn)擊邊框或表情,可以獲取更多信息,包括年齡和性別等。
最后,我們需要將年齡和性別等信息繪制到Facebook上,完成整個(gè)人臉檢測(cè)功能的實(shí)現(xiàn)。整個(gè)代碼量并不大,可以輕松實(shí)現(xiàn)人臉識(shí)別和檢測(cè)功能。
通過API,我們可以獲取下巴、鼻子、嘴巴、左眼、右眼、左邊和右邊等關(guān)鍵點(diǎn)。我們可以根據(jù)這些點(diǎn)的位置,對(duì)嘴巴、眼睛等部位進(jìn)行處理,例如在戴口罩時(shí)進(jìn)行調(diào)整,或者在眼睛上添加特效等?;谶@些特征點(diǎn),可以進(jìn)行一些處理。
大家可以了解一下faceAPIJS,它有很多實(shí)用功能。
另外,可以參考FD的運(yùn)行過程,同時(shí)也有相關(guān)示例可供參考。今天的分享就到這里。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。