strack.js调摄像头人脸识别拍照

最新推荐文章于 2023-09-07 22:59:16 发布

weixin_44099195

最新推荐文章于 2023-09-07 22:59:16 发布

阅读量460

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44099195/article/details/125261361

版权

html 部分引入

<script src="./tracking/build/tracking-min.js"></script>

	<div style={{height: '100%', position: 'relative', overflow: 'hidden'}}>
     	<video id="myVideo" className='srack-my-video' width="140%" preload autoplay loop muted playsinline webkit-playsinline="true"></video>
        <canvas id="myCanvas" width="100%" style={{display: 'none'}}></canvas>
        <div id="informationTitle" style={{position: 'absolute', top: '20px', width: '100%', textAlign: 'center', color: '#000'}}></div>
    </div>

调摄像头拍照

	function tarckPhoto() {
        var tipFlag = false  // 是否检测
        var faceflag = false // 是否进行拍照
        var informationTitle = $("#informationTitle")//人脸提示
        // 使用监听人脸的包
        var facevideo = document.getElementById('myVideo');
        var facecanvas = document.getElementById('myCanvas');
        var facecontext = facecanvas.getContext('2d');
        var tracker = new tracking.ObjectTracker('face');
        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1); 
        //每次打开弹框先清除canvas没拍的照片
        facecontext.clearRect(0, 0, facecanvas.width, facecanvas.height);
        // 打开摄像头
        var tra = tracking.track('#myVideo', tracker, { camera: true });
        facevideo.play();
        tracker.on('track', function(event) {
            if(!tipFlag){
                facecontext.clearRect(0, 0, facecanvas.width, facecanvas.height);
                if (event.data.length === 0) {
                    //未检测到人脸
                    if(!faceflag){
                        informationTitle.html('未检测到人脸')
                    }
                } else if (event.data.length === 1) { // 长度为多少代表检测到几张人脸
                    //检测到一张人脸
                    if(!tipFlag){
                        informationTitle.html('正在识别，请勿乱动~')
                        // 给检测到的人脸绘制矩形
                        event.data.forEach(function(rect) {
                            facecontext.strokeStyle = '#a64ceb';
                            facecontext.strokeRect(rect.x, rect.y, rect.width, rect.height);
                        });
                        if(!faceflag){// 检测到人脸进行拍照
                            faceflag = true
                            tipFlag = true
                            setTimeout(() => {// 延迟两秒返回结果
                                facecontext.drawImage(facevideo, 0, 0, facecanvas.width, facecanvas.height)
                                let imgData = facecanvas.toDataURL('image/png', 0.3)
								imgData  = imgData .split(';base64,').pop()
								facevideo.srcObject.getTracks().forEach(track => track.stop());
                            }, 2000);
                        }
                    }
                } else {
                    //检测到多张人脸
                    if(!faceflag){
                        informationTitle.html('仅可一人进行人脸识别！')
                    }
                }
            }
        });
	}