php实现调取摄像头拍摄用户打卡照片的功能

这篇文章给大家分享的是有关php实现调取摄像头拍摄用户打卡照片的功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获。

10年的怀仁网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整怀仁建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“怀仁网站设计”,“怀仁网站推广”以来，每个客户项目都认真落实执行。

需求：

拍照和照片要在同一个位置，拍完以后视频框显示照片，如果想重拍点击激活摄像头按钮，视频框显示，照片隐藏，再点击拍，拍摄成功，点击上传。

调取成功摄像头，如图下会有进度条的视频框显示：

php实现调取摄像头拍摄用户打卡照片的功能

点击拍照，拍摄成功，左边会显示激活摄像头的按钮，其实不点激活摄像头，不满意接着点拍照，是可以拍的，只不过看不到是什么样的，如图：

php实现调取摄像头拍摄用户打卡照片的功能

拍摄完成，点击上传，上传至后台进行数据操作。

样式文件：

.coach-price{display: none}
.input-but{display: inline-flex;}
#canvas{display: none}
#showVideo{display: none}
#input-picture{width:100%;}
HTML代码：

    
        打卡头像
    
    
        
            
                
                    
                    
                    //这是一个画布的容器
                    
                
            
            
                 //要拍照的视频框
                
            
            
               //各种按钮

JS代码：

提交后台，PHP进行处理，用的框架是tp5的，所以后面返回的时候直接用的tp的success和error，很方便，它的第一个参数是msg,第二个是URL，第三个是data。

 public function upPicture(){
        $image_code = input('image_code');
        if(empty($image_code)){
            $this ->error('照片为空');
        }
        $uId = input('userId');
       //处理接收过来的图片
        $img = str_replace('data:image/png;base64,', '', $image_code);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
       // 图片名称
        $file_name = "./uploads/head/".time().".png";
        $fp = fopen($file_name, 'w');
        fwrite($fp, $data);
        fclose($fp);
        $array = array(
            "picture" => substr($file_name,1)
        );
       $res =  Db::table("table")->where("userId",$uId)->setField($array);
       if($res){
           $this ->success('编辑成功！');
       }else{
           $this ->error('编辑失败，请刷新重试！');
       }
    }

以上就是php实现调取摄像头拍摄用户打卡照片的功能，看完之后是否有所收获呢？如果想了解更多相关内容，欢迎关注创新互联行业资讯，感谢各位的阅读。

网站题目：php实现调取摄像头拍摄用户打卡照片的功能
本文链接：http://shouzuofang.com/article/pociei.html

网站建设知识

php实现调取摄像头拍摄用户打卡照片的功能

打卡头像

其他资讯