javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > webRTC人脸识别

如何基于webRTC实现人脸识别功能

作者:小满zs

WebRTC技术包含了音视频编解码技术、传输技术、流媒体服务器技术等,涵盖了音视频处理和传输的方方面面,下面这篇文章主要给大家介绍了关于如何基于webRTC实现人脸识别的相关资料,需要的朋友可以参考下

前言

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

webRTC主要是帮我们处理多媒体应用,如音视频通话,屏幕共享都可以实现,主要基于浏览器API调用,其底层浏览器会调用native C++ 等一些库帮我们实现的,而我们在应用层掉API 即可。

桌面程序我们选择 tauri 而不是 electron

详细对比

安装rust

tauri 是基于 rust 的 我们需要先安装rust

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

根据自己的操作系统选择下载方式即可

安装完成之后会有 cargo 和 rustc 两个命令

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

cargo build 可以构建项目

cargo run 可以运行项目

cargo test 可以测试项目

cargo doc 可以为项目构建文档

cargo publish 可以将库发布到 crates.io。

构建tauri应用

pnpm create tauri-app |  

选择对应的模板即可

构建完成之后 执行

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 = () => {
    //调用摄像头以及音频
    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 平级即可

<?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>请允许本程序访问您的摄像头</string>
	</dict>
</plist>

添加人脸识别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), //加载训练模型
        faceapi.loadFaceDetectionModel(models),//加载训练模型
        faceapi.loadFaceExpressionModel(models),//加载训练模型
        faceapi.loadTinyFaceDetectorModel(models),//加载训练模型
        faceapi.loadFaceRecognitionModel(models)//加载训练模型
    ])
})()



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);
        //获取分析人脸的数据
        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>

总结

到此这篇关于如何基于webRTC实现人脸识别的文章就介绍到这了,更多相关webRTC人脸识别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文