webRTC 实现人脸识别

news2024/12/25 14:11:01

首先我们需要先了解一下什么是webRTC 他能做什么 webRTC主要是帮我们处理多媒体应用,如音视频通话,屏幕共享都可以实现,主要基于浏览器API调用,其底层浏览器会调用native C++ 等一些库帮我们实现的,而我们在应用层掉API 即可。 桌面程序我们选择 tauri 而不是 electron

  1. 体积更小 electron 的 架构是 将 Node.js 集成到 Chromium 中 因此啥也不写打包完之后体积也有40-50MB 而 tauri 不在嵌入 nodejs + Chromium 前端使用 webview2 渲染,后端和操作系统集成这块使用rust实现,打包只有3MB。

  2. 安全方面,tauri 最终在打包之后会生成二进制文件,会增加破解难度,而electron 打包 会把node_modules打进去,增加了体积,而且没有加密。

  3. 自动更新 electron 和 tauir 都内置了自动更新 但是electron还是使用electron-updater 多一些,tauri 相比electron 就简单了tauri.app/zh-cn/v1/gu…

详细对比

安装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 |

选择对应的模板即可

构建完成之后 执行

★文末名片可以免费领取音视频开发学习资料,内容包括(FFmpeg ,webRTC ,rtmp ,hls ,rtsp ,ffplay ,srs)以及音视频学习路线图等等。

见下方!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

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>

作者:小满zs

★文末名片可以免费领取音视频开发学习资料,内容包括(FFmpeg ,webRTC ,rtmp ,hls ,rtsp ,ffplay ,srs)以及音视频学习路线图等等。

见下方!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/128180.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

欧科云链荣获人民网匠心技术奖,科技创新共造企业发展“强引擎”

什么是匠心精神&#xff1f; 是简单的事情重复做 重复的事情用心做 是对自己热爱的事物 不断坚持、不断钻研的精神 昨日&#xff0c;由人民网主办的“2022人民财经高峰论坛”成功举办&#xff0c;论坛还公布了“第十九届人民匠心奖”获奖名单。欧科云链携旗下“链上天眼”产品荣…

第三十七章 数论——博弈论

第三十七章 数论——博弈论一、Nim游戏1、题目2、结论3、结论验证4、代码二、台阶——Nim游戏1、问题2、思路2、代码三、集合——Nim游戏1、问题2、思路—SG()函数2、代码实现&#xff08;记忆化搜索&#xff09;一、Nim游戏 1、题目 2、结论 这里直接说结论&#xff1a; 假设…

vue导入私有组件和注册全局组件

目录先下载并配置插件导入私有组件注册全局组件先下载并配置插件 导入的时候需要路径,有个符号,但不能提示路径,需要手打路径,会发现很麻烦,这时候可以通过vscode插件来解决 vscode搜索Path Autocomplete 配置插件,点击插件设置—扩展设置,点开任意一个setting.json中编辑,打开…

Yield Guild Games 和 Axie Infinity:迄今为止的旅程

2022 年&#xff0c;菲律宾被认为是全球应用 web3 的中心&#xff0c;在 Chainalysis 的全球加密货币应用指数中排名第二&#xff0c;在拥有最多 MetaMask 用户的国家中排名第三。虽然该国作为 Coins.ph 和 BloomX 等开创性数字资产交易所以及对加密货币友好的 UnionBank 的所在…

Flutter生命周期

一、组件生命周期 flutter组件只有两种&#xff1a;有状态和无状态组件。由于无状态组件效率高&#xff0c;如果不涉及到组件内部的数据存储&#xff0c;尽量多的使用无状态组件 1、StatelessWidget build&#xff1a;组件渲染 调用次数&#xff1a;1次 StatelessWidget是无状…

MYSQL索引和sql优化

基本 索引是帮助数据高效查询的有序数据结构&#xff0c;没有索引进行查询就会进行全表扫描myisam中的.MYI和innodb中的.idb都是存放索引的文件。索引提高查询效率的同时&#xff0c;也降低了更新表的数据&#xff0c;因为数据库中删改查会维护索引的结构。一般提到的索引就是…

安装mysqlclient失败解决办法

简介 系统&#xff1a;MAC 前因&#xff1a;django使用mysql数据库报错django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.Django使用MySQL数据库需要加载 MySQLdb模块&#xff0c;需要安装 mysqlclient&#xff08;django2.2以前安装pymysql&#…

ipsec 建立正常后业务端口测试通过但是业务访问故障

某公司ipsec 分支和总部对接成功后&#xff0c;检查发现两端业务测试正常。分支和总部服务器可以互访&#xff0c;分支测试总部服务器80端口开放正常&#xff0c;排除两侧因策略的影响。但是总部服务器web业务和数据库业务均出现无法访问&#xff0c;web页面打不开&#xff0c;…

