怎么在HTML5中使用tracking.js實(shí)現(xiàn)一個(gè)刷臉支付功能？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

1.攝像頭1.1input獲取攝像頭

html5中獲取用戶攝像頭，有兩種方式，使用input，如下：

另外如果想打開(kāi)相冊(cè)，可以這樣：

但是這兩種方式都會(huì)有兼容性問(wèn)題，用過(guò)的同學(xué)可能都知道。

1.2getUserMedia獲取攝像圖

getUserMedia是html5一個(gè)新的api，官方一點(diǎn)的定義是：

MediaDevices.getUserMedia()會(huì)提示用戶給予使用媒體輸入的許可，媒體輸入會(huì)產(chǎn)生一個(gè)MediaStream，里面包含了請(qǐng)求的媒體類(lèi)型的軌道。此流可以包含一個(gè)視頻軌道（來(lái)自硬件或者虛擬視頻源，比如相機(jī)、視頻采集設(shè)備和屏幕共享服務(wù)等等）、一個(gè)音頻軌道（同樣來(lái)自硬件或虛擬音頻源，比如麥克風(fēng)、A/D轉(zhuǎn)換器等等），也可能是其它軌道類(lèi)型。

簡(jiǎn)單一點(diǎn)說(shuō)就是可以獲取到用戶攝像頭。

同上面input一樣，這種方式也有兼容性問(wèn)題，不過(guò)可以使用其他方式解決，這里可以參考MediaDevices.getUserMedia()，文檔中有介紹"在舊的瀏覽器中使用新的API"。我這里在網(wǎng)上也找了一些參考，總結(jié)出一個(gè)相對(duì)全面的getUserMedia版本，代碼如下：

// 訪問(wèn)用戶媒體設(shè)備
getUserMedia(constrains, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //新標(biāo)準(zhǔn)API
        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit內(nèi)核瀏覽器
        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.mozGetUserMedia) {
        //Firefox瀏覽器
        navagator.mozGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.getUserMedia) {
        //舊版API
        navigator.getUserMedia(constrains).then(success).catch(error);
    } else {
        this.scanTip = "你的瀏覽器不支持訪問(wèn)用戶媒體設(shè)備"
    }
}

1.3播放視屏

獲取設(shè)備方法有兩個(gè)回調(diào)函數(shù)，一個(gè)是成功，一個(gè)是失敗。成功了就開(kāi)始播放視頻，播放視屏其實(shí)就是給video設(shè)置一個(gè)url，并調(diào)用play方法，這里設(shè)置url要考慮不同瀏覽器兼容性，代碼如下：

success(stream) {
    this.streamIns = stream
    // 設(shè)置播放地址，webkit內(nèi)核瀏覽器
    this.URL = window.URL || window.webkitURL
    if ("srcObject" in this.$refs.refVideo) {
        this.$refs.refVideo.srcObject = stream
    } else {
        this.$refs.refVideo.src = this.URL.createObjectURL(stream)
    }
    this.$refs.refVideo.onloadedmetadata = e => {
        // 播放視頻
        this.$refs.refVideo.play()
        this.initTracker()
    }
},
error(e) {
    this.scanTip = "訪問(wèn)用戶媒體失敗" + e.name + "," + e.message
}

注意：

1. 播放視屏方法好寫(xiě)在onloadmetadata回調(diào)函數(shù)中，否則可能會(huì)報(bào)錯(cuò)。

2. 播放視頻的時(shí)候出于安全性考慮，必須在本地環(huán)境中測(cè)試，也就是http://localhost/xxxx中測(cè)試，或者帶有https://xxxxx環(huán)境中測(cè)試，不然的話或有跨域問(wèn)題。

3. 下面用到的initTracker()方法也好放在這個(gè)onloadedmetadata回調(diào)函數(shù)里，不然也會(huì)報(bào)錯(cuò)。

2. 捕捉人臉

2.1使用tracking.js捕捉人臉

視屏在video中播放成功之后就開(kāi)始識(shí)別人臉了，這里使用到一個(gè)第三方的功能tracking.js，是國(guó)外的大神寫(xiě)的JavaScript圖像識(shí)別插件。關(guān)鍵代碼如下：

// 人臉捕捉
initTracker() {
    this.context = this.$refs.refCanvas.getContext("2d")    // 畫(huà)布
    this.tracker = new tracking.ObjectTracker(['face'])     // tracker實(shí)例
    this.tracker.setStepSize(1.7)                           // 設(shè)置步長(zhǎng)
    this.tracker.on('track', this.handleTracked)            // 綁定監(jiān)聽(tīng)方法
    try {
        tracking.track('#video', this.tracker)      // 開(kāi)始追蹤
    } catch (e) {
        this.scanTip = "訪問(wèn)用戶媒體失敗，請(qǐng)重試"
    }
}

捕獲到人臉之后，可以在頁(yè)面上用一個(gè)小方框標(biāo)注出來(lái)，這樣有點(diǎn)交互效果。

// 追蹤事件
handleTracked(e) {
    if (e.data.length === 0) {
        this.scanTip = '未檢測(cè)到人臉'
    } else {
        if (!this.tipFlag) {
            this.scanTip = '檢測(cè)成功，正在拍照，請(qǐng)保持不動(dòng)2秒'
        }
        // 1秒后拍照，僅拍一次
        if (!this.flag) {
            this.scanTip = '拍照中...'
            this.flag = true
            this.removePhotoID = setTimeout(() => {
                this.tackPhoto()
                this.tipFlag = true
            }, 2000)
        }
        e.data.forEach(this.plot)
    }
}

在頁(yè)面中畫(huà)一些方框，標(biāo)識(shí)出人臉：