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

首頁

後端開發

php教程

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

藏色散人

Dec 04, 2019 pm 01:55 PM

php

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

程式碼有點多，但每一步都很好理解，首先是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代码：
<div class="ibox float-e-margins">
    <div class="ibox-title">
        <h5 id="打卡头像">打卡头像</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">&#xe67c;</i>拍照
                    </button>
                    <button type="button" id="uppicture" class="layui-btn" >
                        <i class="layui-icon">&#xe67c;</i>上传
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

JS程式碼：

<script>
    //访问用户媒体设备的兼容方法
    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) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);
        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }
    function error(error) {
        alert(`访问用户摄像头失败${error.name}, ${error.message}`);
    }
    //从 canvas 提取图片 image
    function convertCanvasToImage(canvas) {
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }
    function getnavigator() {
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            //获取video宽高
            var v_height,v_width;
            var myvObj = document.getElementById("video");
            myvObj.addEventListener("loadedmetadata", function () {
                v_height = this.videoHeight;
                v_width =this.videoWidth;
                $(&#39;#canvas&#39;).attr(&#39;width&#39;,v_width);
                $(&#39;#canvas&#39;).attr(&#39;height&#39;,v_height);
            });
            //调用用户媒体设备, 访问摄像头
            getUserMedia({video : {width: 320, height: 240}}, success, error);
        } else {
            alert(&#39;不支持访问用户媒体&#39;);
        }
    }
    getnavigator();
    function showVideo(){
        $(&#39;#results&#39;).find(&#39;img&#39;).remove();
        $(&#39;#canvas&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#video&#39;).css(&#39;display&#39;,&#39;block&#39;);
        $(&#39;#showVideo&#39;).css(&#39;display&#39;,&#39;none&#39;);
        getnavigator();
    }
    function showpicture(picture) {
        if($(&#39;#results&#39;).find(&#39;img&#39;).attr(&#39;src&#39;)){
            $(&#39;#results&#39;).find(&#39;img&#39;).attr(&#39;src&#39;,picture);
        }else{
            $(&#39;#results&#39;).append(&#39;<img  src="/static/imghwm/default1.png"  data-src="&#39;+picture+&#39;"  class="lazy"  / alt="php調取相機實現拍照功能的方法" >&#39;);
        }
        $(&#39;#video&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#canvas&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#showVideo&#39;).show();
        $(&#39;.picture&#39;).val(1);
    }
    function hidepicture() {
        $(&#39;#results&#39;).find(&#39;img&#39;).remove();
        getnavigator();
        $(&#39;#video&#39;).css(&#39;display&#39;,&#39;block&#39;);
        $(&#39;#canvas&#39;).css(&#39;display&#39;,&#39;none&#39;);
        $(&#39;#showVideo&#39;).css(&#39;display&#39;,&#39;none&#39;);
    }
    $(&#39;#showVideo&#39;).click(function () {
        showVideo();
    });
    document.getElementById(&#39;capture&#39;).addEventListener(&#39;click&#39;, function () {
        let video = document.getElementById(&#39;video&#39;);
        let canvas = document.getElementById(&#39;canvas&#39;);
        let context = canvas.getContext(&#39;2d&#39;);
        context.drawImage(video, 0, 0);
        //获取网页中的canvas对象
        var mycans=$(&#39;canvas&#39;)[0];
        //调用convertCanvasToImage函数将canvas转化为img形式
        var img=convertCanvasToImage(mycans);
        if(img.src){
            $(&#39;#results&#39;).find(&#39;#image_code&#39;).val(img.src);
            // $(&#39;#capture&#39;).text(&#39;修改&#39;);
            $(&#39;#video&#39;).css(&#39;display&#39;,&#39;none&#39;);
            $(&#39;#canvas&#39;).css(&#39;display&#39;,&#39;block&#39;);
            $(&#39;#showVideo&#39;).show();
        }
    })
//点击图片上传按钮
$(&#39;#uppicture&#39;).click(function () {
    var userId = $(&#39;.userId&#39;).val();
    var image_code = $(&#39;#image_code&#39;).val();//图片值
    if(!userId){
        alert(&#39;用户不存在&#39;);return;
    }
    if(!image_code){
        alert(&#39;请先拍照&#39;);return;
    }
    $.post("{:url(&#39;upPicture&#39;)}", {&#39;userId&#39;:userId,&#39;image_code&#39;:image_code}, function(res){
        // console.log(res);
        if(1 == res.code){
            layer.alert(res.msg, {title: &#39;友情提示&#39;, icon: 1});
            $(&#39;.picture&#39;).val(1);
        }else{
            layer.alert(res.msg, {title: &#39;友情提示&#39;, icon: 2});
        }
    });
});
</script>

提交後台，PHP進行處理，用的框架是tp5的，所以後面回傳的時候直接用的tp的success和error，很方便，它的第一個參數是msg,第二個是URL，第三個是data。

 public function upPicture(){
        $image_code = input(&#39;image_code&#39;);
        if(empty($image_code)){
            $this ->error(&#39;照片为空&#39;);
        }
        $uId = input(&#39;userId&#39;);
       //处理接收过来的图片
        $img = str_replace(&#39;data:image/png;base64,&#39;, &#39;&#39;, $image_code);
        $img = str_replace(&#39; &#39;, &#39;+&#39;, $img);
        $data = base64_decode($img);
       // 图片名称
        $file_name = "./uploads/head/".time().".png";
        $fp = fopen($file_name, &#39;w&#39;);
        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(&#39;编辑成功！&#39;);
       }else{
           $this ->error(&#39;编辑失败，请刷新重试！&#39;);
       }
    }

相關推薦：《PHP教學》

以上是php調取相機實現拍照功能的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：csdn。如有侵權，請聯絡admin@php.cn刪除

PHP和Python：解釋了不同的範例Apr 18, 2025 am 12:26 AM

PHP主要是過程式編程，但也支持面向對象編程（OOP）；Python支持多種範式，包括OOP、函數式和過程式編程。 PHP適合web開發，Python適用於多種應用，如數據分析和機器學習。

PHP和Python：深入了解他們的歷史Apr 18, 2025 am 12:25 AM

PHP起源於1994年，由RasmusLerdorf開發，最初用於跟踪網站訪問者，逐漸演變為服務器端腳本語言，廣泛應用於網頁開發。 Python由GuidovanRossum於1980年代末開發，1991年首次發布，強調代碼可讀性和簡潔性，適用於科學計算、數據分析等領域。

在PHP和Python之間進行選擇：指南Apr 18, 2025 am 12:24 AM

PHP適合網頁開發和快速原型開發，Python適用於數據科學和機器學習。 1.PHP用於動態網頁開發，語法簡單，適合快速開發。 2.Python語法簡潔，適用於多領域，庫生態系統強大。

PHP和框架：現代化語言Apr 18, 2025 am 12:14 AM

PHP在現代化進程中仍然重要，因為它支持大量網站和應用，並通過框架適應開發需求。 1.PHP7提升了性能並引入了新功能。 2.現代框架如Laravel、Symfony和CodeIgniter簡化開發，提高代碼質量。 3.性能優化和最佳實踐進一步提升應用效率。

PHP的影響：網絡開發及以後Apr 18, 2025 am 12:10 AM

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

PHP類型提示如何起作用，包括標量類型，返回類型，聯合類型和無效類型？Apr 17, 2025 am 12:25 AM

PHP類型提示提升代碼質量和可讀性。 1)標量類型提示：自PHP7.0起，允許在函數參數中指定基本數據類型，如int、float等。 2)返回類型提示：確保函數返回值類型的一致性。 3)聯合類型提示：自PHP8.0起，允許在函數參數或返回值中指定多個類型。 4)可空類型提示：允許包含null值，處理可能返回空值的函數。

PHP如何處理對象克隆（克隆關鍵字）和__clone魔法方法？Apr 17, 2025 am 12:24 AM

PHP中使用clone關鍵字創建對象副本，並通過\_\_clone魔法方法定制克隆行為。 1.使用clone關鍵字進行淺拷貝，克隆對象的屬性但不克隆對象屬性內的對象。 2.通過\_\_clone方法可以深拷貝嵌套對象，避免淺拷貝問題。 3.注意避免克隆中的循環引用和性能問題，優化克隆操作以提高效率。