物联网浏览器(IoTBrowser)-人脸快速搜索

起因

最近遇到一个人脸搜索的需求，驿站的快递被人误领，拿走几天还没有送回来，所以想从出库仪中找历史出库记录的想法。

实现思路：

1.从雷现出库仪上拷贝文件下来。(拷贝几十万张人脸数据花了不少时间)

2.开发人脸搜索工具

3.搜索比对（如果能找到历史数据，就能找到人）

这里主要是开发人脸搜索工具，需要实现识别图片里面是否包含人脸、人脸匹配检测等功能，网速找了一款工具，但是需要改造3点：

1.支持并发搜索，充分利用多核CPU，从几十万张图片中快速检索到想要找的人。

2.支持参数配置，支持指定图片和查找目录、搜索第一张还是全部、找到后是否打开等参数。

3.开发UI配置界面，由于工具是控制台应用，使用起来不方便，所以需要一个UI界面。

使用IoTBrowser做为UI前端，使用少量的代码既可实现。

 

核心代码：

    <div id="vue_root" class="fun_bd" style="padding:10px;">
        <form class="am-form">
            <fieldset>
                <div class="am-form-group">
                    <label for="doc-ipt-email-1" class="am-u-sm-1">原始文件</label>
                    <div class="am-u-sm-3">
                        <input  type="text" v-model="config.ImagePath" style="width: 75%;display: inline;" />
                        <input type="button" @click="selectFile()" value="选择" />
                    </div>
                    <label for="doc-ipt-email-1" class="am-u-sm-1">查找目录</label>
                    <div class="am-u-sm-3">
                        <input type="text" v-model="config.FindDir" style="width: 75%;display: inline;" />
                        <input type="button" value="选择" @click="selectSaveDir()" />
                    </div>
                    <label for="doc-ipt-email-1" class="am-u-sm-1">历史文件</label>
                    <div class="am-u-sm-3">
                        <input type="text" v-model="config.HistoryFileName" style="width: 75%;display: inline;" />
                    </div>
                </div>
                <div class="am-form-group">
                    <div class="am-u-sm-3">
                        <input id="ClearHistory" type="checkbox" v-model="config.ClearHistory" />
                        <label for="ClearHistory" class="">清理历史数据</label>
                    </div>
                    <div class="am-u-sm-3">
                        <input id="FindFirstStop" type="checkbox" v-model="config.FindFirstStop" />
                        <label for="FindFirstStop" class="">找到第一张停止</label>
                    </div>
                    <div class="am-u-sm-3">
                        <input id="FindOpen" type="checkbox" v-model="config.FindOpen" />
                        <label for="FindOpen" class="">找到后立即打开</label>
                    </div>
                    <div class="am-u-sm-3">

                        <!--<button onclick="startFace()" class="am-btn-primary" type="button">打开连接</button>-->
                        <button @click="find()" v-if="!isFind" class="am-btn-primary" type="button">开始查询</button>
                        <button @click="stop()" v-if="isFind" class="am-btn-primary" type="button">停止服务</button>
                    </div>
                </div>
                <div class="am-form-group">
                    <textarea id="txtInfo" rows="40">{{msg}}</textarea>
                </div>

            </fieldset>
            
        </form>
    </div>
    <script>

        var hostid;// 主机id

        function startFace() {
            dds.iot.com.open({
                type: 'FaceCom',//人脸识别插件
                port: 1,
                baudRate: 1,
                onReceive: function (res) {
                    if ($vue.isFind) {

                        if (res.data.indexOf('已找到：') == 0) {
                            alert(res.data)
                        }
                        addMsg(res.data)
                    }
                    //console.log('host', res.data)
                },
                onOpen: function (ar) {
                    if (ar.Success) {
                        hostid = ar.Data;
                        addMsg('连接成功！')
                    } else {
                        alert(ar.Message)
                    }
                }
            })
        }

        var $msg;
        function addMsg(msg) {
            var m = $vue.msg + "\n" + msg;
            if ($vue.msg.length > 10000) {
                $vue.msg = (msg);
            } else {
                $vue.msg = (m);
            }
        }
        // 窗口初始化事件（操作窗口大小、标题）
        $(document).bind('dds.window.init', function (e, win) {
            $msg = $('#txtInfo')
            startFace();
            initVue();
        })
        var $vue;
        function initVue() {

            $vue = new Vue({
                el: '#vue_root',
                data: {
                    advanceSetting: false,
                    msg: "",
                    isFind:false,
                    config: {
                        ImagePath: "",
                        FindDir: "D:\\image",
                        HistoryFileName: "",
                        ClearHistory: true,
                        FindOpen: true,
                        FindFirstStop: true,
                    },
                },
                mounted() {
                    if (localStorage._faceConfig) {
                        this.config=JSON.parse(localStorage._faceConfig);
                    }
                },
                methods: {
                    selectFile() {
                        this.config.ImagePath = _host.selectFile();
                    },
                    find() {
                        var config = this.config
                        if (!config.ImagePath) {
                            alert('请选择原始文件')
                            return;
                        }
                        this.msg = ''
                        if (!config.FindDir) {
                            alert('请选择查找目录')
                            return;
                        }
                        this.isFind = true;
                        dds.iot.com.exeCommand({ id: hostid, name: "Find", data: { timeout1: 30000, config } }, function (ar) {
                            if (ar.Success) {
                            } else {
                                addMsg('操作失败：' + ar.Message)
                            }
                        })
                        localStorage._faceConfig = JSON.stringify(config);
                    },
                    stop() {
                        this.isFind = false;
                        dds.iot.com.exeCommand({ id: hostid, name: "Stop", data: { } }, function (ar) {
                            if (ar.Success) {
                            } else {
                                addMsg('操作失败：' + ar.Message)
                            }
                        })
                    },
                     clearLog() {
                        this.msg=''
                    },selectSaveDir() {
                         var dir = dds.file.openFolderDialog();
                         this.config.FindDir=(dir)
                    }
                }
            })
        }
    </script>

　　

系统支持：

1.人脸数量检测、人脸匹配、人脸定位

2.多文件夹快速搜索，搜索一张还是全部

3.多线程并发搜索，快速查找人脸数据

 

使用简单的HTMl+WebAPI就可以实现人脸识别，将控制台的输出内容通过WebSocket实时推送到前端界面。