如何基于webRTC實(shí)現(xiàn)人臉識(shí)別功能
前言
首先我們需要先了解一下什么是webRTC 他能做什么
webRTC主要是幫我們處理多媒體應(yīng)用,如音視頻通話,屏幕共享都可以實(shí)現(xiàn),主要基于瀏覽器API調(diào)用,其底層瀏覽器會(huì)調(diào)用native C++ 等一些庫(kù)幫我們實(shí)現(xiàn)的,而我們?cè)趹?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)去,增加了體積,而且沒(méi)有加密。 - 自動(dòng)更新 electron 和 tauir 都內(nèi)置了自動(dòng)更新 但是electron還是使用electron-updater 多一些,
tauri
相比electron 就簡(jiǎn)單了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 可以測(cè)試項(xiàng)目
cargo doc 可以為項(xiàng)目構(gòu)建文檔
cargo publish 可以將庫(kù)發(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>請(qǐng)?jiān)试S本程序訪問(wèn)您的攝像頭</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>
總結(jié)
到此這篇關(guān)于如何基于webRTC實(shí)現(xiàn)人臉識(shí)別的文章就介紹到這了,更多相關(guān)webRTC人臉識(shí)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)的商品搶購(gòu)倒計(jì)時(shí)功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的商品搶購(gòu)倒計(jì)時(shí)功能,可實(shí)現(xiàn)分秒級(jí)別的實(shí)時(shí)顯示倒計(jì)時(shí)效果,涉及js日期時(shí)間計(jì)算與頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-04-04javascript bom是什么及bom和dom的區(qū)別
BOM是瀏覽器對(duì)象模型,DOM是文檔對(duì)象模型,前者是對(duì)瀏覽器本身進(jìn)行操作,而后者是對(duì)瀏覽器(可看成容器)內(nèi)的內(nèi)容進(jìn)行操作。這篇文章給大家介紹javascript bom是什么及bom和dom的區(qū)別,感興趣的朋友一起學(xué)習(xí)吧2015-11-11JS實(shí)現(xiàn)往下不斷流動(dòng)網(wǎng)頁(yè)背景的方法
這篇文章主要介紹了JS實(shí)現(xiàn)往下不斷流動(dòng)網(wǎng)頁(yè)背景的方法,實(shí)例分析了遞歸調(diào)用自定義函數(shù)scrollBG實(shí)現(xiàn)動(dòng)態(tài)背景特效的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02小程序:授權(quán)、登錄、session_key、unionId的詳解
這篇文章主要介紹了小程序:授權(quán)、登錄、session_key、unionId的詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JS實(shí)現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果
這篇文章主要介紹了JS實(shí)現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果,涉及javascript鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-04-04