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

tensorflow 在 vue 项目中使用示例_vue tensorflow

作者：繁依Fanyi0 | 2024-04-14 17:14:36

赞

踩

vue tensorflow

人脸识别示例

1、依赖的第三方库

package.json

  1. {
  2.     "peerdependencies": {
  3.         "@tensorflow/tfjs-backend-cpu": "3.8.0",
  4.         "@tensorflow/tfjs-backend-webgl": "3.8.0",
  5.         "@tensorflow/tfjs-backend-wasm": "3.8.0",
  6.         "@tensorflow/tfjs-converter": "3.8.0",
  7.         "@tensorflow/tfjs-core": "3.8.0"
  8.      },
  9. }

2、lib文件夹

anchors.js

  1. const arr = [
  2.   ...
  3.   [0.9375, 0.9375, 1.0, 1.0]
  4. ];
  5.  
  6. export default function get_blazeface_priors() {
  7.   return arr;
  8. }
  9.  
  10.

FaceDetectionModel.js

  1. import * as tf from '@tensorflow/tfjs-core'
  2. import {load_model} from "./ModelUtils";
  3. import get_blazeface_priors from "./anchors";
  4.  
  5. const DETECTION_IMAGE_SIZE = 128; //人脸检测的输入张量尺寸 [128,128]
  6. export class FaceDetectionModel {
  7.  
  8.     constructor({
  9.                     modelPath,
  10.                     imageSize,
  11.                     faceConfThresh,
  12.                     nmsThresh
  13.                 }) {
  14.         this.modelPath = modelPath || null;
  15.         this.faceConfThresh = faceConfThresh || 0.6;
  16.         this.nmsThresh = nmsThresh || 0.4;
  17.         this.imageSize = imageSize || [640, 480];
  18.     }
  19.  
  20.     destroy() {
  21.         tf.dispose();
  22.         tf.disposeVariables();
  23.         if (this.model) {
  24.             this.model = null;
  25.         }
  26.     }
  27.  
  28.     async loadModel() {
  29.         return this.model = await load_model(this.modelPath);
  30.     }
  31.  
  32.     /**
  33.      * 人脸检测，外部调用方法
  34.      * @param inputTensor
  35.      * @returns {Promise<null>} 人脸框
  36.      */
  37.     async executeFaceDetection(inputTensor) {
  38.         var outputFaceBox = null;
  39.         const detectionResult = this.predict(inputTensor, DETECTION_IMAGE_SIZE);
  40.  
  41.         const confTensor = detectionResult[0];
  42.         const locTensor = detectionResult[1];
  43.  
  44.         // decode boxes and nms
  45.         const decodeResult = this.decodeBox(locTensor, get_blazeface_priors());
  46.         const decodeLocTensor = decodeResult[0];
  47.         const decodeKeyPointTensor = decodeResult[1];
  48.         const keepIdxsTensor = await this.nms(decodeLocTensor,
  49.             confTensor,
  50.             this.faceConfThresh,
  51.             this.nmsThresh);
  52.  
  53.         const faceBoxesTensor = tf.gather(decodeLocTensor, keepIdxsTensor);
  54.         const faceKeyPointTensor = tf.gather(decodeKeyPointTensor, keepIdxsTensor);
  55.  
  56.         const faceBoxes = faceBoxesTensor.arraySync();
  57.         const keyPointList = faceKeyPointTensor.arraySync();
  58.  
  59.         //没有用tidy清除掉的tensor要手动清除
  60.         confTensor.dispose();
  61.         locTensor.dispose();
  62.         decodeLocTensor.dispose();
  63.         faceBoxesTensor.dispose();
  64.         decodeKeyPointTensor.dispose();
  65.         faceKeyPointTensor.dispose();
  66.         keepIdxsTensor.dispose();
  67.  
  68.         let x_1, x_2, y_1, y_2;
  69.         let xMax, yMax;
  70.         let outputKeyPoint = [];
  71.         [xMax, yMax] = this.imageSize;
  72.         if (faceBoxes.length > 0) {
  73.             //从tensor的比例大小，放缩成原来的大小
  74.             x_1 = faceBoxes[0][0] * xMax;
  75.             y_1 = faceBoxes[0][1] * yMax;
  76.             x_2 = faceBoxes[0][2] * xMax;
  77.             y_2 = faceBoxes[0][3] * yMax;
  78.  
  79.             //图像向外部扩充一定区域
  80.             const w = x_2 - x_1;
  81.             const h = y_2 - y_1;
  82.             x_1 = Math.round(Math.max(x_1 - w / 10, 0));
  83.             x_2 = Math.round(Math.min(x_2 + w / 10, xMax));
  84.             y_1 = Math.round(Math.max(y_1 - h / 5, 0));
  85.             y_2 = Math.round(Math.min(y_2 + h / 20, yMax));
  86.  
  87.             outputFaceBox = [x_1, y_1, x_2, y_2];
  88.             for (let i = 0; i < keyPointList[0].length; i += 2) {
  89.                 const point = [keyPointList[0][i] * xMax, keyPointList[0][i + 1] * yMax];
  90.                 outputKeyPoint.push(point);
  91.             }
  92.  
  93.         }
  94.         return [outputFaceBox, outputKeyPoint];
  95.     }
  96.  
  97.     /**
  98.      * 预测人脸框
  99.      * @param image_tensor
  100.      * @param scaled_size
  101.      * @returns {[T, Tensor<Rank>]}
  102.      */
  103.     predict(imageTensor, scaledSize) {
  104.         return tf.tidy(() => {
  105.             const resizedImg = tf.image.resizeBilinear(imageTensor, [scaledSize, scaledSize]);
  106.             //预处理
  107.             const inputTensor = tf.expandDims(tf.div(resizedImg, 255.0));
  108.             //模型检测
  109.             const preds = this.model.predict(inputTensor);
  110.  
  111.             const confTensor = tf.sigmoid(tf.squeeze(tf.concat([preds[1], preds[3]], 1)));
  112.             const locTensor = tf.squeeze(tf.concat([preds[2], preds[0]], 1));
  113.  
  114.             return [confTensor, locTensor];
  115.         });
  116.     }
  117.  
  118.  
  119.     /**
  120.      * 检测框坐标映射至图像的尺寸和位置（在cpu上计算）
  121.      * @param loc
  122.      * @param anchors
  123.      * @returns {*}
  124.      */
  125.     decodeBox(loc_tensor, anchors) {
  126.         return tf.tidy(() => {
  127.             //注意loc_tensor不要被tf释放
  128.             const reshape_loc_tensor = tf.reshape(loc_tensor, [-1]);
  129.  
  130.             const loc = reshape_loc_tensor.dataSync();
  131.             const num_anchor = anchors.length;
  132.             const loc_length = 16;
  133.             for (let anchor_i = 0; anchor_i < num_anchor; anchor_i++) {
  134.                 // decode boxes:
  135.                 // to xywh
  136.                 loc[anchor_i * loc_length + 0] = loc[anchor_i * loc_length + 0] / 128.0 * anchors[anchor_i][2] + anchors[anchor_i][0];
  137.                 loc[anchor_i * loc_length + 1] = loc[anchor_i * loc_length + 1] / 128.0 * anchors[anchor_i][3] + anchors[anchor_i][1];
  138.                 loc[anchor_i * loc_length + 2] = loc[anchor_i * loc_length + 2] / 128.0 * anchors[anchor_i][2];
  139.                 loc[anchor_i * loc_length + 3] = loc[anchor_i * loc_length + 3] / 128.0 * anchors[anchor_i][3];
  140.                 // xywh -> xyxy
  141.                 loc[anchor_i * loc_length + 0] = loc[anchor_i * loc_length + 0] - 0.5 * loc[anchor_i * loc_length + 2];
  142.                 loc[anchor_i * loc_length + 1] = loc[anchor_i * loc_length + 1] - 0.5 * loc[anchor_i * loc_length + 3];
  143.                 loc[anchor_i * loc_length + 2] = loc[anchor_i * loc_length + 0] + loc[anchor_i * loc_length + 2];
  144.                 loc[anchor_i * loc_length + 3] = loc[anchor_i * loc_length + 1] + loc[anchor_i * loc_length + 3];
  145.  
  146.                 //decode keypoints
  147.                 for (let k = 4; k < loc_length; k++) {
  148.                     if (k % 2 == 0) {
  149.                         loc[anchor_i * loc_length + k] = loc[anchor_i * loc_length + k] / 128.0 * anchors[anchor_i][2] + anchors[anchor_i][0];
  150.                     } else {
  151.                         loc[anchor_i * loc_length + k] = loc[anchor_i * loc_length + k] / 128.0 * anchors[anchor_i][3] + anchors[anchor_i][1];
  152.                     }
  153.                 }
  154.             }
  155.             const decode_loc_tensor = tf.tensor(loc, [num_anchor, loc_length], "float32");
  156.             const [boxes_tensor, keypoints_tensor] = tf.split(decode_loc_tensor, [4, 12], 1);
  157.             return [boxes_tensor, keypoints_tensor];
  158.         });
  159.     }
  160.  
  161.     /**
  162.      * nms
  163.      * @param _boxes
  164.      * @param _conf
  165.      * @param conf_thresh
  166.      * @param nms_thresh
  167.      * @returns {Promise<Tensor<Rank>>}
  168.      */
  169.     async nms(_boxes, _conf, conf_thresh, nms_thresh) {
  170.         const tf_boxes_tensor = tf.tidy(() => {
  171.             const [x1, y1, x2, y2] = tf.split(_boxes, 4, 1);
  172.             return tf.concat([y1, x1, y2, x2], 1);
  173.         });
  174.         // nms
  175.         let select_idx = await tf.image.nonMaxSuppressionAsync(tf_boxes_tensor, _conf, 10, nms_thresh, conf_thresh);
  176.         tf_boxes_tensor.dispose();
  177.         return select_idx;
  178.     }
  179. }
  180.  
  181. export default FaceDetectionModel;

