vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例

更新時(shí)間：2022年05月20日 10:13:16 作者：名字被你們想完了

本文主要介紹了vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

需求

上傳患者真實(shí)頭像，可以有兩種選擇，一種是通過(guò)常規(guī)的文件選擇方式上傳，第二種方式就是醫(yī)生可以調(diào)用電腦的攝像頭拍一張然后上傳。

分析

常規(guī)的就不用分析了，只分析第二種：

調(diào)用本地?cái)z像頭
然后可以進(jìn)行拍照
因?yàn)槭腔颊叩恼鎸?shí)頭像，方便辨認(rèn)，要求要拍到患者臉部
檢測(cè)到患者臉部，自動(dòng)截圖，醫(yī)生只需要點(diǎn)擊上傳即可

實(shí)現(xiàn)思路

首先看有不有能識(shí)別到患者臉部的前端第三方庫(kù)，如果沒(méi)有，這個(gè)需求就相對(duì)來(lái)說(shuō)就麻煩一點(diǎn)，就是在拍照的時(shí)候需要醫(yī)生辨別能否達(dá)到上傳的要求，然后再拍照上傳也行。

基于上面的思路，開(kāi)始尋找，最后確定使用 tracking.js 它的 github 地址

使用 tracking.js

安裝：yarn add tracking
使用，用一個(gè)測(cè)試 demo 來(lái)展示：

src/components/TestFace.vue

<template>
  <div>
    <div>
      <p>請(qǐng)將攝像頭對(duì)準(zhǔn)患者臉部</p>
      <video id="video" style="transform:rotateY(180deg)" autoplay></video>
    </div>
    <div>
      <p>檢測(cè)人臉結(jié)果</p>
      <canvas id="canvas" width="200" height="200" style="transform:rotateY(180deg)"></canvas>
    </div>
  </div>
</template>

<script>
import { userMedia } from '../utils/utils'
require('tracking/build/tracking-min.js')
require('tracking/build/data/face-min.js')

export default {
  data () {
    return {
      videoObj: null,
      trackerTask: null
    }
  },

  mounted () {
    this.openCamera()
  },

  methods: {
    openCamera () {
      // 有可能觸發(fā)一些其他的按鈕會(huì)重新獲取
      this.$nextTick(() => {
        const canvas = document.getElementById('canvas')
        const context = canvas.getContext('2d')
        this.videoObj = document.getElementById('video')
        // eslint-disable-next-line no-undef
        const tracker = new tracking.ObjectTracker('face') // 檢測(cè)人臉
        tracker.setInitialScale(4)
        tracker.setStepSize(2)
        tracker.setEdgesDensity(0.1)

        // eslint-disable-next-line no-undef
        this.trackerTask = tracking.track('#video', tracker, { camera: true })

        const constraints = {
          video: { width: 200, height: 200 },
          audio: false
        }

        userMedia(constraints, this.success, this.error)

        tracker.on('track', (event) => {
          event.data.forEach((rect) => {
            // 繪制到 canvas
            context.drawImage(this.videoObj, 0, 0, canvas.width, canvas.height)
            context.font = '16px Helvetica'
            context.strokeStyle = '#1890ff'
            context.strokeRect(rect.x, rect.y, rect.width, rect.height)
          })

          if (event.data.length !== 0) {
            // 說(shuō)明檢測(cè)到人臉了，此時(shí)就可以截取圖片傳遞給后端
            // canvas 調(diào)用 toDataURL
          }
        })
      })
    },

    handleCancel () {
      this.videoObj.srcObject.getTracks()[0].stop()
      this.trackerTask.stop()
    },

    // 成功顯示
    success (stream) {
      this.videoObj.srcObject = stream
      this.videoObj.play()
    },
    // 失敗拋出錯(cuò)誤，可能用戶(hù)電腦沒(méi)有攝像頭，或者攝像頭權(quán)限沒(méi)有打開(kāi)
    error (error) {
      // 可以在這里面提示用戶(hù)
      console.log(`訪(fǎng)問(wèn)用戶(hù)媒體設(shè)備失敗${error.name}, ${error.message}`)
    }
  },
  beforeDestroy () {
    this.handleCancel()
  }
}
</script>

src/utils/utils.js

export let userMedia = function (constraints, success, error) {
  if (navigator.mediaDevices.getUserMedia) {
    userMedia = function (constraints, success, error) {
      navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)
    }
  } else if (navigator.webkitGetUserMedia) {
    userMedia = function (constraints, success, error) {
      navigator.webkitGetUserMedia(constraints, success, error)
    }
  } else if (navigator.mozGetUserMedia) {
    userMedia = function (constraints, success, error) {
      navigator.mozGetUserMedia(constraints, success, error)
    }
  } else if (navigator.getUserMedia) {
    userMedia = function (constraints, success, error) {
      navigator.getUserMedia(constraints, success, error)
    }
  }

  userMedia(constraints, success, error)
}

最終的效果如下：

最后

首先確保有攝像頭

有時(shí)候本地調(diào)試無(wú)法打開(kāi)攝像頭，可以在瀏覽器上輸入：chrome://flags/#unsafely-treat-insecure-origin-as-secure

然后會(huì)出現(xiàn)如下頁(yè)面，再操作即可：

到此這篇關(guān)于vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例的文章就介紹到這了,更多相關(guān)vue2 tracking PC端的人臉識(shí)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: