js人脸识别

<!DOCTYPE html>  
<head> 
 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />  
    <script type="text/javascript" src="http://www.jq22.com/demo/tracking-Plus201710110918/js/tracking-min.js"></script>
    <script type="text/javascript" src="http://www.jq22.com/demo/tracking-Plus201710110918/js/face-min.js"></script>
    <style type="text/css">
        .v{
            margin-left: -9999px;
            float: left;
        }
    </style>
</head>  
<body>  
    <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br />   
    <video height="320px" class="v" id="video" autoplay="autoplay"></video><hr />   
    <canvas id="canvas" width="480px" height="320px"></canvas>  
    <script type="text/javascript">  
    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
    context.lineWidth = 10;
    context.strokeStyle = '#ff0202';
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }
    function success(stream) { 
        let CompatibleURL = window.URL || window.webkitURL; 
        video.srcObject = stream;
        video.play();
    }
    function error(error) {
        alert('访问用户媒体设备失败,请尝试更换浏览器')
    }
    function getMedia() {
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            getUserMedia({video : {width: 480, height: 320 }}, success, error);
        } else {
            alert('不支持访问用户媒体');
        }
    }
    var tracker = new tracking.ObjectTracker(['face']);
    tracker.setStepSize(1.7);
    tracking.track('#video', tracker);
    tracker.on('track', function(event) {
       // context.clearRect(0, 0, canvas.width, canvas.height); 
        context.drawImage(video,0,0,480,320);
        if(event.data.length == 0){
            console.log("没有检测到人脸")
        }else{
            event.data.forEach(function(rect) {
            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
        });            
        }
      });
    </script>  
</body>



js人脸识别


本站如无特别说明即为原创,转而告知:(https://iwonmo.com/archives/1605.html)

标签: tracking

添加新评论