FaceEngine.js

  1. import * as tf from '@tensorflow/tfjs-core'
  2. import FaceMeshModel from "./FaceMeshModel";
  3. import FaceDetectionModel from "./FaceDetectionModel";
  4. import {newFrameTensor, checkFace} from "./ModelUtils";
  5.  
  6. export class FaceEngine {
  7.  
  8.     constructor({
  9.                     detectionModelPath,
  10.                     meshModelPath,
  11.                     imageSize,
  12.                     faceConfThresh,
  13.                     nmsThresh,
  14.                     landmarkThresh,
  15.                     backend
  16.                 }) {
  17.         this.faceDetectionModel = new FaceDetectionModel({
  18.             modelPath: detectionModelPath,
  19.             imageSize: imageSize,
  20.             faceConfThresh: faceConfThresh,
  21.             nmsThresh: nmsThresh,
  22.             backend: backend
  23.         });
  24.         this.faceMeshModel = new FaceMeshModel({
  25.             modelPath: meshModelPath,
  26.             backend: backend
  27.         });
  28.         this.backend = backend || "webgl"
  29.         this.imageSize = imageSize;
  30.         this.landmarkThresh = landmarkThresh;
  31.  
  32.         this.currentFrameTensor = null;
  33.         this.lastFaceBox = null;
  34.         this.isModelReady = false;
  35.     }
  36.  
  37.     /**
  38.      *
  39.      * @returns {Promise<void>}
  40.      */
  41.     async init() {
  42.         await tf.setBackend(this.backend);
  43.         await this.faceDetectionModel.loadModel();
  44.         await this.faceMeshModel.loadModel();
  45.  
  46.         const preload_time = performance.now();
  47.         console.log('start to preload model');
  48.         await this.preloadEmptyFrame();
  49.         console.log('preload model cost = ', performance.now() - preload_time);
  50.         this.isModelReady = true;
  51.     }
  52.  
  53.     setImageSize(imageSize){
  54.         this.imageSize = imageSize;
  55.         this.faceDetectionModel.imageSize = imageSize;
  56.     }
  57.  
  58.     /**
  59.      * 使用空数据初次加载
  60.      * @returns {Promise<number>}
  61.      */
  62.     async preloadEmptyFrame() {
  63.         const frameWidth = this.imageSize[0];
  64.         const frameHeight = this.imageSize[1];
  65.         const bufferSize = frameWidth * frameHeight * 4;
  66.  
  67.         const imageTensor = newFrameTensor(new Uint8ClampedArray(bufferSize), frameWidth, frameHeight, 3);
  68.         if (this.faceDetectionModel) {
  69.             await this.faceDetectionModel.executeFaceDetection(imageTensor);
  70.         }
  71.         if (this.faceMeshModel) {
  72.             await this.faceMeshModel.executeFaceMesh(imageTensor, [0, 0, frameWidth, frameHeight]);
  73.         }
  74.  
  75.         imageTensor.dispose();
  76.         return 0;
  77.     }
  78.  
  79.     destroy() {
  80.         try{
  81.             tf.dispose();
  82.             tf.disposeVariables();
  83.             if (this.faceDetectionModel) {
  84.                 this.faceDetectionModel.destroy();
  85.             }
  86.             if (this.faceMeshModel) {
  87.                 this.faceMeshModel.destroy();
  88.             }
  89.         }catch (e) {
  90.             console.log("failed to release faceEngine, error = ", e);
  91.         }
  92.     }
  93.  
  94.     rotateImageTensor(tensor, radian){
  95.         return tf.tidy(()=>{
  96.             const inputTensor = tf.expandDims(tensor, 0);
  97.             const outputTensor = tf.image.rotateWithOffset(inputTensor, radian);
  98.             return outputTensor;
  99.         });
  100.        return
  101.     }
  102.  
  103.     calAngle(pLeftEye, pRightEye){
  104.         if (pLeftEye && pRightEye){
  105.             const leftX = pLeftEye[0];
  106.             const leftY = pLeftEye[1];
  107.             const rightX = pRightEye[0];
  108.             const rightY = pRightEye[1];
  109.  
  110.             const angle = Math.atan((rightY - leftY) / (rightX - leftX)) * 180 / Math.PI;
  111.             return angle;
  112.             console.log('angle= ', angle);
  113.         }else{
  114.             return null;
  115.         }
  116.     }
  117.  
  118.     /**
  119.      *
  120.      * @param frame
  121.      * @returns {Promise<{bbox: *, confidence: *, landmarks: *, time: *}>}
  122.      */
  123.     async handleImageFrame(frame, constrainsOptions) {
  124.         this.startTime = performance.now();
  125.         this.faceDetectionBox = null;
  126.         this.faceDetectionKeypoints = null;
  127.  
  128.         const frameWidth = this.imageSize[0];
  129.         const frameHeight = this.imageSize[1];
  130.         if (!frame) {
  131.             return this.sendErrorAndDisposeTensor("input frame error");
  132.         }
  133.         if (!this.isModelReady) {
  134.             return this.sendErrorAndDisposeTensor("model is not ready");
  135.         }
  136.  
  137.         this.currentFrameTensor = newFrameTensor(frame, frameWidth, frameHeight, 3);
  138.  
  139.         let landmarkFaceBox = null;
  140.  
  141.         //确认是否需要执行人脸检测，并指定关键点使用的人脸框
  142.         if (!this.lastFaceBox) {
  143.         // if (true) {
  144.             const detectionResult = await this.faceDetectionModel.executeFaceDetection(this.currentFrameTensor);
  145.             const faceBox = detectionResult[0];
  146.             this.faceDetectionBox = faceBox;
  147.             this.faceDetectionKeypoints = detectionResult[1];
  148.             if (this.faceDetectionKeypoints){
  149.                 this.calAngle(this.faceDetectionKeypoints[0], this.faceDetectionKeypoints[1]);
  150.             }
  151.             if (!faceBox) {
  152.                 return this.sendResultAndDisposeTensor(null, null, -1, "no face");
  153.             } else {
  154.                 landmarkFaceBox = faceBox;
  155.             }
  156.         } else {
  157.             landmarkFaceBox = this.lastFaceBox;
  158.         }
  159.  
  160.         let facePreprocessResult = null;
  161.         if (constrainsOptions){
  162.             facePreprocessResult = checkFace(this.currentFrameTensor, landmarkFaceBox, this.imageSize, constrainsOptions);
  163.         }
  164.  
  165.         const meshResult = await this.faceMeshModel.executeFaceMesh(this.currentFrameTensor, landmarkFaceBox);
  166.         const landmarksConfidence = meshResult[0];
  167.         const landmarksPostion = meshResult[1];
  168.  
  169.         //后面全部在cpu运算，属于js的typearray类型
  170.         const filterResult = this.faceMeshModel.decode(landmarksPostion, landmarkFaceBox);
  171.         const landmarks = filterResult[0];
  172.         const landmarksFaceBox = filterResult[1];
  173.  
  174.         //根据关键点置信度的阈值，更新下一帧的人脸检测框
  175.         //如果未达到阈值，则将人脸检测框置空,下一次执行人脸检测
  176.         const finalFaceBox = this.updateLastFaceBox(landmarksFaceBox, landmarkFaceBox, landmarksConfidence, this.landmarkThresh);
  177.         this.lastFaceBox = finalFaceBox;
  178.         if (this.faceDetectionBox){
  179.             //优先返回有检测结果的人脸框
  180.             return this.sendResultAndDisposeTensor(
  181.                 this.faceDetectionBox,
  182.                 landmarks,
  183.                 landmarksConfidence,
  184.                 '检测成功', facePreprocessResult);
  185.         }else{
  186.             //返回采用跟踪时的人脸框
  187.             return this.sendResultAndDisposeTensor(
  188.                 finalFaceBox,
  189.                 landmarks,
  190.                 landmarksConfidence,
  191.                 '检测成功',facePreprocessResult);
  192.         }
  193.     }
  194.  
  195.     updateLastFaceBox(faceBox, lastFaceBox, confidence, threshold) {
  196.         let newFaceBox;
  197.         let xMax, yMax;
  198.         [xMax, yMax] = this.imageSize;
  199.         if (confidence > threshold) {
  200.             let x_1, y_1, x_2, y_2;
  201.             [x_1, y_1, x_2, y_2] = faceBox;
  202.             //图像向外部扩充一定区域
  203.             if (lastFaceBox) {
  204.                 let x_11, y_11, x_22, y_22;
  205.                 [x_11, y_11, x_22, y_22] = lastFaceBox;
  206.                 const w = x_22 - x_11;
  207.                 const h = y_22 - y_11;
  208.                 const center_x = (x_1 + x_2) / 2;
  209.                 const center_y = (y_1 + y_2) / 2;
  210.  
  211.                 x_1 = Math.round(Math.max(center_x - w / 2, 0));
  212.                 x_2 = Math.round(Math.min(center_x + w / 2, xMax));
  213.                 y_1 = Math.round(Math.max(center_y - h / 2, 0));
  214.                 y_2 = Math.round(Math.min(center_y + h / 2, yMax));
  215.  
  216.             } else {
  217.                 const w = x_2 - x_1;
  218.                 const h = y_2 - y_1;
  219.                 x_1 = Math.round(Math.max(x_1 - w / 5, 0));
  220.                 x_2 = Math.round(Math.min(x_2 + w / 5, xMax));
  221.                 y_1 = Math.round(Math.max(y_1 - h / 3, 0));
  222.                 y_2 = Math.round(Math.min(y_2 + h / 3, yMax));
  223.             }
  224.             newFaceBox = [x_1, y_1, x_2, y_2];
  225.         } else {
  226.             newFaceBox = null;
  227.         }
  228.         return newFaceBox;
  229.     }
  230.  
  231.  
  232.     /**
  233.      * 生成输出json字典
  234.      * @param message 返回信息
  235.      * @param bbox 人脸框array
  236.      * @param landmarks 关键点array2D
  237.      * @param confidence 关键点置信度
  238.      * @param keypoints 人脸定位关键点
  239.      * @returns {{bbox: *, confidence: *, landmarks: *, time: *, message: *, keypoints: *}}
  240.      */
  241.     sendResultAndDisposeTensor(bbox, landmarks, confidence, message, optionsMessage = null) {
  242.         if (this.currentFrameTensor) {
  243.             this.currentFrameTensor.dispose();
  244.             this.currentFrameTensor = null;
  245.         }
  246.         return {bbox: bbox, landmarks: landmarks, confidence: confidence,
  247.             time: performance.now() - this.startTime, message: message, keypoints: this.faceDetectionKeypoints, optionsMessage:optionsMessage};
  248.     }
  249.  
  250.     sendErrorAndDisposeTensor(error_message) {
  251.         return this.sendResultAndDisposeTensor(null, null, -1, error_message);
  252.     }
  253. }
  254.  
  255. export default FaceEngine;
  256.

