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";

                        setTimeout(function() {
                            context.drawImage(video, 0, 0, 320, 240);
                            var img = canvas.toDataURL("image/jpeg", 0.5);
                            console.log(img);
                            // $.ajax({
                            //     type: "POST",
                            //     url: '',
                            //     data: {
                            //         img: img.substr(img.indexOf(',') + 1)
                            //     }, 
                            //     cache: false,
                            //     success: function(data) {
                            //         console.log("上传成功");
                            //         $("#articleImg").attr('src', JSON.parse(data).imageUrl);
                            //     },
                            //     error: function(XMLHttpRequest, textStatus, errorThrown) {
                            //         console.log("上传失败，请检查网络后重试");
                            //     }
                            // });
                        }, 5000);
                    });
                });

                var gui = new dat.GUI();
                gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
                gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
                gui.add(tracker, 'stepSize', 1, 5).step(0.1);
            };
        </script>

    </body>
</html>

猜你喜欢