吗咿呀嘿-用js来搞个简单的人脸识别

最新推荐文章于 2024-03-19 09:47:27 发布

千锋HTML5大前端

最新推荐文章于 2024-03-19 09:47:27 发布

阅读量1k

点赞数 1

分类专栏：前端前端技术文章文章标签： javascript python 开发语言

本文链接：https://blog.csdn.net/sdasadasds/article/details/127888468

版权

本文介绍了如何使用Tracking.js JavaScript库在浏览器环境中实现简单的人脸识别。通过创建识别对象，处理图片或摄像头数据，实现实时追踪和标记脸部特征，如眼睛、鼻子和嘴巴。讨论了在html和js代码中的关键实现步骤，以及浏览器环境下开启摄像头的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
缘起
“蚂蚁呀嘿，蚂蚁呀呼，蚂蚁呀哈” 相信最近好多人的朋友圈或者抖音都被类似视频刷过屏！
类似的效果最早是在2020年初，那个时候大家应该还都记得，几乎所有的人都因为疫情原因被迫线上办公！
工作当然离不开开会了，这点歪果仁和中国很像，国内我们一般用qq或者钉钉来个在线视频会议！歪果仁也会经常开线上会议，不过他们用的最多的是zoom这个软件。经常的在线会会让人很烦躁，为什么呢？原本在家办公就不用洗头了，但是为了开在线视频会议还得去专门洗个头！
so，一个来自俄罗斯程序猿就想了一个招数恶搞一下他的同事。他基于 first-order-model 做了一个叫做Avatarify 的软件，并且放在了全世界做大的同性交友网站github上。First Order Motion Model for Image Animation 简单来说就是把一张图片变成动态的。Avatarify ，看起来很熟悉的名字，你肯定听过一部叫阿凡达的电影！之后程序猿小哥又基于Avatarify 做了一个苹果app，在网上掀起了吗咿呀嘿旋风，不过在上架appstore7天后在中国区就被下架了，原因不得而知。
来看一下 First Order Motion Model上的图片动画结果
在这里插入图片描述
First Order Motion Model上的swap face结果
看完以后大概能明白为什么被下架了！如果东西能被普通人随便使用，那么我们的表情甚至动作都能被别人模拟出来，只要他有一张你的照片！所以说人脸识别不是绝对安全，什么都可以被模拟！这两天的315晚会不知道大家看没有看，好多商家都在非法收集的脸部信息！
上面我们提到的库都是python的，app实现这样的功能都是把图片或者视频传输给服务器，然后服务器处理文件。
浏览器环境人脸识别
我们今天要在浏览器环境下面实现一个简单的人脸识别，我们会用到Tracking.js ，这是一个独立的JavaScript库，用于跟踪从相机或者图片实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。
trankingjs下载
我们需要先点击后面的标签下载trankingjs 在这里插入图片描述
trankingjs使用-识别图片
引入 tracking-min.js人脸识别库
引入face-min.js，eye-min.js，mouth-min.js 脸部，眼睛，嘴巴等模型文件
创建html文件，内容如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./build/tracking-min.js"></script>
  <script src="./build/data/face-min.js"></script>
  <script src="./build/data/mouth-min.js"></script>
  <script src="./build/data/eye-min.js"></script>
  <style>
    .rect {
   
      border: 2px solid #a64ceb;
      left: -1000px;
      position: absolute;
      top: -1000px;
    }

    .demo-container {
   
      width: 100%;
      height: 530px;
      position: relative;
      background: #eee;
      overflow: hidden;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }

  </style>
</head>

<body>
  <div class="demo-container">
    <img src="./imgs/2.png" alt

最低0.47元/天解锁文章