FaceMeshModel.js

  1. import * as tf from '@tensorflow/tfjs-core'
  2. import {load_model} from "./ModelUtils";
  3.  
  4. const MESH_IMAGE_SIZE = 192; //人脸关键点的输入张量尺寸 [192, 192]
  5. const id_list = [119, 348, 129, 358, 69, 299, 189, 413, 105, 52, 334,
  6.     282, 70, 46, 300, 276, 230, 450, 9, 35, 265, 139, 368,
  7.     107, 55, 336, 285, 207, 427, 57, 287, 18, 164];
  8.  
  9. export class FaceMeshModel {
  10.     constructor({
  11.                     modelPath
  12.                 }) {
  13.         this.modelPath = modelPath || null;
  14.         this.model = null;
  15.     }
  16.  
  17.     destroy() {
  18.         tf.dispose();
  19.         tf.disposeVariables();
  20.         if (this.model) {
  21.             this.model = null;
  22.         }
  23.     }
  24.  
  25.     async loadModel() {
  26.         this.model = await load_model(this.modelPath);
  27.     }
  28.  
  29.     /**
  30.      * 人脸关键点预测
  31.      * @param inputTensor 人脸tensor
  32.      * @param faceBox 人脸框
  33.      * @returns {Promise<*[]>} 置信度、人脸关键点，未经过decode
  34.      */
  35.     async executeFaceMesh(inputTensor, faceBox) {
  36.         let x_1, y_1, x_2, y_2;
  37.         [x_1, y_1, x_2, y_2] = faceBox;
  38.  
  39.         let w_c = x_2 - x_1;
  40.         let h_c = y_2 - y_1;
  41.         const meshResult = this.predict(inputTensor, x_1, y_1, w_c, h_c, MESH_IMAGE_SIZE);
  42.  
  43.         const landmarksPosTensor = meshResult[0];
  44.         const landmarksConfTensor = meshResult[1];
  45.  
  46.         const landmarksPos = await landmarksPosTensor.dataSync();
  47.         const temp = await landmarksConfTensor.dataSync();
  48.         const landmarksConf = temp[0];
  49.  
  50.         //输入图像的tensor后面不用了，需要删除
  51.         landmarksPosTensor.dispose();
  52.         landmarksConfTensor.dispose();
  53.         return [landmarksConf, landmarksPos];
  54.     }
  55.  
  56.     /**
  57.      * 预测关键点，输出原图像坐标系下的关键点坐标
  58.      * @param imageTensor
  59.      * @param x_1
  60.      * @param y_1
  61.      * @param w_c
  62.      * @param h_c
  63.      * @param resizedSize
  64.      * @returns {Tensor<Rank> | Tensor[] | NamedTensorMap}
  65.      */
  66.     predict(imageTensor, x_1, y_1, w_c, h_c, resizedSize) {
  67.         return tf.tidy(() => {
  68.             const cropedImg = tf.slice(imageTensor, [y_1, x_1, 0], [h_c, w_c, 3]);
  69.             const cropedResizedImg = tf.image.resizeBilinear(cropedImg, [resizedSize, resizedSize]);
  70.             const inputTensor = tf.expandDims(tf.div(cropedResizedImg, 255.0));
  71.             const preds = this.model.predict(inputTensor);
  72.             return preds;
  73.         });
  74.  
  75.     }
  76.  
  77.     decode(preds, faceBox) {
  78.         let w, h, x_1, y_1, x_2, y_2;
  79.         [x_1, y_1, x_2, y_2] = faceBox;
  80.         w = x_2 - x_1;
  81.         h = y_2 - y_1;
  82.  
  83.         let landmarks = new Array(468);
  84.         let pnts = preds;
  85.  
  86.         let x_min = x_1 + w;
  87.         let x_max = -1;
  88.         let y_min = y_1 + h;
  89.         let y_max = -1;
  90.  
  91.         let index = 0;
  92.         for (let i = 0; i < pnts.length; i += 3) {
  93.             let xp = pnts[i] * w / MESH_IMAGE_SIZE + x_1;
  94.             let yp = pnts[i + 1] * h / MESH_IMAGE_SIZE + y_1;
  95.  
  96.             if (id_list.indexOf(index) != -1) {
  97.                 x_min = Math.min(x_min, xp);
  98.                 y_min = Math.min(y_min, yp);
  99.                 x_max = Math.max(x_max, xp);
  100.                 y_max = Math.max(y_max, yp);
  101.             }
  102.             landmarks[index] = [xp, yp];
  103.             index = index + 1;
  104.         }
  105.         return [landmarks, [x_min, y_min, x_max, y_max]];
  106.     }
  107. }
  108.  
  109. export default FaceMeshModel;

