快捷導(dǎo)航

如何基于webRTC實(shí)現(xiàn)人臉識(shí)別功能

更新時(shí)間：2022年12月14日 11:03:10 作者：小滿zs

WebRTC技術(shù)包含了音視頻編解碼技術(shù)、傳輸技術(shù)、流媒體服務(wù)器技術(shù)等,涵蓋了音視頻處理和傳輸?shù)姆椒矫婷?下面這篇文章主要給大家介紹了關(guān)于如何基于webRTC實(shí)現(xiàn)人臉識(shí)別的相關(guān)資料,需要的朋友可以參考下

前言

首先我們需要先了解一下什么是webRTC 他能做什么

webRTC主要是幫我們處理多媒體應(yīng)用，如音視頻通話，屏幕共享都可以實(shí)現(xiàn)，主要基于瀏覽器API調(diào)用，其底層瀏覽器會(huì)調(diào)用native C++ 等一些庫幫我們實(shí)現(xiàn)的，而我們在應(yīng)用層掉API 即可。

桌面程序我們選擇 tauri 而不是 electron

體積更小 electron 的架構(gòu)是將 Node.js 集成到 Chromium 中因此啥也不寫打包完之后體積也有40-50MB 而 tauri 不在嵌入 nodejs + Chromium 前端使用 webview2 渲染，后端和操作系統(tǒng)集成這塊使用rust實(shí)現(xiàn)，打包只有3MB。
安全方面，tauri 最終在打包之后會(huì)生成二進(jìn)制文件，會(huì)增加破解難度，而electron 打包會(huì)把node_modules打進(jìn)去，增加了體積，而且沒有加密。
自動(dòng)更新 electron 和 tauir 都內(nèi)置了自動(dòng)更新但是electron還是使用electron-updater 多一些，tauri 相比electron 就簡單了tauri.app/zh-cn/v1/gu…

詳細(xì)對(duì)比

安裝rust

tauri 是基于 rust 的我們需要先安裝rust

下載rust www.rust-lang.org/learn/get-s…

根據(jù)自己的操作系統(tǒng)選擇下載方式即可

安裝完成之后會(huì)有 cargo 和 rustc 兩個(gè)命令

cargo 就是 rust 的包管理工具類似于npm

cargo build 可以構(gòu)建項(xiàng)目

cargo run 可以運(yùn)行項(xiàng)目

cargo test 可以測試項(xiàng)目

cargo doc 可以為項(xiàng)目構(gòu)建文檔

cargo publish 可以將庫發(fā)布到 crates.io。

構(gòu)建tauri應(yīng)用

pnpm create tauri-app |

選擇對(duì)應(yīng)的模板即可

構(gòu)建完成之后執(zhí)行

pnpm tauri dev

App.vue

<template>
    <div>
        <video controls ref="video" src=""></video>
       <button @click="openVideo">開啟攝像頭</button>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
const video = ref<HTMLVideoElement>()
const openVideo = () => {
    //調(diào)用攝像頭以及音頻
    navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(s=>{
        video.value!.srcObject = s
    })
}

</script>

<style lang="less" scoped>

</style>

tips：如果讀不到 mediaDevices 需要增加plist 文件

info.plist 跟 tauri.conf.json 平級(jí)即可

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
	<dict>
		<key>NSCameraUsageDescription</key>
		<string>請?jiān)试S本程序訪問您的攝像頭</string>
	</dict>
</plist>

添加人臉識(shí)別API

模型下載地址 github.com/justadudewh…

face-api 下載地址

npm i face-api.js

<template>
    <div>
        <video autoplay controls ref="video" src=""></video>
        <canvas width="400" height="400" ref="canvas"></canvas>
        <button @click="openVideo">開啟攝像頭</button>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as faceapi from 'face-api.js';
const video = ref<HTMLVideoElement>()
const canvas = ref<HTMLCanvasElement>()


const models = './models';
(async () => {
    await Promise.all([
        faceapi.loadAgeGenderModel(models), //加載訓(xùn)練模型
        faceapi.loadFaceDetectionModel(models),//加載訓(xùn)練模型
        faceapi.loadFaceExpressionModel(models),//加載訓(xùn)練模型
        faceapi.loadTinyFaceDetectorModel(models),//加載訓(xùn)練模型
        faceapi.loadFaceRecognitionModel(models)//加載訓(xùn)練模型
    ])
})()



const openVideo = () => {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(async s => {
        video.value!.srcObject = s
    })

    const context = canvas.value?.getContext('2d')
    setInterval(async ()=>{
        context?.drawImage(video.value as any, 0, 0, 400, 400);
        //獲取分析人臉的數(shù)據(jù)
        const detections = await faceapi.detectAllFaces(video.value as any, new faceapi.TinyFaceDetectorOptions())
        
        const resizedDetections = faceapi.resizeResults(detections, {width:400,height:400});
        //將人臉邊框繪制到canvas上
        faceapi.draw.drawDetections(canvas.value as any, resizedDetections)
    },100)
}

</script>

<style lang="less" scoped>

</style>