{"id":538,"date":"2019-10-09T11:06:29","date_gmt":"2019-10-09T03:06:29","guid":{"rendered":"http:\/\/weitaoc.com\/?p=538"},"modified":"2019-10-09T14:58:34","modified_gmt":"2019-10-09T06:58:34","slug":"h5%e4%ba%ba%e8%84%b8%e8%af%86%e5%88%ab","status":"publish","type":"post","link":"http:\/\/weitaoc.com\/?p=538","title":{"rendered":"h5\u4eba\u8138\u8bc6\u522b"},"content":{"rendered":"\n

\u6700\u8fd1\u5e2e\u522b\u4eba\u505a\u4e00\u4e2aapp\u5d4c\u5165\u4eba\u8138\u8bc6\u522b\u7684\u529f\u80fd\uff0c\u4e3b\u8981\u662f\u7528\u4e00\u4e2a\u5f00\u6e90\u7684js\u5e93\uff0c\u8fd9\u91cc\u7eaa\u5f55\u4e00\u4e0b\uff0c\u4ee5\u53ca\u78b0\u5230\u7684\u5751\u3002<\/p><\/blockquote>\n\n\n\n

js\u5e93\u4f7f\u7528\u7684\u6b6a\u679c\u4ec1\u5f00\u53d1\u4e00\u5957\u4e1c\u897f\uff0c\u53ebtracking<\/a><\/strong>\uff0c\u6253\u5f00\u6444\u50cf\u5934\uff0c\u6839\u636e\u753b\u9762\u6355\u6349\u8138\u90e8(\u5fc5\u987b\u662f\u8138\u90e8)\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u6355\u83b7\u5230\u8138\u90e8\u540e\uff0c\u4f1a\u628a\u56fe\u7247\u8fdb\u884c\u622a\u56fe\uff0c\u8f6c\u6210base64\u7684\u56fe\u7247\uff0c\u4e0a\u4f20\u7ed9\u670d\u52a1\u7aef\uff0c\u670d\u52a1\u7aef\u8fdb\u884c\u4e0b\u4e00\u6b65\u7684\u4eba\u8138\u8bc6\u522b\u9a8c\u8bc1\u3002<\/p>\n\n\n\n

\u672c\u5730\u6d4b\u8bd5\u65e0\u788d\uff0c\u4f46\u662f\u4e0a\u4f20\u5230\u670d\u52a1\u5668\u4e4b\u540e\u53d1\u73b0MediaDevices.getUserMedia` undefined\u3002\u7f51\u4e0a\u67e5\u4e86\u4e00\u4e0b\u8d44\u6599\uff0c\u672c\u5730\u8c03\u7528\u6ca1\u95ee\u9898\uff0c\u5982\u679c\u4e0a\u4f20\u5230\u670d\u52a1\u5668\uff0c\u5730\u5740\u5fc5\u987b\u662fhttps\uff0c\u5426\u5219\u90fd\u662f undefined \u3002<\/p>\n\n\n\n

getUserMedia\u652f\u6301\u6d4f\u89c8\u5668<\/a><\/p>\n\n\n\n\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<\/div><\/td>
<!DOCTYPE html><\/span>
\n<html<\/span>><\/span>
\n
\n<head<\/span>><\/span>
\n  <meta<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n  <meta<\/span> name<\/span>=<\/span>"viewport"<\/span><\/span>
\n    content<\/span>=<\/span>"width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"<\/span> \/<\/span>><\/span>
\n  <title<\/span>><\/span>\u4eba\u8138\u8bc6\u522b<\/<\/span>title<\/span>><\/span>
\n  <link<\/span> href<\/span>=<\/span>"vendor\/fontawesome-free\/css\/all.min.css"<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> type<\/span>=<\/span>"text\/css"<\/span>><\/span>
\n  <!-- <link rel="stylesheet" href="css\/layer.css"> --><\/span>
\n  <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"css\/demo.css"<\/span>><\/span>
\n  <link<\/span> href<\/span>=<\/span>"css\/sb-admin-2.min.css"<\/span> rel<\/span>=<\/span>"stylesheet"<\/span>><\/span>
\n  <script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> src<\/span>=<\/span>"js\/face\/jquery-1.9.1.js"<\/span>><\/<\/span>script<\/span>><\/span>
\n  <script<\/span> src<\/span>=<\/span>"vendor\/bootstrap\/js\/bootstrap.bundle.min.js"<\/span>><\/<\/span>script<\/span>><\/span>
\n  <script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> src<\/span>=<\/span>"js\/face\/layer.js"<\/span>><\/<\/span>script<\/span>><\/span>
\n  <script<\/span> src<\/span>=<\/span>"js\/face\/tracking.js"<\/span>><\/<\/span>script<\/span>><\/span>
\n  <script<\/span> src<\/span>=<\/span>"js\/face\/face-min.js"<\/span>><\/<\/span>script<\/span>><\/span>
\n  <!-- <script src="js\/face\/dat.gui.min.js"><\/script> --><\/span>
\n  <!-- <script src="js\/face\/stats.min.js"><\/script> --><\/span>
\n<\/<\/span>head<\/span>><\/span>
\n
\n<body<\/span>><\/span>
\n  <div<\/span> class<\/span>=<\/span>"container"<\/span>><\/span>
\n
\n    <div<\/span> class<\/span>=<\/span>"row justify-content-center"<\/span>><\/span>
\n      <div<\/span> class<\/span>=<\/span>"col-xl-10 col-lg-12 col-md-9"<\/span>><\/span>
\n        <!-- <div class="card"> --><\/span>
\n        <div<\/span> class<\/span>=<\/span>"row"<\/span>><\/span>
\n
\n          <div<\/span> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>
\n            <a<\/span> href<\/span>=<\/span>"javascript:returnLogin()"<\/span> class<\/span>=<\/span>"btn btn-primary btn-user btn-block return"<\/span>><\/span>
\n              Return
\n            <\/<\/span>a<\/span>><\/span>
\n          <\/<\/span>div<\/span>><\/span>
\n          <!-- <div class="col-lg-4"><\/div> --><\/span>
\n          <div<\/span> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>
\n            <video id<\/span>=<\/span>"video"<\/span> preload autoplay loop muted style<\/span>=<\/span>"width:100%;object-fit:fill"<\/span>><\/<\/span>video><\/span>
\n            <canvas id<\/span>=<\/span>"canvas"<\/span> width<\/span>=<\/span>"100%"<\/span> height<\/span>=<\/span>"100%"<\/span>><\/<\/span>canvas><\/span>
\n            <!-- <input type="button" value="\u5f00\u59cb" id="start" onclick="Shoot()"\/> --><\/span>
\n          <\/<\/span>div<\/span>><\/span>
\n          <!-- <div class="col-lg-4"><\/div> --><\/span>
\n        <\/<\/span>div<\/span>><\/span>
\n        <div<\/span> id<\/span>=<\/span>"face2"<\/span> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>
\n          <canvas id<\/span>=<\/span>"canvas1"<\/span>><\/<\/span>canvas><\/span>
\n        <\/<\/span>div<\/span>><\/span>
\n      <\/<\/span>div<\/span>><\/span>
\n      <!-- <\/div> --><\/span>
\n    <\/<\/span>div<\/span>><\/span>
\n  <\/<\/span>div<\/span>><\/span>
\n  <script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> th:inline=<\/span>"javascript"<\/span>><\/span>
\n    $('#fps').hide();
\n    \/\/ \/*<![CDATA[*\/<\/span>
\n    \/\/  var ctx = \/*[[${#httpServletRequest.getScheme() + ":\/\/" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*\/     <\/span>
\n    \/\/  window.onload = function() {<\/span>
\n    var video = document.getElementById('video');<\/span>
\n    var canvas = document.getElementById('canvas');<\/span>
\n    var canvas1 = document.getElementById('canvas1');<\/span>
\n    var context = canvas.getContext('2d');<\/span>
\n    var tracker = new tracking.ObjectTracker('face');<\/span>
\n    tracker.setInitialScale(4);<\/span>
\n    tracker.setStepSize(2);<\/span>
\n    tracker.setEdgesDensity(0.1);<\/span>
\n    tracking.track('#video', tracker, {<\/span>
\n      camera: true<\/span>
\n    });<\/span>
\n    tracker.on('track', function (event) {<\/span>
\n      if (event.data.length === 0) {<\/span>
\n        console.info('\u65e0\u4eba\u8138');<\/span>
\n        context.clearRect(0, 0, canvas.width, canvas.height);<\/span>
\n      } else {<\/span>
\n        event.data.forEach(function (rect) {<\/span>
\n          context.strokeStyle = '#a64ceb';<\/span>
\n          context.strokeRect(rect.x, rect.y, rect.width, rect.height);<\/span>
\n          context.font = '11px Helvetica';<\/span>
\n          context.fillStyle = "#fff";<\/span>
\n          \/\/   context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);<\/span>
\n          \/\/   context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);<\/span>
\n          Shoot();<\/span>
\n        });<\/span>
\n      }<\/span>
\n    });<\/span>
\n    \/\/   var gui = new dat.GUI();<\/span>
\n    \/\/   gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);<\/span>
\n    \/\/   gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);<\/span>
\n    \/\/   gui.add(tracker, 'stepSize', 1, 5).step(0.1);<\/span>
\n
\n
\n    \/\/ };<\/span>
\n    var isCheck = false;<\/span>
\n
\n    function Shoot() {<\/span>
\n      if (isCheck) {<\/span>
\n        console.log("\u6b63\u5728\u8fdb\u884c\u4eba\u8138\u8bc6\u522b");<\/span>
\n        return;<\/span>
\n      }<\/span>
\n      console.log("\u4eba\u8138\u8bc6\u522b\u4e2d...");<\/span>
\n      isCheck = true;<\/span>
\n      layer.msg('login...');<\/span>
\n      var trackerTask = tracking.track(video, tracker);<\/span>
\n      var context = canvas1.getContext('2d');<\/span>
\n      \/\/\u628a\u5f53\u524d\u89c6\u9891\u5e27\u5185\u5bb9\u6e32\u67d3\u5230\u753b\u5e03\u4e0a<\/span>
\n      context.drawImage(video, 0, 5, 320, 140);<\/span>
\n      var dom = document.createElement("a");<\/span>
\n      dom.href = this.canvas.toDataURL("image\/png");<\/span>
\n      \/\/ dom.download = new Date().getTime() + ".png";<\/span>
\n      dom.click();<\/span>
\n      \/\/\u5220\u9664\u5b57\u7b26\u4e32\u524d\u7684\u63d0\u793a\u4fe1\u606f "data:image\/png;base64,"<\/span>
\n      var data = canvas1.toDataURL();<\/span>
\n      var b64 = data.substring(22);<\/span>
\n      var path = "\/facemanager\/search";<\/span>
\n      $.ajax({<\/span>
\n        type: 'post',<\/span>
\n        dataType: 'json',<\/span>
\n        url: path,<\/span>
\n        data: {<\/span>
\n          imgdata: b64<\/span>
\n        },<\/span>
\n        success: function (result) {<\/span>
\n          if (result.error_code == '0') {<\/span>
\n            trackerTask.stop();<\/span>
\n            layer.open({<\/span>
\n              title: '\u6e29\u99a8\u63d0\u793a',<\/span>
\n              content: '\u6b22\u8fce ' + result.user_info,<\/span>
\n              yes: function (index, layero) {<\/span>
\n                trackerTask.run();<\/span>
\n                layer.close(index); \/\/\u5982\u679c\u8bbe\u5b9a\u4e86yes\u56de\u8c03\uff0c\u9700\u8fdb\u884c\u624b\u5de5\u5173\u95ed<\/span>
\n              }<\/span>
\n            });<\/span>
\n          } else {<\/span>
\n            trackerTask.stop();<\/span>
\n            layer.open({<\/span>
\n              title: '\u6e29\u99a8\u63d0\u793a',<\/span>
\n              content: result.error_msg,<\/span>
\n              yes: function (index, layero) {<\/span>
\n                trackerTask.run();<\/span>
\n                layer.close(index); \/\/\u5982\u679c\u8bbe\u5b9a\u4e86yes\u56de\u8c03\uff0c\u9700\u8fdb\u884c\u624b\u5de5\u5173\u95ed<\/span>
\n              }<\/span>
\n            });<\/span>
\n          }<\/span>
\n
\n          isCheck = false;<\/span>
\n        },<\/span>
\n        error:function(){<\/span>
\n
\n            isCheck = false;<\/span>
\n
\n        }<\/span>
\n      })<\/span>
\n    };<\/span>
\n    <\/span>
\n    function returnLogin(){<\/span>
\n        window.location.href="login.html";<\/span>
\n    }<\/span>
\n  <\/script><\/span>
\n<\/body><\/span>
\n
\n<\/html><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n

\u8f6c\u8f7d\u8bf7\u6ce8\u660e\uff1a\u8ff7\u8def\u7684\u8001\u9f20<\/a> » h5\u4eba\u8138\u8bc6\u522b<\/a><\/p>","protected":false},"excerpt":{"rendered":"

\u6700\u8fd1\u5e2e\u522b\u4eba\u505a\u4e00\u4e2aapp\u5d4c\u5165\u4eba\u8138\u8bc6\u522b\u7684\u529f\u80fd\uff0c\u4e3b\u8981\u662f\u7528\u4e00\u4e2a\u5f00\u6e90\u7684js\u5e93\uff0c\u8fd9\u91cc\u7eaa\u5f55\u4e00\u4e0b\uff0c\u4ee5\u53ca\u78b0\u5230\u7684\u5751\u3002<\/p>\n","protected":false},"author":1,"featured_media":540,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[61],"class_list":["post-538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-61"],"views":15140,"_links":{"self":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=538"}],"version-history":[{"count":6,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/538\/revisions"}],"predecessor-version":[{"id":561,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/538\/revisions\/561"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/media\/540"}],"wp:attachment":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=538"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}