zoukankan      html  css  js  c++  java
  • web人脸识别(一)

    1.人脸识别用的是Tracking.js

    2.用HBuilder打包的话可以完美跨平台,IOS、Android都可以用

    思路:

      前端用Tracking.js检测人脸时时抓拍或者间隔时间抓拍,把抓拍到的图像上传到服务器端再用虹软SDK做活体和人脸再次验证。代码如下,明天继续写服务端的代码。

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <meta name="HandheldFriendly" content="true" />
            <meta name="MobileOptimized" content="320" />
            <title>人脸识别</title>
            <link rel="stylesheet" href="../css/demo.css">
            <script src="../js/face/tracking-min.js"></script>
            <script src="../js/face/face-min.js"></script>
            <script src="../js/face/jquery.min.js"></script>
            <style>
                video,
                canvas {
                    margin-left: 230px;
                    margin-top: 120px;
                    position: absolute;
                }
            </style>
        </head>
        <body>
            <div class="demo-frame">
                <div class="demo-container">
                    <video id="video" width="320" height="240" preload autoplay loop muted></video>
                    <canvas id="canvas" width="320" height="240"></canvas>
                </div>
            </div>
    
            <script>
                <!-- 人脸识别开始 -->
                window.onload = function() {
                    var video = document.getElementById('video');
                    var canvas = document.getElementById('canvas');
                    var context = canvas.getContext('2d');
    
                    var tracker = new tracking.ObjectTracker('face');
                    tracker.setInitialScale(4);
                    tracker.setStepSize(2);
                    tracker.setEdgesDensity(0.1);
    
                    this.trackerTask = tracking.track('#video', tracker, {
                        camera: true
                    });
    
                    tracker.on('track', function(event) {
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        event.data.forEach(function(rect) {
                            context.strokeStyle = '#0000ff';
                            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                            context.font = '11px Helvetica';
                            // context.fillText("已识别到人脸", 100, 40);
                            context.fillStyle = "#f00";
                            //把获取的图片上传至服务器用虹软SDK继续活体检测和人脸识别
                            setTimeout(function() {// setTimeout方法用来进行间隔时间抓拍
                                context.drawImage(video, 0, 0, 320, 240);
                                var img = canvas.toDataURL("image/jpeg", 0.5);
                                // console.log(img);
                                var dataJson = "{'base64Str' : '" + img.substr(img.indexOf(',') + 1) + "'}";
                                console.log("dataJson:" + dataJson);
                                $.ajax({
                                    url: 'http://192.168.11.60:81/ArcSoftFace.asmx/GetImgs',
                                    type: 'post',
                                    dataType: 'json',
                                    contentType: 'application/json;charset=utf-8',
                                    data: dataJson,
                                    success: function(data) {
                                        var msg = JSON.stringify(data);
                                        console.log("data:" + msg);
                                        alert(msg);
                                    },
                                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                                        console.log("status:" + XMLHttpRequest.status);
                                        console.log("readyState:" + XMLHttpRequest.readyState);
                                        console.log("textStatus:" + textStatus);
                                    }
                                });
                            }, 5000);
                        });
                    });
                };
                <!-- 人脸识别结束 -->
            </script>
    
        </body>
    </html>
  • 相关阅读:
    一般图最大匹配-带花树算法学习笔记
    网络流建图/模型总结
    博弈论学习笔记
    2019牛客暑期多校训练营(第二场)题解
    AtCoder Beginner Contest 131 F
    AtCoder Beginner Contest 130 F Minimum Bounding Box 三分法求极值(WA)
    最长上升子序列(LIS)长度及其数量
    Codeforces 1195E. OpenStreetMap (单调队列)
    Educational Codeforces Round 65 E,F
    最小生成树
  • 原文地址:https://www.cnblogs.com/AlbertSmith/p/12421275.html
Copyright © 2011-2022 走看看