樣式htmlhtml
<!--刷臉--> <div hr-draggable modal="faceTradeModal" options="faceTradeOpts" id="faceTradeModal"> <div class="modal-header"> <h5>刷臉認證</h5> </div> <div class="modal-body form-horizontal margin5" style="text-align: center;"> <video id="myVideo" width="500px" height="500px" ></video> <canvas id="myCanvas" width="200px" height="150px" ng-show="false"></canvas> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="updateFace()" ng-show = "autoFace == 0">認證</button> </div> </div>
javaScriptjava
var mediaStreamTrack; //打開人臉認證modal $scope.openFaceTradeModel = function (){ //獲取照片 $http.get(Path.getUri("api/patient/patient-id/" + $scope.activePatientInfo.patientId + "/photo"), {responseType: "arraybuffer"}) .success(function (data) { $scope.faceTradeModal = true; $scope.currentFaceDate = _arrayBufferToBase64(data); setTimeout(function () { //打開攝像頭 $scope.openFace(); },500); }) .error(function () { }); }; //截取頭像 $scope.getFace = function(){ var canvas = $('#myCanvas')[0], context = canvas.getContext('2d'), video = $('#myVideo')[0]; context.drawImage(video, 0, 0, 200, 150); } //關閉modal框清理計時器 $scope.closeFaceTradeModal = function(){ $scope.faceTradeModal = false; if($scope.funHandle){ clearInterval($scope.funHandle); } mediaStreamTrack && mediaStreamTrack.stop(); } //打開攝像頭 $scope.openFace = function() { // 獲取媒體方法(舊方法) navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia; var canvas = $('#myCanvas')[0], context = canvas.getContext('2d'), video = $('#myVideo')[0]; // 獲取媒體方法(新方法) // 使用新方法打開攝像頭 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function (stream) { console.log(stream); mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1]; video.src = (window.URL || window.webkitURL).createObjectURL(stream); video.play(); }).catch(function (err) { console.log(err); }) } // 使用舊方法打開攝像頭 else if (navigator.getMedia) { navigator.getMedia({ video: true }, function (stream) { mediaStreamTrack = stream.getTracks()[0]; video.src = (window.URL || window.webkitURL).createObjectURL(stream); video.play(); }, function (err) { console.log(err); }); } //$scope.autoFace自動人臉識別參數控制 if($scope.autoFace == 1){ //$scope.funHandle計時器返回一個計時器 if($scope.funHandle){//若是計時器存在釋放計時器 clearInterval($scope.funHandle); } //爲了防止正在人臉識別中再次發起人臉識別 $scope.facingFlag = false; $scope.funHandle = setInterval(function(){ if($scope.faceTradeModal == true && $scope.facingFlag == false){ $scope.facingFlag = true; $scope.updateFace(); } },$scope.autoFaceSpace); //$scope.autoFaceSpace多少秒自動識別一次 } } //認證 $scope.updateFace = function(){ var canvas = $('#myCanvas')[0], context = canvas.getContext('2d'), video = $('#myVideo')[0]; $scope.getFace(); var dataUrl = canvas.toDataURL('image/png'); var param = { "patientId":$scope.activePatientInfo.patientId, "photoBybase641":$scope.currentFaceDate, "photoBybase642":dataUrl } $http.post(Path.getUri("api/drug/face-recognition/check"), param) .success(function (data) { if($scope.jumpFlag == false) { if (data >= $scope.percentLike) { $scope.faceAuthFlag = true; $http.get(Path.getUri("api/patient-list/save-face-auth?flag=1&visitNo=" + $scope.activePatientInfo.visitNo + "&encounterNo=" + ($scope.faceAuthSource == 3 ? $scope.activePatientInfo.encounterNo : ""))) .success(function (data) { }); $scope.closeFaceTradeModal(); } else { $scope.facingFlag = false; if($scope.autoFace == 0) { hrDialog.dialog(hrDialog.typeEnum.WARN, {message: "認證失敗,不是同一個患者!"}) .close(function (result) { }); } } } console.log(data); }) .error(function () { $scope.facingFlag = false; if($scope.autoFace == 0) { hrDialog.dialog(hrDialog.typeEnum.WARN, {message: "頭像數據對比失敗!"}) .close(function (result) { hrProgress.close(); }); } }); }