php调取摄像头实现拍照功能

Love The Way You Lie 2023-06-25 04:59 30阅读 0赞

最近做的商户后台要实现调取摄像头拍摄用户打卡照片的功能，找资料研究了下，终于黄天不负有心人，成功了，下面我分步骤将代码贴出来，希望能有帮助。

代码有点多，但是每一步都很好理解，首先是HTML代码，写一个form表单，到时候上传图片时ajax异步提交，不需要引入别的js,h5有方法能直接调取媒体设备。

不过要注意的是好几个浏览器比如谷歌，QQ，360等因为安全原因，没有HTTPS协议的网站一律认为是不安全的，所以，调取不到，要记得给网站申请HTTPS证书，安装在服务器上。

测试阶段，他们的浏览器默认是关闭的lash和摄像头设备的，打不开，找了各种找入口，就是没有打卡的按钮，最后试了试火狐的，火狐的可以调取，所以建议测试阶段用火狐浏览器开发。

**需求：**

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

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

![format_png][]

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

![format_png 1][]

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

**样式文件：**

.coach-price{display: none}
    
    .input-but{display: inline-flex;}
    
    #canvas{display: none}
    
    #showVideo{display: none}
    
    #input-picture{width:100%;}
    
    HTML代码：
    
    <div class="ibox float-e-margins">
    
        <div class="ibox-title">
    
            <h5>打卡头像</h5>
    
        </div>
    
        <div class="ibox-content img-content">
    
            <form class="form-horizontal m-t" id="upPictureForm" method="post" action="">
    
                <div class="form-group " id="input-picture">
    
                    <div class="img-box" id="results">
    
                        <input name="image_code" id="image_code" type="hidden" value=""/>
    
                        <input name="userId" class="userId" type="hidden" value=""/>
    
                        //这是一个画布的容器
    
                        <canvas id="canvas" width="300" height="260"></canvas>
    
                    </div>
    
                </div>
    
                <div class="form-group ">
    
                     //要拍照的视频框
    
                    <video id="video"  controls>
    
                    </video>
    
                </div>
    
                <div class="form-group ">
    
                   //各种按钮
    
                    <div class="input-but">
    
                        <button type="button" class="layui-btn" id="showVideo">
    
                            激活摄像头
    
                        </button>
    
                        <button type="button" class="layui-btn" id="capture">
    
                            <i class="layui-icon"></i>拍照
    
                        </button>
    
                        <button type="button" id="uppicture" class="layui-btn" >
    
                            <i class="layui-icon"></i>上传
    
                        </button>
    
                    </div>
    
                </div>
    
            </form>
    
        </div>
    
    </div>

**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('编辑失败，请刷新重试！');
    
          }
    
       }

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MaG01a2tOOUpYUHdjaWM2NVFVTlhlUVNuRGhseEtOZldTOHM4cDhtSjdGMVdlanZQRFBlUjJOVGxXNHpIMWJzNXNmSHZIQ2xBUm1MQkNybkZXYXEwcUEvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9MaG01a2tOOUpYUHdjaWM2NVFVTlhlUVNuRGhseEtOZldCd29ZTklocElqOEptVFRyeTJSMmdOYThYVmY4VmFHUHdOTGZpYzBPUU93aWJpYTl6VFVMdXZ6RVEvNjQw?x-oss-process=image/format,png