ModelUtils.js

  1. import * as tf from "@tensorflow/tfjs-core";
  2. import * as tfc from "@tensorflow/tfjs-converter";
  3. import {assert} from "@tensorflow/tfjs-core/dist/util_base";
  4.  
  5.  
  6. export function newFrameTensor(frame, width, height, channel) {
  7. 	return tf.browser.fromPixels(
  8. 		{
  9. 			data: new Uint8Array(frame),
  10. 			width: width,
  11. 			height: height,
  12. 		}, channel
  13. 	);
  14. }
  15.  
  16. export async function load_model(model_url) {
  17.     console.log('start load model, url = ', model_url);
  18.     if (!model_url) {
  19.         throw new Error("detection_model can't be empty");
  20.     }
  21.     try {
  22.         let model = await tfc.loadGraphModel(model_url);
  23.         console.log("load model success, path = ", model_url);
  24.         return model;
  25.     } catch (e) {
  26.         console.log("load model failed, err = ", e);
  27.         return null;
  28.     }
  29. }
  30.  
  31. export function rgb2gray(imageTensor) {
  32.     const [r, g, b] = tf.split(imageTensor, 3, 2)
  33.     let grayTensor = tf.addN([tf.mul(r, 0.299), tf.mul(g, 0.587), tf.mul(b, 0.144)]);
  34.     // let output = tf.squeeze(grayTensor);
  35.     return grayTensor;
  36. }
  37.  
  38. export function SMD2(grayTensor) {
  39.     // img_t: [1,H,W,4] : rgba
  40.     const gray = grayTensor;
  41.     let [h, w] = gray.shape;
  42.  
  43.     let img_left = tf.slice(gray, [1, 0], [h - 1, w - 1]);
  44.     let img_right = tf.slice(gray, [1, 1], [h - 1, w - 1]);
  45.  
  46.     let img_up = tf.slice(gray, [1, 1], [h - 1, w - 1]);
  47.     let img_bottom = tf.slice(gray, [0, 1], [h - 1, w - 1]);
  48.  
  49.     let diff_lr = tf.abs(tf.sub(img_left, img_right));
  50.     let diff_ub = tf.abs(tf.sub(img_up, img_bottom));
  51.  
  52.     let vals = tf.mul(diff_lr, diff_ub);
  53.     let smd2 = tf.mean(vals);
  54.     return smd2;
  55. }
  56.  
  57. export function getBrightTensor(grayTensor) {
  58.     const gray = grayTensor;
  59.     let bright = tf.mean(gray);
  60.     return bright;
  61. }
  62.  
  63.  
  64. export function getBright(rgb_data, width, height) {
  65.     let bright = 0;
  66.     for (let i = 0; i < width; i++) {
  67.         for (let j = 0; j < height; j++) {
  68.             let r = rgb_data[3 * (i * width + j) + 0];
  69.             let g = rgb_data[3 * (i * width + j) + 1];
  70.             let b = rgb_data[3 * (i * width + j) + 2];
  71.             bright += 0.2989 * r + 0.5870 * g + 0.1140 * b;
  72.         }
  73.     }
  74.     const count = height * width;
  75.     bright /= count;
  76.     return bright;
  77. }
  78.  
  79. export function getFacePosition(faceBox, imageSize, thresholds) {
  80.     const minDistance = thresholds.minDistance;
  81.     const maxDistance = thresholds.maxDistance;
  82.  
  83.     const xThreshold = thresholds.xThreshold;
  84.     const yThreshold = thresholds.yThreshold;
  85.  
  86.  
  87.     const width = imageSize[0];
  88.     const height = imageSize[1];
  89.  
  90.     const imgXCenter = width / 2;
  91.     const imgYCenter = height / 2;
  92.  
  93.     let x_1, y_1, x_2, y_2;
  94.     [x_1, y_1, x_2, y_2] = faceBox;
  95.  
  96.     const faceXCenter = (x_2 + x_1) / 2;
  97.     const faceYCenter = (y_2 + y_1) / 2;
  98.  
  99.     const distanceValue = (x_2 - x_1) / width;
  100.     let isDistanceMatch, distanceTip;
  101.     if (distanceValue < minDistance) {
  102.         isDistanceMatch = false;
  103.         // distanceTip = "距离太远";
  104.         distanceTip = "太远";
  105.     } else if (distanceValue > maxDistance) {
  106.         isDistanceMatch = false;
  107.         // distanceTip = "距离太近"; //too close
  108.         distanceTip = "太近";
  109.     } else {
  110.         isDistanceMatch = true;
  111.         // distanceTip = "距离合适";
  112.         distanceTip = "合适";
  113.     }
  114.     const deltaX = (faceXCenter - imgXCenter);
  115.     const deltaY = (faceYCenter - imgYCenter);
  116.  
  117.     // const positionTips = [deltaX >= xThreshold ? deltaX : 0,
  118.     //     deltaY >= yThreshold ? deltaY : 0]
  119.     let isPositionMatch, positionTips, positionTips2;
  120.     if (Math.abs(deltaX) >= xThreshold){
  121. 			isPositionMatch = false;
  122. 			positionTips = deltaX > 0 ? "请向左移动" : "请向右移动";
  123. 			positionTips2 = deltaX > 0 ? "偏右" : "偏左";
  124.     } else if (Math.abs(deltaY) >= yThreshold){
  125. 			isPositionMatch = false;
  126. 			positionTips = deltaY > 0 ? "请向上移动" : "请向下移动";
  127. 			positionTips2 = deltaY > 0 ? "偏下" : "偏上";
  128.     } else {
  129. 			isPositionMatch = true;
  130. 			positionTips = "位置合适";
  131. 			positionTips2 = "合适"
  132.     }
  133.  
  134.     return {
  135. 			isPositionMatch: isPositionMatch,
  136. 			positionTips: positionTips,
  137. 			positionTips2: positionTips2,
  138. 			isDistanceMatch: isDistanceMatch,
  139. 			distanceTip: distanceTip,
  140. 			distanceValue: distanceValue
  141.     }
  142. }
  143.  
  144. /**
  145.  *
  146.  * @param inputTensor
  147.  * @param faceBox
  148.  * @param constrainsOptions
  149.  * @returns {{}}
  150.  */
  151. export function checkFace(inputTensor, faceBox, imageSize, constrainsOptions) {
  152.     assert(constrainsOptions);
  153.     let x_1, y_1, x_2, y_2;
  154.     [x_1, y_1, x_2, y_2] = faceBox;
  155.  
  156.     let w_c = x_2 - x_1;
  157.     let h_c = y_2 - y_1;
  158.  
  159.     return tf.tidy(() => {
  160.         let finalResult = {};
  161.  
  162.         const cropedImg = tf.slice(inputTensor, [y_1, x_1, 0], [h_c, w_c, 3]);
  163.         let positionResult = {};
  164.         let brightResult = {};
  165.         let clarifyResult = {};
  166.  
  167.         if (constrainsOptions.positionConstrains) {
  168. 					positionResult = getFacePosition(faceBox, imageSize, constrainsOptions.positionConstrains);
  169. 					finalResult['positionConstrains'] = positionResult;
  170.         }
  171.  
  172.         if (constrainsOptions.brightnessConstrains || constrainsOptions.clarifyConstrains) {
  173. 					let grayTensor = rgb2gray(cropedImg);
  174. 					if (constrainsOptions.brightnessConstrains) {
  175. 						assert(constrainsOptions.brightnessConstrains.minValue && constrainsOptions.brightnessConstrains.maxValue);
  176. 						const bright = getBrightTensor(grayTensor).arraySync();
  177. 						brightResult['brightnessValue'] = Math.floor(bright);
  178.  
  179. 						let isBrightMatch = false;
  180. 						let brightTips;
  181. 						if (bright < constrainsOptions.brightnessConstrains.minValue) {
  182. 								// brightTips = '亮度过低';
  183. 								brightTips = '过暗';
  184. 						} else if (bright > constrainsOptions.brightnessConstrains.maxValue) {
  185. 								// brightTips = '亮度过高';
  186. 								brightTips = '过高';
  187. 						} else {
  188. 								isBrightMatch = true;
  189. 								// brightTips = '亮度合适';
  190. 								brightTips = '合适';
  191. 						}
  192. 						brightResult['brightTips'] = brightTips;
  193. 						brightResult['isBrightMatch'] = isBrightMatch;
  194. 						finalResult['brightnessConstrains'] = brightResult;
  195. 					}
  196.  
  197. 					if (constrainsOptions.clarifyConstrains) {
  198. 						assert(constrainsOptions.clarifyConstrains.minValue);
  199. 						const clarify = SMD2(grayTensor).arraySync();
  200. 						clarifyResult['clarifyValue'] = Math.floor(clarify);
  201.  
  202. 						let isClarifyMatch = false;
  203. 						let clarifyTips;
  204. 						if (clarify < constrainsOptions.clarifyConstrains.minValue) {
  205. 								clarifyTips = '清晰度过低';
  206. 						} else {
  207. 								isClarifyMatch = true;
  208. 								clarifyTips = '清晰度合适';
  209. 						}
  210. 						clarifyResult['clarifyTips'] = clarifyTips;
  211. 						clarifyResult['isClarifyMatch'] = isClarifyMatch;
  212. 						finalResult['clarifyConstrains'] = clarifyResult;
  213. 					}
  214.         }
  215.         return finalResult;
  216.     });
  217. }

