成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端簡單面部識別

econi / 2913人閱讀

摘要：前言過年了，來點(diǎn)有趣的東西最近一直在嘗試通過如何視頻，怎么捕捉視頻的行為，給視頻加點(diǎn)好玩的東西比如給視頻加一個(gè)胡子以下記錄一下最近的玩具點(diǎn)擊這里看自己的效果需要允許攝像頭呀效果效果大概如下就是給視頻的臉上加個(gè)胡子我手機(jī)上有防藍(lán)光的膜，各位大

前言

過年了，來點(diǎn)有趣的東西

最近一直在嘗試通過web如何DIY視頻，怎么捕捉視頻的行為，給視頻加點(diǎn)好玩的東西,比如給視頻加一個(gè)胡子？

以下記錄一下最近的玩具

live demo

點(diǎn)擊這里看自己的效果（需要允許攝像頭呀?。。?/p> 效果

效果大概如下:
就是給視頻的臉上加個(gè)胡子（我手機(jī)上有防藍(lán)光的膜，各位大爺將就著看吧）

思路

首先我做的視頻動態(tài)繪制胡子的東西，那肯定要先支持視頻吧

支持視頻

這里代碼就非常簡單，新建一個(gè)html，寫上一個(gè)video標(biāo)簽

navigator.getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia

if (navigator.getUserMedia) {
    navigator.getUserMedia(
        { video: { width: 500, height: 500 } },
        function (stream) {
            var video = document.querySelector("video")
            video.srcObject = stream
            video.onloadedmetadata = function (e) {
                video.play()
            }
        },
        function (err) {
            console.log("The following error occurred: " + err.name)
        }
    )
} else {
    console.log("getUserMedia not supported")
}

寫到這里視頻就可以播放了

然后我們把這個(gè)視頻放進(jìn)canvas里,

其實(shí)就是定時(shí)采集video的內(nèi)容，然后drawImage到canvas就好了

    setInterval(() => {
      v.drawImage(video, 0, 0, 500, 375)
      vData = v.getImageData(0, 0, 500, 375)    
    }, 20)

這里開始canvas里面的內(nèi)容也就開始動起來了

下面就是必要重要的內(nèi)容了

面部識別

我要做的是面部識別，所有怎么識別呢

讓我自己現(xiàn)場實(shí)現(xiàn)一個(gè)（不存在的，雖然在學(xué)機(jī)器學(xué)習(xí)，但是才學(xué)了幾天，還遠(yuǎn)遠(yuǎn)遠(yuǎn)遠(yuǎn)不夠）

找開源（bingo，就是你了）

開源面部識別 trackingjs

然后就是找到了一個(gè)這個(gè) trackingjs

看了一下效果，非常好，雖然有點(diǎn)慢，但是滿足我們的功能

face(image)-demo
face(camera)-demo

好，那么先在本地跑個(gè)demo試試

......然后5min過去了

且慢，好像這個(gè)識別不能識別camera的內(nèi)容（camera只支持到face，不支持mouth、eye、nose級別）

mdzz

ps: 如果只是簡單加個(gè)帽子之類的東西的話，用這個(gè)庫也就夠了

下面幾天我基本上就卡在這個(gè)環(huán)節(jié)幾天都沒有什么好的思路

直到某天，我隨便刷的時(shí)候看到了這個(gè)實(shí)現(xiàn)face-detection-node-opencv

咦，她也實(shí)現(xiàn)了面部識別，好像這個(gè)人再trackingjs的contributor里面見過，然后她用到了opencv，記得在今年d2的大會上主會場某幾個(gè)嘉賓也分享了ar主題的東西，也是用服務(wù)器來實(shí)現(xiàn)的(就是canvas的getImageData后把數(shù)據(jù)傳給后端，后端處理完再把結(jié)果返回)，當(dāng)時(shí)我以為效率會很差（在圖片傳輸方面），其實(shí)看下來好像效果還可以

好，接下里就配上后端來寫，似乎功能會多很多。那么接下來就像武器大師說的：開打開打

node 識別 opencv

那么就看opencv的node有什么好的實(shí)現(xiàn)了

then，node-opencv，這個(gè)可以識別到face級別，好像不太夠

再找

faced

yooyoo，眼睛鼻子都識別出來了，很屌嘛，就你了

那就直接搭node服務(wù)跑起來唄

然后簡單花了10分鐘搭了個(gè)koa2的服務(wù)

整體思路就是：

前端開啟video

video => canvas => base64 => ArrayBuffer（這個(gè)庫只能識別圖片對象或者ArrayBuffer）

websocket前后端通訊

后端處理圖片，返回face、mouth在圖片上的位置數(shù)據(jù)