Es初步检索命令

1、_cat GET /_cat/nodes&#xff1a;查看所有节点 请求 &#xff1a; http://192.168.107.129:9200/_cat/nodes 响应 &#xff1a; 127.0.0.1 15 95 8 0.19 0.16 0.24 dilm * 32bb46713f1b GET /_cat/health&#xff1a;查看 es 健康状况 请求 &#xff1a; http://192.16…

kali - 通过抓包获取FTP连接密码

数据来源 开始实验 实验目标&#xff1a;在win2003主机部署一台FTP服务器&#xff0c;然后winXP通过账户密码连接2003主机的FTP服务器&#xff0c;kali虚拟机抓取数据包获取密码。 实验拓补图 实验流程&#xff1a; 1、开启虚拟机并配置IP 我这里开了一台Kali、一台window…

elmentUI组建中el-date-picker实现限制时间范围精确到小时

elmentUI组建中el-date-picker实现限制时间范围精确到小时 需求要求 时间选择器只能选择今天之前的日期.默认时间是前一天00点~23点后台返回的最小时间和最大时间时间精度限制到小时 开始想着用type"datetimerange"来实现,后来发现控制时间禁用无法实现,后改变思路…

SkyEye助力飞控软件Debug

​01.Debug是什么&#xff1f; 1947年9月9日&#xff0c;美国著名科学家格蕾丝.霍普&#xff08;Grace Hopper&#xff09;与其同伴在对Mark II计算机进行研究时发现&#xff0c;导致计算机无法正常工作的罪魁祸首居然是一只粘在继电器上的小飞蛾。格蕾丝用镊子将飞蛾夹出&…

在腾讯、阿里、字节技术岗工作十年能挣普通公务员一辈子的钱吗?

在腾讯、阿里、字节技术岗工作十年&#xff0c;能挣到普通公务员一辈子的钱&#xff0c;但不一定能存到普通公务员一辈子的钱。 大厂程序员 VS 普通公务员谁更香&#xff0c;一直是争论不断的话题&#xff0c;让我们站在程序员的角度&#xff0c;来回答这一问题。 大厂程序员V…

打造智慧社区数字孪生应用新范式

近日&#xff0c;民政部、中央政法委、中央网信办、国家发展改革委等部门印发了《关于深入推进智慧社区建设的意见》&#xff0c;明确指出依托智慧社区综合信息平台&#xff0c;创新政务服务、公共服务提供方式&#xff0c;推动就业、健康、卫生、等服务“指尖办”、“网上办”…

家装市场“攻守道”

不同于很多属于弹性需求的消费行业&#xff0c;“住”属于刚性需求&#xff0c;因此家装就成为了人们日常生活中的重要交易场景。据《疫情下的家居消费心态调查》问卷显示&#xff0c;60%以上的居民不会因为疫情而放弃装修。大量的装修需求激发了家装的活力&#xff0c;家装市场…

Node.js 模块化(二) 开发包/模块加载机制

1. 开发属于自己的包 1. 需要实现的功能 2. 初始化包的基本结构 3. 初始化 package.json 属性&#xff1a; name&#xff1a;包的名称&#xff08;不能重复&#xff0c;在官网检索一下&#xff0c;避免重复&#xff09; version&#xff1a;版本号 main&#xff1a;入口文件&a…

如何下载并生成等高线

如何下载并生成等高线 发布时间&#xff1a;2018-01-17 版权&#xff1a; 同步视频教程&#xff1a;下载高程等高线使用视频教程-Bigemap GIS Office 专题地图制作视频教程&#xff1a;地图数据应用&#xff08;制作地图效果的基本过程&#xff09;-Bigemap GIS Office 视频…

【vue】关于路由的使用

&#xff08;1&#xff09;路由步骤 根据官方的文档&#xff0c;我们的路由大概需要以下的几种构成 &#xff08;1&#xff09;首先引入组件 &#xff08;2&#xff09;创建routes布局 &#xff08;3&#xff09;创建router对象 &#xff08;4&#xff09;抛出 &#xff0…

最长公共子序列

最长公共子序列一、题目二、思路1、状态转移方程&#xff08;1&#xff09;状态表示&#xff08;2&#xff09;状态转移2、循环设计三、代码一、题目 二、思路 这道题是一个很经典的DP问题&#xff0c;那么我们来看一下如何分析。 DP问题我们需要考虑两个问题&#xff1a;第一…

【Javassist】快速入门系列11 当检测到显示类型转换时用代码块替换

系列文章目录 01 在方法体的开头或结尾插入代码 02 使用Javassist实现方法执行时间统计 03 使用Javassist实现方法异常处理 04 使用Javassist更改整个方法体 05 当有指定方法调用时替换方法调用的内容 06 当有构造方法调用时替换方法调用的内容 07 当检测到字段被访问时使用语…