index.js

  1. import {FaceEngine} from "./FaceEngine";
  2. import {FaceMeshModel} from "./FaceMeshModel";
  3. import {FaceDetectionModel} from "./FaceDetectionModel";
  4.  
  5. export {FaceEngine, FaceMeshModel, FaceDetectionModel};
  6. export default {FaceEngine, FaceMeshModel, FaceDetectionModel};

3、在页面中使用模型

  1. <template>
  2. 	<div class="main_container">
  3.  
  4. 		<div class="ai-diagnosis-wrapper" v-if="pageState==0">
  5. 			<img class="zb-bg" src="@/assets/camera/zb-bg.jpg" alt=""/>
  6. 			<div class="adw-btn gray" v-if="modelLoading">模型加载中...</div>
  7. 			<div class="adw-btn" v-if="!modelLoading" @click="showCamera">开始</div>
  8. 		</div>
  9.  
  10. 		<div class="video-box" v-show="pageState == 1">
  11. 			
  12. 			<video class="video" id="video" ref="video" playsinline autoplay muted></video>
  13. 			
  14. 			<div class="video-mask">
  15. 				<img class="circle-img" src="@/assets/camera/animate-camera-circle.png"/>
  16. 			</div>
  17.  
  18. 			<canvas id="imgCanvas"></canvas>
  19. 			<canvas class="canvas_render" id="drawerCanvas" ref="canvasRenderRef"></canvas>
  20. 			
  21. 			<div class="mantle-box">
  22. 				<div class="message-tips">
  23. 					<p class="message-tips-p">{{ faceDetect ? "识别成功" : faceDetectorTips }}</p>
  24. 				</div>
  25. 				<ul class="photo-env">
  26. 					<li>
  27. 						<img class="icon" v-show="!detectStatus" src="@/assets/camera/gy-1.png"/>
  28. 						<img class="icon" v-show="detectStatus && detectBright === 0" src="@/assets/camera/gy-3.png"/>
  29. 						<img class="icon" v-show="detectStatus && detectBright !== 0" src="@/assets/camera/gy-2.png"/>
  30. 						<div class="r-box">
  31. 							<p class="p-1">拍照光源</p>
  32. 							<p class="p-2">{{detectBright !== -1 ? brightTxt[detectBright] : (!detectStatus ? '待检' : '无人脸')}}</p>
  33. 						</div>
  34. 					</li>
  35.  
  36. 					<li>
  37. 						<img class="icon" v-show="!detectStatus" src="@/assets/camera/wz-1.png"/>
  38. 						<img class="icon" v-show="detectStatus && (detectPosition === 0 && detectDistance === 0)" src="@/assets/camera/wz-3.png"/>
  39. 						<img class="icon" v-show="detectStatus && (detectPosition !== 0 || detectDistance !== 0)" src="@/assets/camera/wz-2.png"/>
  40. 						<div class="r-box">
  41. 							<p class="p-1">人脸位置</p>
  42. 							<p class="p-2">{{detectDistance !== -1 ? (detectDistance === 0 ? positionTxt[detectPosition] : distanceTxt[detectDistance]) : (!detectStatus ? '待检' : '无人脸')}}</p>
  43. 						</div>
  44. 					</li>
  45. 					
  46. 					<li>
  47. 						<img class="icon" v-show="!detectStatus" src="@/assets/camera/jd-1.png"/>
  48. 						<img class="icon" v-show="detectStatus && detectPosture === 0" src="@/assets/camera/jd-3.png"/>
  49. 						<img class="icon" v-show="detectStatus && detectPosture !== 0" src="@/assets/camera/jd-2.png"/>
  50. 						<div class="r-box">
  51. 							<p class="p-1">人脸角度</p>
  52. 							<p class="p-2">{{detectPosture !== -1 ? postureTxt[detectPosture] : (!detectStatus ? '待检' : '无人脸')}}</p>
  53. 						</div>
  54. 					</li>
  55. 				</ul>
  56. 			</div>
  57. 		</div>
  58.  
  59. 	</div>
  60. </template>
  61.  
  62. <script>
  63. 	import * as tf from "@tensorflow/tfjs"
  64. 	import { positionMsg, positionTxt, brightTxt, distanceTxt, brightDetailTxt, postureTxt } from '@/utils/utils.js'
  65.     import {FaceEngine} from '@/detector/index';
  66. 	
  67. 	export default {
  68. 		name: 'Cameraface',
  69.  
  70. 		data () {
  71. 			return {
  72. 				pageState: 0,
  73. 				modelLoading: true, // 模型加载
  74. 				detectStatus: false,
  75.  
  76. 		        getImageDataing: false,
  77. 				startTime: 0, //避免浪费资源，设置两帧检测间隔时间
  78. 				face_detect_model: '',
  79. 				faceDetect: false,
  80. 				faceDetectSuccess: -1, // [-1, 0, 1]
  81. 				runnerTimeout: '',
  82.  
  83. 			  detectBright: -1,// 亮度
  84. 				detectPosition: -1, // 偏移位置
  85. 				detectDistance: -1, // 偏移距离
  86. 				detectPosture: -1, // 人脸角度
  87. 				faceDetectorTips:'请保持人脸在采集框中',
  88.  
  89.                 videoWidth: 0,
  90. 				videoHeight: 0,
  91. 				//画布尺寸
  92. 				videoObj: '',
  93. 				canvasObj: '',
  94. 				context: '',
  95. 				streaming: false, // 是否开始捕获媒体
  96. 				mediaStreamTrack: '',
  97. 		
  98. 				distanceTxt: distanceTxt,
  99. 				positionTxt: positionTxt,
  100. 				brightDetailTxt: brightDetailTxt,
  101. 				brightTxt: brightTxt,
  102. 				positionMsg: positionMsg,
  103. 				postureTxt: postureTxt,
  104. 				sliceFlag:false,
  105.  
  106. 				isUploading: false,
  107. 				isUploadSuccess: false,
  108. 			}
  109. 		},
  110.  
  111. 		created () {
  112. 			this.loadModel()
  113. 		},
  114.  
  115. 		mounted() {
  116. 			if (!window.URL) {
  117. 				window.URL = window.URL || window.webkitURL || window.msURL || window.oURL;
  118. 			}
  119. 			this.videoObj = this.$refs.video;
  120. 			this.videoObj.removeAttribute("controls");
  121.  
  122. 			this.canvasObj = document.getElementById("imgCanvas");//获取图像帧数据画布
  123. 			this.context = this.canvasObj.getContext('2d');
  124.  
  125. 			this.drawerCanvasObj = document.getElementById("drawerCanvas");//绘制检测结果画布
  126. 			this.drawerCanvasCtx = this.drawerCanvasObj.getContext('2d');
  127. 		},
  128.  
  129. 		unmounted() {
  130. 			this.hideCamera(true);
  131. 		},
  132.  
  133. 		beforeDestroy() {
  134. 			this.hideCamera(true);
  135. 		},
  136.  
  137. 		methods: {
  138. 			async loadModel() {
  139. 				console.log('model load start!');
  140. 				this.frameCanvas = document.createElement('canvas');
  141.  
  142. 				this.$toast.loading({
  143. 					duration: 0,
  144. 					message: "模型加载中",
  145. 					forbidClick: true,
  146. 				});
  147.  
  148. 				this.pageState = 0;
  149. 				this.modelLoading = true
  150. 				this.isUploading = false;
  151. 				this.isUploadSuccess = false;
  152.  
  153. 				/**SDK:模型加载 */
  154. 				this.face_detect_model = new FaceEngine({
  155. 			        detectionModelPath:'xxx/FaceDetectionModel.json',
  156. 					meshModelPath: 'xxx/FaceMeshModel_v1.0.0.json',
  157. 					wasmPath: 'xxx/zyd_bg_1.wasm',
  158. 					cache:'localstorage',
  159. 					backend:'webgl'
  160. 				});
  161.  
  162. 				await this.face_detect_model.init();
  163.  
  164. 				this.$toast.clear();
  165. 				this.modelLoading = false
  166. 				console.log('model load finished!');
  167. 			},
  168.  
  169. 			getImageData () {
  170. 				let frameData = null;
  171.         if (this.videoWidth&&this.videoHeight) {
  172. 					if(this.sliceFlag){
  173. 						/**
  174. 						 * 目的：PC采取中心裁剪方式，从一个大的video里面裁出来canvas大小的帧数据
  175. 						 * 例如：video 宽高：960*640   canvas铺满设备视窗宽高：375 667  
  176. 						 * */
  177. 						const videoWidthCenterX = Math.floor(this.videoWidth / 2);
  178. 						const videoWidthCenterY = Math.floor(this.videoHeight / 2);
  179. 						const startX = Math.floor(videoWidthCenterX - this.canvasObj.width / 2);
  180. 						const startY = Math.floor(videoWidthCenterY - this.canvasObj.height / 2);
  181. 						this.context.clearRect(0,0,this.canvas1Width, this.canvas1Height)
  182. 						this.context.translate(this.canvasObj.width,0);
  183. 						this.context.scale(-1,1) //由于video镜像问题，渲染到canvas后需要进行左右翻转，否则偏左偏右提示相反
  184. 						this.context.drawImage(this.videoObj, startX, startY, this.canvasObj.width, this.canvasObj.height, 0, 0, this.canvasObj.width, this.canvasObj.height);
  185. 						frameData = this.context.getImageData(0, 0, this.canvasObj.width, this.canvasObj.height);
  186. 						this.context.setTransform(1,0,0,1,0,0) 
  187. 					} else {
  188. 						const videoWidthCenterX = Math.floor(this.videoWidth / 2);
  189. 						const videoWidthCenterY = Math.floor(this.videoHeight / 2);
  190. 						const startX = 0;
  191. 						const startY = 0;
  192. 						this.context.clearRect(0,0,this.canvas1Width, this.canvas1Height)
  193. 						this.context.translate(this.canvasObj.width,0);
  194. 						this.context.scale(-1,1) //由于video镜像问题，渲染到canvas后需要进行左右翻转，否则偏左偏右提示相反
  195. 						this.context.drawImage(this.videoObj, startX, startY, this.canvasObj.width, this.canvasObj.height, 0, 0, this.canvasObj.width, this.canvasObj.height);
  196. 						frameData = this.context.getImageData(0, 0, this.canvasObj.width, this.canvasObj.height);
  197. 						this.context.setTransform(1,0,0,1,0,0) 
  198. 					}
  199. 				}
  200. 				this.detectStatus = true; //开始检测
  201. 				
  202. 				this.checkPhoto(frameData);
  203. 			},
  204. 			runnerFunction () {
  205. 				if (this.getImageDataing || this.showTip || (this.faceDetect) || new Date().getTime() - this.startTime < 600) {
  206. 					// console.log('不执行任何操作')
  207. 				} else {
  208. 					// console.log('开始执行获取像素')
  209. 					this.getImageDataing = true;
  210. 					this.getImageData();
  211. 					this.startTime = new Date().getTime();
  212. 				}
  213.  
  214. 				this.runnerTimeout = requestAnimationFrame(this.runnerFunction);
  215. 			},
  216. 			/**
  217. 			 * 检查视频图像帧
  218. 			 */
  219. 			checkPhoto(frame) {
  220. 				if(frame){
  221. 					this.facesModelDetector(frame)
  222. 				}else{
  223. 					this.continueDetect()
  224. 				}
  225. 			},
  226.  
  227. 			facesModelDetector(frame){
  228. 				if(!this.face_detect_model) {
  229. 					this.startFaceDetectOver()
  230. 					return 
  231. 				}
  232. 	
  233. 	      /**SDK:模型检测 */
  234. 		this.face_detect_model.handleImageFrame(frame, modelUtils.getDefaultCameraConstrains(), false).then(result => {
  235. 					const bbox = result.bbox;
  236. 					console.log("检测结果：：",result)
  237. 					if (bbox) {
  238. 						this.drawerCanvasCtx.clearRect(0, 0, this.drawerCanvasObj.width, this.drawerCanvasObj.height)
  239. 						this.drawPoints(this.drawerCanvasCtx, [bbox[0], bbox[1]], 25, "red")
  240.             this.drawPoints(this.drawerCanvasCtx, [bbox[2], bbox[3]], 25, "red")
  241. 						if ( commonUtils.checkMouthOpen(result.landmarks, 10)) {
  242. 							this.faceDetectorTips = "请不要张嘴"
  243. 						} else {
  244. 							if (this.checkImg(result.optionsMessage)) {
  245. 								//位置、清晰度、距离稳定
  246. 								console.log('检测通过，质量合格')
  247. 								this.faceDetect = true
  248. 								this.faceDetectorTips = ""
  249. 								Toast('采集成功')
  250.  
  251. 								// this.stopDetect();
  252. 								
  253. 								// 测试canvas图像是否和当前video显示一致
  254. 								let imgUrl = this.canvasObj.toDataURL('image/jpg')
  255. 								// let alink = document.createElement('a');
  256. 								// alink.download = 'face'+new Date().getTime()
  257. 								// alink.href = imgUrl
  258. 								// document.body.appendChild(alink)
  259. 								// alink.click()
  260. 								// document.body.removeChild(alink)
  261.  
  262. 								this.upload(this.dataURLtoBlob(imgUrl));
  263.  
  264. 								return;
  265. 							} else {
  266. 								this.continueDetect()
  267. 							}
  268. 						}
  269. 					    this.continueDetect()
  270. 					} else {
  271. 						this.startFaceDetectOver()
  272. 					}
  273. 					}).catch(err => {
  274. 						console.log('面部检测失败', err)
  275. 						this.startFaceDetectOver()
  276. 					});
  277. 			},
  278.  
  279. 			checkImg(result) {
  280. 				if (result && result.positionConstrains && result.brightnessConstrains) {
  281. 					let position = -1, distance = -1, bright = -1, clarify=-1, colorCast=-1, posture=-1,btip='', dtip = '', ptip='',postip='',postureDict;
  282. 					bright = result.brightnessConstrains.brightTipsVal //0合适 1过亮 2过暗 3不均匀
  283. 					distance =  result.positionConstrains.distanceTipsVal //表示偏远偏近。0合适 1太近 2太远
  284. 					position =  result.positionConstrains.positionTipsVal //表示上下左右偏移。0合适 1偏下 2偏上 3偏左 4偏右
  285. 					clarify = result.clarifyConstrains.clarifyTipsVal
  286. 					colorCast = result.colorConstrains.colorCastTipsVal
  287. 					posture = result.postureConstrains.postureTipsVal // 对应上方提示数值分别为：0(面部正视前方，姿态正确) 1(请摆正面部正视摄像头) 2(请不要向一侧歪头) 3(请不要仰视) 4(请不要俯视)
  288. 					
  289. 					if(!result.brightnessConstrains.isBrightMatch){
  290. 						// 亮度不合适
  291. 						btip =  result.brightnessConstrains.brightTips
  292. 					}
  293. 					if(!result.postureConstrains.isPostureMatch){
  294. 						// 姿态不合适
  295. 						postip = result.postureConstrains.postureTips
  296. 					}
  297. 					if(!result.positionConstrains.isDistanceMatch){
  298. 						dtip = result.positionConstrains.distanceTips
  299. 					}
  300. 					if(!result.positionConstrains.isPositionMatch){
  301. 						ptip = result.positionConstrains.positionTips
  302. 					}
  303. 					this.detectPosition = position
  304. 					this.detectDistance = distance
  305. 					this.detectPosture = posture
  306. 					this.detectBright = bright
  307. 					this.detectClarify = clarify
  308. 					this.detectColorCast = colorCast
  309. 					this.faceDetectorTips =  btip ? btip:(postip ? postip: (dtip ? dtip : ptip))
  310. 					this.postureDict = postureDict
  311. 					
  312. 					if(position === 0 && distance === 0 && clarify===0 && colorCast===0 && posture===0){
  313. 						return true //质量合格
  314. 					}
  315. 				}
  316. 				return false;
  317. 			},
  318.  
  319. 			drawPoints(ctxDrawer, item, radiu = 5, color = "white") {
  320. 				ctxDrawer.fillStyle = color
  321. 				ctxDrawer.beginPath();
  322. 				ctxDrawer.font = "16px sans-serif";
  323. 				ctxDrawer.arc(item[0], item[1], 3, 0, 360, false);
  324. 				ctxDrawer.fill()
  325. 				ctxDrawer.closePath()
  326. 			},
  327.  
  328. 			showCamera () {
  329. 				this.openCamera();
  330. 			},
  331.  
  332. 			openCamera () {
  333. 				this.$toast.loading({
  334. 					duration: 0,
  335. 					message: "摄像头调用中",
  336. 					forbidClick: true,
  337. 				});
  338. 				//非https证书报错 because navigator.mediaDevices is undefined
  339. 				if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
  340. 					this.getUserMedia({
  341. 						video: {
  342. 							width: {min: 1152, ideal: 1344, max: 1920},
  343. 							height: {min: 648, ideal: 756, max: 1080},
  344.             	facingMode: 'user',
  345. 						}
  346.           });
  347. 				} else {
  348. 					this.$toast.clear();
  349. 					setTimeout(() => {
  350. 						Toast('你的浏览器不支持访问用户媒体设备')
  351. 					})
  352. 					console.log("你的浏览器不支持访问用户媒体设备");
  353. 				}
  354. 			},
  355.  
  356. 			getUserMedia(constrains) {
  357. 				/* 获取摄像头对象方法兼容 */
  358. 				let that = this;
  359. 				if (navigator.mediaDevices.getUserMedia) {
  360. 					// 最新标准API、
  361. 					navigator.mediaDevices.getUserMedia(constrains).then(stream => {
  362. 						that.getUserMediaSuccess(stream);
  363. 					}).catch(err => {
  364. 						that.getUserMediaFail(err);
  365. 					});
  366. 				} else if (navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
  367. 					// webkit内核浏览器
  368. 					if (navigator.mediaDevices === undefined) {
  369. 						navigator.mediaDevices = {};
  370. 					}
  371.  
  372. 					// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
  373. 					// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
  374. 					if (navigator.mediaDevices.getUserMedia === undefined) {
  375. 						navigator.mediaDevices.getUserMedia = function(constraints) {
  376.  
  377. 							// 首先，如果有getUserMedia的话，就获得它
  378. 							var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  379.  
  380. 							// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
  381. 							if (!getUserMedia) {
  382. 								return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
  383. 							}
  384.  
  385. 							// 否则，为老的navigator.getUserMedia方法包裹一个Promise
  386. 							return new Promise(function(resolve, reject) {
  387. 								getUserMedia.call(navigator, constraints, resolve, reject);
  388. 							});
  389. 						}
  390. 					}
  391. 					navigator.mediaDevices.getUserMedia(constrains).then(stream => {
  392. 						that.getUserMediaSuccess(stream);
  393. 					}).catch(err => {
  394. 						that.getUserMediaFail(err);
  395. 					});
  396. 				} else if (navigator.getUserMedia) {
  397. 					// 旧版API
  398. 					navigator.getUserMedia(constrains).then(stream => {
  399. 						that.getUserMediaSuccess(stream);
  400. 					}).catch(err => {
  401. 						that.getUserMediaFail(err);
  402. 					});
  403. 				}
  404. 			},
  405.  
  406. 			/* 获取媒体对象成功 */
  407. 			getUserMediaSuccess (stream) {
  408. 				this.pageState = 1;
  409. 				let _stream = stream
  410. 				try {
  411. 					_stream = window.URL.createObjectURL(stream);
  412. 				} catch (err) {
  413. 					_stream = stream;
  414. 				}
  415.  
  416. 				this.$toast.clear();
  417. 				this.mediaStreamTrack = stream; // _stream;
  418. 				this.videoObj.srcObject = _stream; // 将捕获的视频流传递给video  放弃window.URL.createObjectURL(stream)的使用
  419. 				this.videoObj.play(); // 播放视频
  420.  
  421. 				// 监听视频流就位事件,即视频可以播放了
  422. 				this.videoObj.addEventListener('canplay', (ev) => {
  423. 				// this.videoObj.addEventListener('loadedmetadata', (ev) => {
  424. 					if (!this.streaming) {
  425. 						this.videoWidth = this.videoObj.videoWidth;
  426. 						this.videoHeight = this.videoObj.videoHeight;
  427. 						this.streaming = true;
  428.  
  429. 						if(this.videoObj.videoWidth > this.videoObj.videoHeight){
  430. 							this.sliceFlag = true
  431. 						}
  432.     
  433. 						if(this.sliceFlag){
  434. 							let imageWidth = window.innerWidth
  435. 							let imageHeight = window.innerHeight
  436. 							this.canvasObj.setAttribute('width', imageWidth);
  437. 							this.canvasObj.setAttribute('height', imageHeight);
  438. 							this.drawerCanvasObj.setAttribute('width', imageWidth);
  439. 							this.drawerCanvasObj.setAttribute('height', imageHeight);
  440.  
  441. 							this.face_detect_model.setImageSize([imageWidth,imageHeight]) //人脸视窗大小
  442. 						}else{
  443. 							this.canvasObj.setAttribute('width', this.videoWidth);
  444. 							this.canvasObj.setAttribute('height', this.videoHeight);
  445. 							this.drawerCanvasObj.setAttribute('width', this.videoWidth);
  446. 							this.drawerCanvasObj.setAttribute('height', this.videoHeight);
  447.  
  448. 							this.face_detect_model.setImageSize([this.videoWidth,this.videoHeight]) //人脸视窗大小
  449. 						}
  450.  
  451. 						// 开启检测
  452. 						this.startDetect()
  453. 					}
  454. 				}, false);
  455. 		
  456. 			},
  457.  
  458. 			getUserMediaFail (err) {
  459. 				/* 获取媒体对象失败 */
  460. 				this.$toast.clear();
  461. 				this.hideCamera(false);
  462. 				setTimeout(() => {
  463. 					Toast('请检查摄像头是否正常开启')
  464. 				})
  465. 			},
  466.  
  467. 			hideCamera (isCloseCamera) {
  468. 				this.stopDetect();
  469. 				if(this.mediaStreamTrack) {
  470.       		this.mediaStreamTrack.getTracks()[0].stop(); // 关闭媒体对象
  471. 				}
  472. 			},
  473.  
  474. 			/* 启动检测 */
  475. 			async startDetect () {
  476. 				console.log('开始检测')
  477. 				this.startTime = new Date().getTime();
  478. 				this.runnerTimeout = requestAnimationFrame(this.runnerFunction)
  479. 			},
  480.  
  481. 			/* 停止检测 */
  482. 			stopDetect () {
  483. 				console.log('停止检测')
  484. 				this.detectStatus = false
  485. 				cancelAnimationFrame(this.runnerTimeout);
  486. 			},
  487.  
  488. 			startFaceDetectOver(){
  489. 				this.getImageDataing = false
  490. 				this.faceDetect = false
  491. 				this.detectBright = -1
  492. 				this.detectPosition = -1
  493. 				this.detectDistance = -1
  494. 				this.detectPosture = -1
  495. 				this.faceDetectorTips = '请保持人脸在采集框中'
  496. 			},
  497.  
  498. 			continueDetect() {
  499. 				this.getImageDataing = false
  500. 			},
  501.  
  502. 			toggleDetect(){
  503.         if(this.detectStatus){
  504. 				   this.stopDetect()
  505. 				}else{
  506.           this.startDetect()
  507. 				}
  508. 			},
  509.  
  510. 			upload(imageData) {
  511. 				if (!this.isUploading) {
  512. 					console.log("调用上传接口");
  513. 					this.isUploading = true;
  514. 					uploadImage(imageData, this.onUploadSuccess, this.onUploadFailed);
  515. 					setTimeout(() => {
  516. 						this.pageState = 2;
  517. 						this.hideCamera(true);
  518. 					}, 3000);
  519. 				}
  520. 			},
  521.  
  522. 			onUploadSuccess(response) {
  523. 				console.log('response = ');
  524. 				console.log(response);
  525. 				this.isUploading = false;
  526. 				if (response.data && response.data.code == 200) {
  527. 					this.isUploadSuccess = true;
  528.  
  529. 					console.log('上传成功')
  530. 				} else {
  531. 					console.log('上传失败')
  532. 				}
  533. 			},
  534.  
  535. 			onUploadFailed(error) {
  536. 				console.log('uploading image failed, error= ', error);
  537. 				console.log('网络错误')
  538. 			},
  539.  
  540. 			dataURLtoBlob(dataurl) {
  541. 				let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
  542. 						bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  543. 				while (n--) {
  544. 						u8arr[n] = bstr.charCodeAt(n);
  545. 				}
  546. 				return new Blob([u8arr], {type: mime});
  547. 			},
  548. 		}
  549. 	}
  550. </script>
  551.  
  552.  
  553. <style lang="less" scoped>
  554. 	#imgCanvas{
  555. 		position: fixed;
  556. 		z-index: -99;
  557. 		display: block;
  558. 		left: 300%;
  559. 	}
  560.  
  561. 	
  562.  
  563. 	* {
  564. 		margin: 0;
  565. 		padding: 0;
  566. 		font-family: 'FZYANS_JW';
  567. 	}
  568.  
  569. 	.main_container {
  570. 		position: fixed;
  571. 		top: 0;
  572. 		left: 0;
  573. 		right: 0;
  574. 		bottom: 0;
  575. 		z-index: 0;
  576.  
  577.  
  578. 		.ai-diagnosis-wrapper {
  579. 			position: absolute;
  580. 			overflow: hidden;
  581. 			width: 100%;
  582. 			height: 100%;
  583. 			background-color: #787a7a;
  584. 			display: flex;
  585. 			flex-direction: column;
  586. 			text-align: center;
  587. 			align-items: center;
  588. 			.zb-bg {
  589. 				display: block;
  590. 				width: 100%;
  591. 			}
  592. 		}
  593.  
  594. 		.video-box {
  595. 			position: absolute;
  596. 			overflow: hidden;
  597. 			width: 100%;
  598. 			height: 100%;
  599.  
  600. 			.video {
  601. 				position: absolute;
  602. 				display: block;
  603. 				width: 100%;
  604. 				height: 100%;
  605. 				background: black;
  606. 				transform: rotateY(180deg);
  607. 				-webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
  608. 				-moz-transform: rotateY(180deg);
  609. 				object-fit: cover;
  610. 				z-index: 99;
  611. 			}
  612.  
  613. 			.canvas_render {
  614. 				/*visibility: hidden;*/
  615. 				position: absolute;
  616. 				top: 0px;
  617. 				left: 0px;
  618. 				width: 100%;
  619. 				height: 100%;
  620. 				background: transparent;
  621. 				transform: rotateY(180deg);
  622. 				-webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
  623. 				-moz-transform: rotateY(180deg);
  624. 				object-fit: cover;
  625. 				z-index: 110;
  626. 			}
  627.  
  628. 			.video-mask {
  629. 				position: absolute;
  630. 				top: 1.47rem;
  631. 				left: 50%;
  632. 				width: 2.74rem;
  633. 				z-index: 99;
  634. 				transform: translateX(-50%);
  635.  
  636. 				.circle-img {
  637. 					width: 100%;
  638. 					box-shadow: 0 0 100vh 100vh rgba(0, 0, 0, 0.50);
  639. 					border-radius: 100%;
  640. 				}
  641. 			}
  642.  
  643. 			.mantle-box {
  644. 				z-index: 101;
  645. 				position: absolute;
  646. 				top: 0px;
  647. 				left: 0px;
  648. 				width: 100%;
  649. 				height: 100%;
  650.  
  651. 				.message-tips {
  652. 					position: absolute;
  653. 					display: flex;
  654. 					align-items: center;
  655. 					justify-content: center;
  656. 					top: 1.25rem;
  657. 					width: 100%;
  658. 					object-fit: cover;
  659.  
  660. 					.message-tips-img {
  661. 						position: absolute;
  662. 						width: 70%;
  663. 						z-index: 103;
  664. 					}
  665.  
  666. 					.message-tips-p {
  667. 						position: absolute;
  668. 						flex: auto;
  669. 						font-family: PingFang SC;
  670. 						color: white;
  671. 						font-weight: bold;
  672. 						font-size: 0.2rem;
  673. 						z-index: 104;
  674. 					}
  675. 				}
  676.  
  677. 				.photo-env {
  678. 					position: absolute;
  679. 					display: flex;
  680. 					align-items: center;
  681. 					justify-content: space-between;
  682. 					bottom: 0.5rem;
  683. 					width: 100%;
  684. 					padding: 0 0.3rem;
  685. 					box-sizing: border-box;
  686.  
  687. 					li {
  688. 						width: 0.84rem;
  689. 						height: 0.765rem;
  690. 						background: rgba(0, 0, 0, 0.1);
  691. 						border-radius: 0.12rem;
  692. 						display: flex;
  693. 						align-items: center;
  694. 						flex-direction: column;
  695. 						text-align: center;
  696. 						
  697. 						.icon {
  698. 							flex-shrink: 1;
  699. 							width: 0.29rem;
  700. 						}
  701.  
  702. 						.r-box {
  703. 							.p-1 {
  704. 								color: #C9C9C9;
  705. 								font-size: 0.13rem;
  706. 							}
  707.  
  708. 							.p-2 {
  709. 								font-weight: 600;
  710. 								color: #ffffff;
  711. 								font-size: 0.15rem;
  712. 							}
  713. 						}
  714. 					}
  715. 				}
  716.  
  717. 				.txt {
  718. 					margin-top: 0.25rem;
  719. 					text-align: center;
  720. 					font-weight: 600;
  721. 					color: white;
  722. 					font-size: 0.16rem;
  723. 				}
  724.  
  725. 				.tip {
  726. 					width: 100%;
  727. 					box-sizing: border-box;
  728. 					z-index: 101;
  729. 					position: absolute;
  730. 					bottom: 0.07rem;
  731. 					left: 0;
  732. 					color: white;
  733. 					font-size: 0.12rem;
  734. 					text-align: center;
  735. 				}
  736. 			}
  737.  
  738. 		}
  739.  
  740. 	}
  741. 	
  742. 	.adw-btn {
  743. 		width: 2.68rem;
  744. 		height: 0.502rem;
  745. 		background-image: url("../assets/home/btn-bg.png");
  746. 		background-size: 100%;
  747. 		text-align: center;
  748. 		line-height: 0.502rem;
  749. 		position: fixed;
  750. 		bottom: 0.42rem;
  751. 		left: 50%;
  752. 		transform: translateX(-50%);
  753. 		font-size: 0.22rem;
  754. 		color: #FFFFFF;
  755. 		font-weight: bold;
  756. 		&.gray {
  757. 			opacity: 0.4;
  758. 		}
  759. 	}
  760.  
  761.  
  762. </style>

 

 

 

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

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

  

闽ICP备14008679号