前端渲染嘴巴位置

加上胡子

done

下面是 后端處理圖片的時(shí)間，平均大概5ms，當(dāng)做玩具的話，勉強(qiáng)夠

start: 4.568ms
start: 3.881ms
start: 3.564ms
start: 3.690ms
start: 5.971ms
start: 4.069ms
start: 3.364ms
start: 5.054ms
start: 22.219ms
start: 5.586ms
start: 5.000ms

本地測試一切正常，但是部署到服務(wù)器上的時(shí)候，還是有一些問題

服務(wù)器安裝opencv的時(shí)候有深坑

video，只能在https下用

https 下的websocket 得升級到 wss

靜態(tài)資源訪問又遇到問題，媽的

這里既然是前端文章，那么我就不張開來講部署的問題了，

差不多就是這樣思路

最后

可能是今年最后一篇，寫的可能比較隨意，不知道上下文連不連貫（看官們，抱歉）

然后最后的結(jié)果就如文章最開始所見：

點(diǎn)擊這里看自己的效果（需要允許攝像頭呀?。。?/p> 

詳細(xì)代碼的話：

前后端都在這里了： face-decorator

參考鏈接/推薦閱讀

咦？瀏覽器都能做人臉檢測了？

前端工程師做Face Detection

faced

node-opencv

HTML5-Face-Detection

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107412.html

相關(guān)文章

  • 警察必備工具！用空間融合卷積神經(jīng)網(wǎng)絡(luò)鑒別偽裝的「壞蛋」

    摘要：劍橋大學(xué)印度國家技術(shù)學(xué)院近日聯(lián)合發(fā)布了一篇論文，名為利用空間融合卷積神經(jīng)網(wǎng)絡(luò)通過面部關(guān)鍵點(diǎn)進(jìn)行偽裝人臉識別，該論文利用空間融合卷積神經(jīng)網(wǎng)絡(luò)為刑偵過程的人臉識別提供了有力的支持，我們來一窺究竟。 劍橋大學(xué)、印度國家技術(shù)學(xué)院近日聯(lián)合發(fā)布了一篇論文，名為《利用空間融合卷積神經(jīng)網(wǎng)絡(luò)通過面部關(guān)鍵點(diǎn)進(jìn)行偽裝人臉識別Disguised Face Identification (DFI) with Faci...

    anyway 評論0 收藏0

  • 前端也可以調(diào)教人工智能

    摘要：這群小伙伴們堅(jiān)信的強(qiáng)大能力，堅(jiān)信可以模擬人類很多的感官功能，包括視覺聽覺，甚至包括思考能力給安裝上一個(gè)機(jī)械手臂，甚至可以模擬人類的肢體功能，這就是阿里云人工智能的能力。 阿里云人工智能 ET， 代表的是阿里云語音識別、語音合成、自然語言理解、實(shí)時(shí)圖像識別、機(jī)器學(xué)習(xí)的綜合技術(shù)，背后是阿里云飛天系統(tǒng)強(qiáng)大的計(jì)算能力。 可是這么高大上的 ET，最近居然開始不務(wù)正業(yè)了，來看看它都干了啥！??！ 視...

    yvonne 評論0 收藏0

  • 淺談人臉識別技術(shù)的方法和應(yīng)用

    摘要：人臉識別技術(shù)所獨(dú)具的活性判別能力保證了他人無法以非活性的照片木偶蠟像來欺騙識別系統(tǒng)。人臉識別技術(shù)所采用的依據(jù)是人臉照片或?qū)崟r(shí)攝取的人臉圖像，因而無疑是最容易獲得的。 人臉識別是近年來模式識別、圖像處理、機(jī)器視覺、神經(jīng)網(wǎng)絡(luò)以及認(rèn)知科學(xué)等領(lǐng)域研究的熱點(diǎn)課題之一，被廣泛應(yīng)用于公共安全（罪犯識別等）...

    Charles 評論0 收藏0

  • 千呼萬喚，web人臉識別登錄完整版來了，這樣式我愛了

    摘要：打包配置要特別注意一點(diǎn)，一定要加上，這樣打包時(shí)會將外部引入的包比如在根目錄下或文件下新加外部包打包到項(xiàng)目中，服務(wù)器上項(xiàng)目才能運(yùn)行。 大家好，我是小富~在我最開始寫文章的時(shí)候曾經(jīng)寫過一篇文章 基于 Java 實(shí)現(xiàn)的人臉識別功能，因?yàn)閯傞_始碼字不知道寫點(diǎn)什么，就簡單弄了個(gè)人臉識別的Demo。但讓我沒想到的是，在過去...

    only_do 評論0 收藏0

發(fā)表評論

0條評論

econi

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<