国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

前端簡(jiǎn)單面部識(shí)別

econi / 2910人閱讀

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

前言

過(guò)年了，來(lái)點(diǎn)有趣的東西

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

以下記錄一下最近的玩具

live demo

點(diǎn)擊這里看自己的效果（需要允許攝像頭呀！！）

效果

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

思路

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

支持視頻

這里代碼就非常簡(jiǎn)單，新建一個(gè)html，寫(xiě)上一個(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")
}

寫(xiě)到這里視頻就可以播放了

然后我們把這個(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)

這里開(kāi)始canvas里面的內(nèi)容也就開(kāi)始動(dòng)起來(lái)了

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

面部識(shí)別

我要做的是面部識(shí)別，所有怎么識(shí)別呢

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

找開(kāi)源（bingo，就是你了）

開(kāi)源面部識(shí)別 trackingjs

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

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

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

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

......然后5min過(guò)去了

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

mdzz

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

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

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

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

好，接下里就配上后端來(lái)寫(xiě)，似乎功能會(huì)多很多。那么接下來(lái)就像武器大師說(shuō)的：開(kāi)打開(kāi)打

node 識(shí)別 opencv

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

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

再找

faced

yooyoo，眼睛鼻子都識(shí)別出來(lái)了，很屌嘛，就你了

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

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

整體思路就是：

前端開(kāi)啟video

video => canvas => base64 => ArrayBuffer（這個(gè)庫(kù)只能識(shí)別圖片對(duì)象或者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

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

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

video，只能在https下用

https 下的websocket 得升級(jí)到 wss

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

這里既然是前端文章，那么我就不張開(kāi)來(lái)講部署的問(wèn)題了，

差不多就是這樣思路

最后

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

然后最后的結(jié)果就如文章最開(kāi)始所見(jiàn)：

點(diǎn)擊這里看自己的效果（需要允許攝像頭呀！！）

詳細(xì)代碼的話：

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

參考鏈接/推薦閱讀

咦？瀏覽器都能做人臉檢測(cè)了？

前端工程師做Face Detection

faced

node-opencv

HTML5-Face-Detection

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/107412.html

相關(guān)文章

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

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

    anyway 評(píng)論0 收藏0

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

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

    yvonne 評(píng)論0 收藏0

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

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

    Charles 評(píng)論0 收藏0

  • 千呼萬(wàn)喚，web人臉識(shí)別登錄完整版來(lái)了，這樣式我愛(ài)了

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

    only_do 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

econi

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<