基於百度AI+navigator+jquery-webcam+jsp實現人臉識別登陸續，真正兼容各瀏覽器

時間 2019-11-29

標籤基於百度 ai+navigator+jquery navigator jquery webcam+jsp webcam jsp 實現識別登陸真正兼容瀏覽器欄目 JQuery 简体版

原文原文鏈接

一、對於百度AI的調用和簡單的jquery-webcam獲取攝像頭圖像的方法，參見以往的博客：http://www.cnblogs.com/guo-eric/p/8371861.htmljavascript

二、對於谷歌瀏覽器，能夠採用H5標籤，直接獲取canvas標籤實現php

<!DOCTYPE html>
<html>
  <head>
    <title>paizhao.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
 <body>
<div id="contentHolder">
    <video id="video" width="320" height="320" autoplay></video>
    <button id="start" style="display:block" >start</button>
    <button id="picture" style="display:block" >paizhao</button>
    <canvas style="display:block" id="canvas" width="320" height="320"></canvas>
    <button id="sc" style="display:block" >shangchuan</button>
    <button id="stop" style="display:block" >stop</button>
</div>
</body>
<script>
     var mediaStreamTrack;
    document.getElementById("start").addEventListener("click", function () {
        navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia;
        if (navigator.getUserMedia) {
            navigator.getUserMedia({ audio: true, video: { width: 320, height: 320 } },
                    function(stream) {
                     mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
                        video.src = (window.URL || window.webkitURL).createObjectURL(stream);
                        video.play();
                       /*  var video = document.getElementById("video");
                        video.src = window.URL.createObjectURL(stream);
                        video.onloadedmetadata = function(e) {
                            console.log('nihao44eee4aaaaddda');
                            video.play();
                        }; */
                    },
                    function(err) {
                        console.log("The following error occurred: " + err.name);
                    }
            );
        } else {
            console.log("getUserMedia not supported");
        }
    });
   document.getElementById("stop").addEventListener("click", function () {
           mediaStreamTrack && mediaStreamTrack.stop();
    });
    document.getElementById("picture").addEventListener("click", function () {
        var context = document.getElementById("canvas").getContext("2d");
        context.drawImage(video, 0, 0, 320, 320);
    });
    document.getElementById("sc").addEventListener("click", function () {
        var imgData=document.getElementById("canvas").toDataURL("image/png");
        var mmmd=getBase64Image(document.getElementById("mmm"));
        var data=imgData.substr(22);
        console.log(mmmd)
        debugger
        $.post('recorder/target/sc',{'sj':data});
    });
     function getBase64Image(img) {
          var canvastemp = document.createElement("canvas");
          canvastemp.width = img.width;
         canvastemp.height = img.height;
         var ctx = canvas.getContext("2d");
         ctx.drawImage(img, 0, 0, img.width, img.height);
         var dataURL = canvas.toDataURL("image/png");
         return dataURL
         // return dataURL.replace("data:image/png;base64,", "");
     }
</script>
</html>

三、對於IE瀏覽器必須採用jquery-webcam實現，由於IE對H5的標籤實現的很差css

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>jQuery-webcam-master</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.webcam.js"></script>
<style type="text/css">
#webcam {
    border: 1px solid #666666;
    width: 320px;
    height: 240px;
}

#photos {
    border: 1px solid #666666;
    width: 320px;
    height: 240px;
}

.btn {
    width: 320px;
    height: auto;
    margin: 5px 0px;
}

.btn input[type=button] {
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 3px;
}
</style>

</head>
<body>
<input type="button" value="show" id="showBtn" onclick="init();" />
<input type="button" value="close" id="closeBtn" onclick="destroy();" />
    <div id="webcam"></div>

    <div class="btn">
        <input type="button" value="登陸" id="saveBtn" onclick="action('old');" disabled="disabled"/>
        <a href="http://localhost:8088/AipFaceSys/webcam.jsp">跳轉</a>
    </div>
</body>


<script type="text/javascript">

function init(){
    var pos = 0, ctx = null, saveCB, image = [];
    //建立畫布指定寬度和高度
    var root = document.getElementById("webcam");
    if(root.firstChild){
        root.removeChild(root.firstChild);
    }
    
    var canvas = document.createElement("canvas");
    canvas.setAttribute('width', 320);
    canvas.setAttribute('height', 240);

//若是畫布成功建立
if (canvas.toDataURL) {
    //設置畫布爲2d，將來可能支持3d
    ctx = canvas.getContext("2d");
    //截圖320*240，即整個畫布做爲有效區(cutx?)
    image = ctx.getImageData(0, 0, 320, 240);

    saveCB = function(data) {
        //把data切割爲數組
        var col = data.split(";");
        var img = image;
        //繪製圖像(這裏不是很理解算法)
        //參數data  只是每行的數據  ，例如320*240 大小的照片，一張完整的照片下來須要240個data，每一個data有320個rgb
        for (var i = 0; i < 320; i++) {
            //轉換爲十進制
            var tmp = parseInt(col[i]);
            img.data[pos + 0] = (tmp >> 16) & 0xff;
            img.data[pos + 1] = (tmp >> 8) & 0xff;
            img.data[pos + 2] = tmp & 0xff;
            img.data[pos + 3] = 0xff;
            pos += 4;
        }
        //當繪製320*240像素的圖片時發給後端php
        if (pos >= 4 * 320 * 240) {
            //把圖像放到畫布上,輸出爲png格式
            ctx.putImageData(img, 0, 0);
            //alert('圖片保存成功');
            $.ajax({
                url : 'login.do?method=old',
                type : "POST",
                dataType : 'json',
                async : false,
                data : {image : canvas.toDataURL("image/png")},
                success : function(data) {    
                    alert(data.flag+'---'+data.message);
                    //webcam = null;
                },
                error : function(error) {
                    tip('訪問數據異常', '異常提示');
                    return true;
                }
            });
            pos = 0;
        }
    };

}

$("#webcam").webcam({
    width : 320,
    height : 240,
    mode : "callback",
    swffile : "js/jscam.swf",
    onTick : function(remain) {

        if (0 == remain) {
            jQuery("#status").text("Cheese!");
        } else {
            jQuery("#status").text(remain + " seconds remaining...");
        }
    },
    onSave : saveCB,
    onCapture : function() {
        webcam.save();
    },
    onPauseCamera : function() {
        webcam.pauseCamera();
    },
    debug : function(type, string) {
        console.log(type + ": " + string);
    }
});

//初始化以後，登陸按鈕纔可用
$("#saveBtn").removeAttr("disabled");
}
    
    //拍照
    var method = 'login';
    function action(action) {
            if(action != null){
                method = action;
            }
            webcam.capture();
    }
    
function destroy(){
    webcam.pauseCamera();
}
</script>

</html>