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>