php調取相機實現拍照功能的方法-php教程-PHP中文網

php調取相機實現拍照功能的方法

藏色散人

發布： 2023-04-07 22:14:01

轉載

5487 人瀏覽過

最近做的商家後台要實現調取攝影機拍攝用戶打卡照片的功能，找資料研究了下，終於黃天不負有心人，成功了，下面我分步驟將程式碼貼出來，希望能有幫助。

程式碼有點多，但每一步都很好理解，首先是HTML程式碼，寫一個form表單，到時候上傳圖片時ajax非同步提交，不需要引入別的js,h5有方法能直接調取媒體設備。

不過要注意的是好幾個瀏覽器比如穀歌，QQ，360等因為安全原因，沒有HTTPS協議的網站一律認為是不安全的，所以，調取不到，要記得給網站申請HTTPS證書，安裝在伺服器上

測試階段，他們的瀏覽器預設是關閉的lash和攝影機設備的，打不開，找了各種找入口，就是沒有打卡的按鈕，最後試了試火狐的，火狐的可以調取，所以建議測試階段用火狐瀏覽器開發

#需求：

拍照和照片要在同一個位置，拍完以後影片框顯示照片，如果想重拍點擊啟動相機按鈕，影片框顯示，照片隱藏，再點擊拍，拍攝成功，點擊上傳。

調取成功攝像頭，如圖下會有進度條的視頻框顯示：

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

登入後複製