devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue实现调用摄像头百度ai人脸，实现人脸情绪识别_vue识别人脸表情

作者：笔触狂放9 | 2024-06-11 03:29:33

赞

踩

vue识别人脸表情
后面页面完整代码哦~~~
首先说一下，我这里用到了axios element-ui的loading

先看一下我的效果图吧

 

 说明：我这里是调用摄像头识别人脸，根据返回的信息，再加以描述，右边的小图片是，根据返回的人脸位置，宽度大小截取出来的

 首先我们得申请一个百度ai人脸识别的接口，并且获取key 和secret 这样才能后续使用。

 第一步：先写html

  1. <template>
  2.   <div class="main">
  3.     <div class="cam">
  4.       <div class="video-box">
  5.         <div class="videos">
  6.           <video
  7.             id="video"
  8.             style="width: 100%;height: 100%; object-fit: fill;"
  9.             preload
  10.             autoplay
  11.             loop
  12.             muted
  13.           ></video>
  14.         </div>
  15.         <div class="button-box" @click="submit()">
  16.           <img src="../assets/cam.png" />
  17.         </div>
  18.       </div>
  19.       <div class="title-box">
  20.         识别分析
  21.       </div>
  22.       <div class="right-box">
  23.         <div
  24.           ref="mainscroll"
  25.           class="face-box"
  26.           v-loading="loading"
  27.           element-loading-text="拼命加载中"
  28.           element-loading-spinner="el-icon-loading"
  29.           element-loading-background="transparent"
  30.         >
  31.           <div
  32.             class="details"
  33.             v-for="(item, index) in threeImageArray"
  34.             :key="index"
  35.           >
  36.             <div class="image-box">
  37.               <img :src="item.image" />
  38.             </div>
  39.             <div class="list-box">
  40.               <div class="sex-one">年龄：{{ item.age }}</div>              
  41.             </div>
  42.           </div>
  43.         </div>
  44.       </div>
  45.       <div class="canva-box">
  46.         <canvas ref="canvas" id="canvas" width="1000" height="700"></canvas>
  47.       </div>
  48.     </div>
  49.   </div>
  50. </template>

说明：因为需求时只显示摄像头，所以，我把截图的图片canvas部分放在了摄像头的底层，大家根据需求来写css样式吧

 第二步:写css

  1. <style scoped>
  2.  
  3. .main {
  4.   width: 100%;
  5.   height: 100vh;
  6.   display: flex;
  7.  
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11.  
  12. .cam {
  13.   width: 50%;
  14.   height: 90%;
  15.   display: flex;
  16.   flex-direction: column;
  17.   align-items: center;
  18.   background-color: #fff;
  19.   border-radius: 20px;
  20. }
  21. .canva-box {
  22.   width: 100%;
  23.   display: flex;
  24.   align-items: center;
  25.   justify-content: center;
  26.   position: absolute;
  27.   top: 0;
  28.   z-index: -99;
  29. }
  30.  
  31. .button-box {
  32.   position: absolute;
  33.   top: 35%;
  34.   border: 2px solid #fff;
  35.   padding: calc(100vw * 20 / 1920);
  36.   border-radius: 50%;
  37. }
  38. .button-box img {
  39.   width: calc(100vw * 40 / 1920);
  40.   height: calc(100vw * 40 / 1920);
  41. }
  42. .title-box {
  43.   height: 5%;
  44.   font-size: calc(100vw * 40 / 1920);
  45.   font-weight: bold;
  46.   width: 40%;
  47. }
  48. .right-box {
  49.   width: 100%;
  50.   height: 30%;
  51.   display: flex;
  52.   flex-direction: column;
  53.   align-items: center;
  54.   justify-content: space-evenly;
  55. }
  56. .video-box {
  57.   width: 100%;
  58.   height: 65%;
  59.   display: flex;
  60.   justify-content: center;
  61. }
  62. .videos {
  63.   width: 100%;
  64.   height: 100%;
  65. }
  66. .face-box {
  67.   width: 100%;
  68.   height: 100%;
  69.   display: flex;
  70.   flex-direction: column;
  71.   align-items: center;
  72.   overflow: auto;
  73. }
  74. .details {
  75.   display: flex;
  76.  
  77.   width: 100%;
  78.   height: 90%;
  79.   margin-top: 4px;
  80. }
  81. .image-box {
  82.   width: 30%;
  83.   height: 100%;
  84.   display: flex;
  85.   justify-content: center;
  86. }
  87.  
  88. .image-box img {
  89.   width: calc(100vw * 150 / 1920);
  90.   height: calc(100vw * 150 / 1920);
  91. }
  92. .list-box {
  93.   width: 60%;
  94.   height: calc(100vw * 300 / 1920);
  95.   display: flex;
  96.   flex-direction: column;
  97.   text-indent: calc(100vw * 16 / 1920);
  98.   font-size: calc(100vw * 18 / 1920);
  99.   padding-bottom: 20px;
  100. }
  101. </style>

 第三步：下载axios   npm i axios

 第四步：下载element-ui 

                npm i element-ui

                //引入 使用

                import ElementUI from "element-ui";

                import "element-ui/lib/theme-chalk/index.css";

                // 引入echarts

                import * as echarts from "echarts";

                Vue.prototype.$echarts = echarts;

第五步：js部分

首先调用摄像头（这里我也是根据网上找的，但是忘记哪个文章了）

  1. //可以是点击方法，可以放在mounted()中，看自己的需求
  2. getCompetence() {
  3.       var _this = this;
  4.       this.thisCancas = document.getElementById("canvas");
  5.       this.thisContext = this.thisCancas.getContext("2d");
  6.       this.thisVideo = document.getElementById("video");
  7.       // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
  8.       if (navigator.mediaDevices === undefined) {
  9.         navigator.mediaDevices = {};
  10.       }
  11.       // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
  12.       // 使用getUserMedia，因为它会覆盖现有的属性。
  13.       // 这里，如果缺少getUserMedia属性，就添加它。
  14.       if (navigator.mediaDevices.getUserMedia === undefined) {
  15.         navigator.mediaDevices.getUserMedia = function(constraints) {
  16.           // 首先获取现存的getUserMedia(如果存在)
  17.           var getUserMedia =
  18.             navigator.webkitGetUserMedia ||
  19.             navigator.mozGetUserMedia ||
  20.             navigator.getUserMedia;
  21.           // 有些浏览器不支持，会返回错误信息
  22.           // 保持接口一致
  23.           if (!getUserMedia) {
  24.             return Promise.reject(
  25.               new Error("getUserMedia is not implemented in this browser")
  26.             );
  27.           }
  28.           // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
  29.           return new Promise(function(resolve, reject) {
  30.             getUserMedia.call(navigator, constraints, resolve, reject);
  31.           });
  32.         };
  33.       }
  34.       var constraints = {
  35.         audio: false,
  36.         video: {
  37.           width: this.videoWidth,
  38.           height: this.videoHeight,
  39.           transform: "scaleX(-1)"
  40.         }
  41.       };
  42.       navigator.mediaDevices
  43.         .getUserMedia(constraints)
  44.         .then(function(stream) {
  45.           // 旧的浏览器可能没有srcObject
  46.           if ("srcObject" in _this.thisVideo) {
  47.             _this.thisVideo.srcObject = stream;
  48.           } else {
  49.             // 避免在新的浏览器中使用它，因为它正在被弃用。
  50.             _this.thisVideo.src = window.URL.createObjectURL(stream);
  51.           }
  52.           _this.thisVideo.onloadedmetadata = function(e) {
  53.             _this.thisVideo.play();
  54.           };
  55.         })
  56.         .catch(err => {
  57.           console.log(err);
  58.         });
  59.     },

 记得销毁调用摄像头哦！

  1.  
  2.     // 关闭摄像头  在vue生命周期的销毁页面中写
  3.     this.trackerTask.closeCamera();

 接下来先把调用百度ai 部分写出来

  1. async detectFace(imageData) {
  2.         //access_token需要通过申请的key 和secret来获取，登录百度ai文档中就有教程
  3.       this.loading = true;
  4.       try {
  5.         const response = await axios.post(
  6.           "https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  7.           {
  8.             image: imageData,
  9.             image_type: "BASE64",
  10.             face_field: "age,gender,emotion,glasses,mask,expression",
  11.             max_face_num: 10
  12.           }
  13.         );
  14.  
  15.         // 处理接口返回的结果
  16.  
  17.         if (response.data.error_code == 0) {
  18.             //这里是接口返回的打印
  19.           console.log("调用成功显示结果", response);
  20.           this.faceInfomation = response.data.result;
  21.           this.faceArray = response.data.result.face_list;
  22.             //这里我用一个数组接收返回的人脸信息
  23.           this.faceArray.forEach((item, i) => {
  24.             console.log("item", item);
  25.                 //这里是人脸的位置宽高信息
  26.             const left = parseInt(item.location.left);
  27.             const top = parseInt(item.location.top);
  28.             const width = parseInt(item.location.width);
  29.             const height = parseInt(item.location.height);
  30.             const faceCanvas = document.createElement("canvas");
  31.             
  32.             faceCanvas.width = width;
  33.             faceCanvas.height = height;
  34.             //将截取的人脸再重新铺到canvas画布上，好展示出来
  35.             const faceCtx = faceCanvas.getContext("2d");
  36.             faceCtx.drawImage(
  37.               this.canvas,
  38.               left,
  39.               top,
  40.               width,
  41.               height,
  42.               0,
  43.               0,
  44.               width,
  45.               height
  46.             );
  47.  
  48.             this.faceImg = faceCanvas.toDataURL("image/png");
  49.             //将截取的头像放在新的数组中
  50.             this.newImageArray.push(this.faceImg);
  51.           });
  52.             //因为截取的人脸头像和人脸文字描述不是一个数组，所以将两个数组合并一个数组了，这样在遍历循环列表的时候，更好的画css样式 
  53.           this.threeImageArray = this.faceArray.map((item, index) => {
  54.             return { ...item, image: this.newImageArray[index] };
  55.           });
  56.         }
  57.       } catch (error) {
  58.         console.error(error);
  59.       } finally {
  60.         this.loading = false;
  61.       }
  62.     },

如果有不清晰的地方可以留言评论，我会会的，虽然不知道对不对哈哈

 摄像头获取的图片放在canvas是上后，转成接口可用的类型

  1. submit() {
  2.       console.log("点击了这个");
  3.        //每次点击的时候都清空一下上一次的内容
  4.       this.newImageArray = [];
  5.       this.faceArray = [];
  6.         //loading加载
  7.       this.fullscreenLoading = true;
  8.       setTimeout(() => {
  9.         this.fullscreenLoading = false;
  10.       }, 2000);
  11.       
  12.       let that = this;
  13.       let canvas = document.getElementById("canvas");
  14.       let context = canvas.getContext("2d");
  15.       let video = document.getElementById("video");
  16.         //将摄像头拍下的照片放在canvas画布上
  17.       context.drawImage(video, 0, 0, 1000, 700);
  18.         //将图片转换成 接口需要的类型
  19.       canvas.toBlob(blob => {
  20.         var reader = new FileReader();
  21.         reader.onloadend = () => {
  22.           this.imageData = reader.result;
  23.  
  24.           this.newimage = this.imageData.replace(
  25.             /^data:image\/\w+;base64,/,
  26.             ""
  27.           );
  28.             //截取一下图片
  29.           this.headerimg = this.imageData.slice(5, 15);
  30.           this.imageArray.push(this.headerimg);
  31.             //调用识别方法
  32.           this.detectFace(this.newimage);
  33.         };
  34.         reader.readAsDataURL(blob);
  35.       });
  36.     },

完整代码 

  1. <template>
  2.   <div class="main">
  3.     <div class="cam">
  4.       <div class="video-box">
  5.         <div class="videos">
  6.           <video
  7.             id="video"
  8.             style="width: 100%;height: 100%; object-fit: fill;"
  9.             preload
  10.             autoplay
  11.             loop
  12.             muted
  13.           ></video>
  14.         </div>
  15.         <div class="button-box" @click="submit()">
  16.           <img src="../assets/cam.png" />
  17.         </div>
  18.       </div>
  19.       <div class="title-box">
  20.         识别分析
  21.       </div>
  22.       <div class="right-box">
  23.         <div
  24.           ref="mainscroll"
  25.           class="face-box"
  26.           v-loading="loading"
  27.           element-loading-text="拼命加载中"
  28.           element-loading-spinner="el-icon-loading"
  29.           element-loading-background="transparent"
  30.         >
  31.           <div
  32.             class="details"
  33.             v-for="(item, index) in threeImageArray"
  34.             :key="index"
  35.           >
  36.             <div class="image-box">
  37.               <img :src="item.image" />
  38.             </div>
  39.             <div class="list-box">
  40.               <div class="sex-one">年龄：{{ item.age }}</div>              
  41.             </div>
  42.           </div>
  43.         </div>
  44.       </div>
  45.       <div class="canva-box">
  46.         <canvas ref="canvas" id="canvas" width="1000" height="700"></canvas>
  47.       </div>
  48.     </div>
  49.   </div>
  50. </template>
  51.  
  52. <script>
  53. import axios from "axios";
  54.  
  55. export default {
  56.   name: "testTracking",
  57.   data() {
  58.     return {
  59.       loading: false,
  60.       contentAnwer: false,
  61.       contentShow: true,
  62.       API_KEY: "这里是你申请的key",
  63.       SECRET_KEY: "这里是你申请的secret",
  64.       imageData: null,
  65.       newimage: null,
  66.       faceInfomation: {},
  67.       faceArray: [],
  68.       age: null,
  69.       imageArray: [],
  70.       headerimg: "",
  71.       location: {},
  72.       left: 0,
  73.       top: 0,
  74.       width: 0,
  75.       height: 0,
  76.       faceImg: null,
  77.       canvas: null,
  78.       newImageArray: [],
  79.       threeImageArray: []
  80.     };
  81.   },
  82.   methods: {
  83.    
  84.    submit() {
  85.       console.log("点击了这个");
  86.        //每次点击的时候都清空一下上一次的内容
  87.       this.newImageArray = [];
  88.       this.faceArray = [];
  89.         //loading加载
  90.       this.fullscreenLoading = true;
  91.       setTimeout(() => {
  92.         this.fullscreenLoading = false;
  93.       }, 2000);
  94.       
  95.       let that = this;
  96.       let canvas = document.getElementById("canvas");
  97.       let context = canvas.getContext("2d");
  98.       let video = document.getElementById("video");
  99.         //将摄像头拍下的照片放在canvas画布上
  100.       context.drawImage(video, 0, 0, 1000, 700);
  101.         //将图片转换成 接口需要的类型
  102.       canvas.toBlob(blob => {
  103.         var reader = new FileReader();
  104.         reader.onloadend = () => {
  105.           this.imageData = reader.result;
  106.  
  107.           this.newimage = this.imageData.replace(
  108.             /^data:image\/\w+;base64,/,
  109.             ""
  110.           );
  111.             //截取一下图片
  112.           this.headerimg = this.imageData.slice(5, 15);
  113.           this.imageArray.push(this.headerimg);
  114.             //调用识别方法
  115.           this.detectFace(this.newimage);
  116.         };
  117.         reader.readAsDataURL(blob);
  118.       });
  119.     },
  120.    //可以是点击方法，可以放在mounted()中，看自己的需求
  121. getCompetence() {
  122.       var _this = this;
  123.       this.thisCancas = document.getElementById("canvas");
  124.       this.thisContext = this.thisCancas.getContext("2d");
  125.       this.thisVideo = document.getElementById("video");
  126.       // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
  127.       if (navigator.mediaDevices === undefined) {
  128.         navigator.mediaDevices = {};
  129.       }
  130.       // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
  131.       // 使用getUserMedia，因为它会覆盖现有的属性。
  132.       // 这里，如果缺少getUserMedia属性，就添加它。
  133.       if (navigator.mediaDevices.getUserMedia === undefined) {
  134.         navigator.mediaDevices.getUserMedia = function(constraints) {
  135.           // 首先获取现存的getUserMedia(如果存在)
  136.           var getUserMedia =
  137.             navigator.webkitGetUserMedia ||
  138.             navigator.mozGetUserMedia ||
  139.             navigator.getUserMedia;
  140.           // 有些浏览器不支持，会返回错误信息
  141.           // 保持接口一致
  142.           if (!getUserMedia) {
  143.             return Promise.reject(
  144.               new Error("getUserMedia is not implemented in this browser")
  145.             );
  146.           }
  147.           // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
  148.           return new Promise(function(resolve, reject) {
  149.             getUserMedia.call(navigator, constraints, resolve, reject);
  150.           });
  151.         };
  152.       }
  153.       var constraints = {
  154.         audio: false,
  155.         video: {
  156.           width: this.videoWidth,
  157.           height: this.videoHeight,
  158.           transform: "scaleX(-1)"
  159.         }
  160.       };
  161.       navigator.mediaDevices
  162.         .getUserMedia(constraints)
  163.         .then(function(stream) {
  164.           // 旧的浏览器可能没有srcObject
  165.           if ("srcObject" in _this.thisVideo) {
  166.             _this.thisVideo.srcObject = stream;
  167.           } else {
  168.             // 避免在新的浏览器中使用它，因为它正在被弃用。
  169.             _this.thisVideo.src = window.URL.createObjectURL(stream);
  170.           }
  171.           _this.thisVideo.onloadedmetadata = function(e) {
  172.             _this.thisVideo.play();
  173.           };
  174.         })
  175.         .catch(err => {
  176.           console.log(err);
  177.         });
  178.     },
  179.  
  180.     async detectFace(imageData) {
  181.         //access_token需要通过申请的key 和secret来获取，登录百度ai文档中就有教程
  182.       this.loading = true;
  183.       try {
  184.         const response = await axios.post(
  185.           "https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  186.           {
  187.             image: imageData,
  188.             image_type: "BASE64",
  189.             face_field: "age,gender,emotion,glasses,mask,expression",
  190.             max_face_num: 10
  191.           }
  192.         );
  193.  
  194.         // 处理接口返回的结果
  195.  
  196.         if (response.data.error_code == 0) {
  197.             //这里是接口返回的打印
  198.           console.log("调用成功显示结果", response);
  199.           this.faceInfomation = response.data.result;
  200.           this.faceArray = response.data.result.face_list;
  201.             //这里我用一个数组接收返回的人脸信息
  202.           this.faceArray.forEach((item, i) => {
  203.             console.log("item", item);
  204.                 //这里是人脸的位置宽高信息
  205.             const left = parseInt(item.location.left);
  206.             const top = parseInt(item.location.top);
  207.             const width = parseInt(item.location.width);
  208.             const height = parseInt(item.location.height);
  209.             const faceCanvas = document.createElement("canvas");
  210.             
  211.             faceCanvas.width = width;
  212.             faceCanvas.height = height;
  213.             //将截取的人脸再重新铺到canvas画布上，好展示出来
  214.             const faceCtx = faceCanvas.getContext("2d");
  215.             faceCtx.drawImage(
  216.               this.canvas,
  217.               left,
  218.               top,
  219.               width,
  220.               height,
  221.               0,
  222.               0,
  223.               width,
  224.               height
  225.             );
  226.  
  227.             this.faceImg = faceCanvas.toDataURL("image/png");
  228.             //将截取的头像放在新的数组中
  229.             this.newImageArray.push(this.faceImg);
  230.           });
  231.             //因为截取的人脸头像和人脸文字描述不是一个数组，所以将两个数组合并一个数组了，这样在遍历循环列表的时候，更好的画css样式 
  232.           this.threeImageArray = this.faceArray.map((item, index) => {
  233.             return { ...item, image: this.newImageArray[index] };
  234.           });
  235.         }
  236.       } catch (error) {
  237.         console.error(error);
  238.       } finally {
  239.         this.loading = false;
  240.       }
  241.     },
  242.     
  243.   },
  244.   mounted() {
  245.     this.getCompetence();
  246.     this.canvas = this.$refs.canvas;
  247.  
  248.   },
  249.   computed: {},
  250.   destroyed() {
  251.     // 关闭摄像头
  252.     this.trackerTask.closeCamera();
  253.   }
  254. };
  255. </script>
  256. <style scoped>
  257.  
  258. .main {
  259.   width: 100%;
  260.   height: 100vh;
  261.   display: flex;
  262.  
  263.   align-items: center;
  264.   justify-content: center;
  265. }
  266.  
  267. .cam {
  268.   width: 50%;
  269.   height: 90%;
  270.   display: flex;
  271.   flex-direction: column;
  272.   align-items: center;
  273.   background-color: #fff;
  274.   border-radius: 20px;
  275. }
  276. .canva-box {
  277.   width: 100%;
  278.   display: flex;
  279.   align-items: center;
  280.   justify-content: center;
  281.   position: absolute;
  282.   top: 0;
  283.   z-index: -99;
  284. }
  285.  
  286. .button-box {
  287.   position: absolute;
  288.   top: 35%;
  289.   border: 2px solid #fff;
  290.   padding: calc(100vw * 20 / 1920);
  291.   border-radius: 50%;
  292. }
  293. .button-box img {
  294.   width: calc(100vw * 40 / 1920);
  295.   height: calc(100vw * 40 / 1920);
  296. }
  297. .title-box {
  298.   height: 5%;
  299.   font-size: calc(100vw * 40 / 1920);
  300.   font-weight: bold;
  301.   width: 40%;
  302. }
  303. .right-box {
  304.   width: 100%;
  305.   height: 30%;
  306.   display: flex;
  307.   flex-direction: column;
  308.   align-items: center;
  309.   justify-content: space-evenly;
  310. }
  311. .video-box {
  312.   width: 100%;
  313.   height: 65%;
  314.   display: flex;
  315.   justify-content: center;
  316. }
  317. .videos {
  318.   width: 100%;
  319.   height: 100%;
  320. }
  321. .face-box {
  322.   width: 100%;
  323.   height: 100%;
  324.   display: flex;
  325.   flex-direction: column;
  326.   align-items: center;
  327.   overflow: auto;
  328. }
  329. .details {
  330.   display: flex;
  331.  
  332.   width: 100%;
  333.   height: 90%;
  334.   margin-top: 4px;
  335. }
  336. .image-box {
  337.   width: 30%;
  338.   height: 100%;
  339.   display: flex;
  340.   justify-content: center;
  341. }
  342.  
  343. .image-box img {
  344.   width: calc(100vw * 150 / 1920);
  345.   height: calc(100vw * 150 / 1920);
  346. }
  347. .list-box {
  348.   width: 60%;
  349.   height: calc(100vw * 300 / 1920);
  350.   display: flex;
  351.   flex-direction: column;
  352.   text-indent: calc(100vw * 16 / 1920);
  353.   font-size: calc(100vw * 18 / 1920);
  354.   padding-bottom: 20px;
  355. }
  356. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/701519
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号